隨著繪圖組件的新途徑，在遊戲中旋轉章解釋的那樣，動作更加靈活。
如何移動對象？
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"箭頭，按左右箭頭時轉左，右。