描画コンポーネントの新しい方法では、ゲームローテーションの章で説明し、動きがより柔軟です。
オブジェクトを移動する方法？
追加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プロパティ：
例
1にmoveangleプロパティを設定し、何が起こるかを参照してください。
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"矢印を、左と右の矢印を押すと、左右になります。