ゲームローテーション
赤い四角は回転できます：
回転部品
このチュートリアルの前半では、赤い四角はゲームエリア上を動き回ることができましたが、回転したり回転したりすることはできませんでした。
コンポーネントを回転させるには、コンポーネントの描画方法を変更する必要があります。
キャンバス要素で使用できる唯一の回転方法は、キャンバス全体を回転します。
特定のコンポーネントだけでなく、キャンバスに描画する他のすべてのものも回転します。
update()そのため、メソッドにいくつかの変更を加える必要があります。
まず、現在のキャンバスコンテキストオブジェクトを保存します。
ctx.save();
次に、translateメソッドを使用して、キャンバス全体を特定のコンポーネントの中央に移動します。
ctx.translate(x, y);
次に、rotate（）メソッドを使用して必要な回転を実行します。
ctx.rotate(angle);
これで、コンポーネントをキャンバスに描画する準備が整いましたが、翻訳された（および回転された）キャンバスの位置0,0に中心位置を置いてコンポーネントを描画します。
ctx.fillRect(width / -2, height / -2, width, height);
終了したら、restoreメソッドを使用して、コンテキストオブジェクトを保存された位置に復元する必要があります。
ctx.restore();
回転するのはコンポーネントだけです。
コンポーネントコンストラクタ
コンストラクターには、コンポーネントの角度を表すラジアン数である、とcomponent呼ばれる新しいプロパティがあります。angle
コンストラクターのupdateメソッドはcomponent、コンポーネントを描画することでした。ここで、コンポーネントを回転できるようにする変更を確認できます。
例
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.angle = 0;
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();
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.angle += 1 * Math.PI / 180;
myGamePiece.update();
}