Question

所以我试图用JavaScript制作乒乓球游戏。我已经尝试了很多东西，但无论我做什么都不会让球移动。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var Game = {};

var Player = function(x, y) {
  this.x = x;
  this.y = y;
}

Player.prototype.draw = function() {
  ctx.beginPath();
  ctx.rect(this.x, this.y, 20, 80);
  ctx.fillStyle = "#000";
  ctx.fill();
  ctx.closePath();
}

var Ball = function(x, y, diam) {
  this.x = x;
  this.y = y;
  this.diam = diam;
  this.xvel = 5;
  this.yvel = 5;
}

Ball.prototype.draw = function() {
  ctx.beginPath();
  ctx.rect(canvas.width/2 - 10, canvas.height/2 - 10, 20, 20);
  ctx.fillStyle = "#000";
  ctx.fill();
  ctx.closePath();
};

Ball.prototype.moveBall = function() {
  this.x = this.x + this.xvel;
  this.y = this.y + this.yvel;
};


var p1 = new Player(20, canvas.height/2 - 40);
var p2 = new Player(canvas.width-20-20, canvas.height/2 - 40);
var ball = new Ball(canvas.width/2 - 10, canvas.height/2 - 10, 20);

Game.draw = function() { p1.draw(); p2.draw(); ball.draw(); };
Game.update = function() { ball.moveBall(); };
Game.run = function() { Game.update(); Game.draw(); };
Game.fps = 50;

Game._intervalId = setInterval(Game.run, 1000 / Game.fps);

我无法让球移动。有任何想法吗？还有什么更简洁的课程方式？是否有不同的方式来做功能？

也许喜欢

class Apple {
    function draw() {
        //draw here
    }
}

Answer 1

你总是把球拉到同一个地方，死点：

ctx.rect(canvas.width/2 - 10, canvas.height/2 - 10, 20, 20);

您要在其他位置更新this.x和this.y，而不是使用更新它们。尝试：

ctx.rect(this.x, this.y, 20, 20);

现在您有了解何时停止移动的问题，但这是一个单独的问题。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var Game = {};

var Player = function(x, y) {
  this.x = x;
  this.y = y;
}

Player.prototype.draw = function() {
  ctx.beginPath();
  ctx.rect(this.x, this.y, 20, 80);
  ctx.fillStyle = "#000";
  ctx.fill();
  ctx.closePath();
}

var Ball = function(x, y, diam) {
  this.x = x;
  this.y = y;
  this.diam = diam;
  this.xvel = 5;
  this.yvel = 5;
}

Ball.prototype.draw = function() {
  ctx.beginPath();
  ctx.rect(this.x, this.y, 20, 20);
  ctx.fillStyle = "#000";
  ctx.fill();
  ctx.closePath();
};

Ball.prototype.moveBall = function() {
  this.x = this.x + this.xvel;
  this.y = this.y + this.yvel;
};


var p1 = new Player(20, canvas.height/2 - 40);
var p2 = new Player(canvas.width-20-20, canvas.height/2 - 40);
var ball = new Ball(canvas.width/2 - 10, canvas.height/2 - 10, 20);

Game.draw = function() { p1.draw(); p2.draw(); ball.draw(); };
Game.update = function() { ball.moveBall(); };
Game.run = function() { Game.update(); Game.draw(); };
Game.fps = 50;

Game._intervalId = setInterval(Game.run, 1000 / Game.fps);

<canvas id="myCanvas" height="300px" width="300px" />

Answer 2

我让你的球移动了。你刚忘了在draw函数中将位置设置为this.x和this.y。

你注意到它留下了连胜。因此，您需要（1）清除所有内容并重新绘制每个帧上的所有内容，或者（2）保持oldx和oldy并在oldx oldy上绘制白色，然后在x和y处绘制黑色。快乐的编码。

＆＃13;

var canvas = document.getElementById("myCanvas");
      var ctx = canvas.getContext("2d");
      var Game = {};

      var Player = function(x, y) {
        this.x = x;
        this.y = y;
      }

      Player.prototype.draw = function() {
        ctx.beginPath();
        ctx.rect(this.x, this.y, 20, 80);
        ctx.fillStyle = "#000";
        ctx.fill();
        ctx.closePath();
      }

      var Ball = function(x, y, diam) {
        this.x = x;
        this.y = y;
        this.diam = diam;
        this.xvel = 5;
        this.yvel = 5;
      }

      Ball.prototype.draw = function() {
        ctx.beginPath();
        ctx.rect(this.x, this.y, 20, 20);
        ctx.fillStyle = "#000";
        ctx.fill();
        ctx.closePath();
      };

      Ball.prototype.moveBall = function() {
        this.x = this.x + this.xvel;
        this.y = this.y + this.yvel;
      };


      var p1 = new Player(20, canvas.height/2 - 40);
      var p2 = new Player(canvas.width-20-20, canvas.height/2 - 40);
      var ball = new Ball(canvas.width/2 - 10, canvas.height/2 - 10, 20);

      Game.draw = function() { p1.draw(); p2.draw(); ball.draw(); };
      Game.update = function() { ball.moveBall(); };
      Game.run = function() {console.log("hi"); Game.update(); Game.draw(); };
      Game.fps = 5;

      Game._intervalId = setInterval(Game.run, 1000 / Game.fps);

＆＃13;

#myCanvas{width:200px;height:200px}

＆＃13;

<canvas id="myCanvas"></canvas>

＆＃13;

这是一个很好的html画布游戏说明，遵循你做得很好的风格：

http://www.html5rocks.com/en/tutorials/canvas/notearsgame/

对象动画 - 位置无法更新

2 个答案: