对象动画-位置更新失败

Object animation - position fails to update

本文关键字：更新 失败 位置 动画 对象      更新时间：2023-09-26

所以我试图在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
    }
}

你总是把球画在同一个地方，正中间:

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" />

我让你的球动了。你只是忘了把位置设为这个。X和这个。

你会注意到它留下了一条条纹。所以你需要(1)清除所有内容并在每一帧上重新绘制所有内容，或者(2)保留旧的和旧的，在旧的和旧的上绘制白色，然后在x和y处绘制黑色。

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);
#myCanvas{width:200px;height:200px}
<canvas id="myCanvas"></canvas>

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

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

相关文章：