游戏轮换
红色方块可以旋转:
旋转组件
在本教程的前面，红色方块可以在游戏区域中移动，但不能转动或旋转。
要旋转组件，我们必须改变绘制组件的方式。
画布元素唯一可用的旋转方法是旋转整个画布:
您在画布上绘制的所有其他内容也将被旋转，而不仅仅是特定组件。
这就是为什么我们必须在 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 的新属性，它是表示角度的弧度数 组件。
component 构造函数的 update 方法是我们绘制组件，在这里你可以看到 将允许的更改
要旋转的组件:
实例
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();
}
亲自试一试 »
