游戏动作

如何移动物体?

component构造函数中添加一个speed属性,代表组件当前的速度。< /p>

同样在newPos()方法中做一些改动,根据速度speed 和角度 angle

默认情况下,组件朝上,通过将 speed 属性设置为 1,组件将开始向前移动。

实例

function component(width, height, color, x, y) {
  this.gamearea = gamearea;
  this.width = width;
  this.height = height;
  this.angle = 0;
  this.speed = 1;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.rotate(this.angle);
    ctx.fillStyle = color;
    ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
    ctx.restore();
  }
  this.newPos = function() {
    this.x += this.speed * Math.sin(this.angle);
    this.y -= this.speed * Math.cos(this.angle);
  }
}
亲自试一试 »


转弯

我们还希望能够左右转弯。 创建一个名为 moveAngle 的新属性,它表示当前的移动值或旋转角度。 在 newPos() 方法中,根据 计算 角度 moveAngle 属性:

实例

将 moveangle 属性设置为 1,看看会发生什么:

function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.angle = 0;
  this.moveAngle = 1;
  this.speed = 1;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.rotate(this.angle);
    ctx.fillStyle = color;
    ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
    ctx.restore();
  }
  this.newPos = function() {
    this.angle += this.moveAngle * Math.PI / 180;
    this.x += this.speed * Math.sin(this.angle);
    this.y -= this.speed * Math.cos(this.angle);
  }
}
亲自试一试 »

使用键盘

使用键盘时红色方块如何移动? 当你使用“向上”箭头时,红色方块不会上下左右移动,而是向前移动,按下左右箭头时会左右转动。