游戏移动
在游戏旋转章节中解释了新的组件绘制方式，使移动更加灵活。
如何移动物体？
在 component 构造函数中添加一个 speed 属性，它代表组件的当前速度。
还要在 newPos() 方法中进行一些更改，根据 speed 和 angle 计算组件的位置。
默认情况下，组件朝上，将速度属性设置为 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 属性计算 angle
示例
将 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);
}
}
自己尝试一下 »
使用键盘
使用键盘时红色方块是如何移动的？红色方块不是上下移动，而是左右移动，当你使用“上”箭头键时，它向前移动，当你按下左右箭头键时，它会向左或向右转动。
