随着绘图组件的新途径，在游戏中旋转章解释的那样，动作更加灵活。
如何移动对象？
a添加speed属性的component构造，它代表了组件的当前速度。
也使得在一些变化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()方法计算出angle基于所述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);
}
}
试一试» 使用键盘
如何使用键盘时的红色方块动？ 相反，上下移动，从一边到另一边的，红色方块前进，当你使用"up"箭头，按左右箭头时转左，右。