游戏中对象的旋转
在本教程前面，红色方块能够在游戏区内移动，但无法转动或旋转。
要旋转组件，我们必须改变我们绘制组件的方式。
可用于canvas元素的唯一旋转方法就是旋转整个画布：
在画布上绘制的其他任何东西也将被旋转，不仅仅是指定旋转的组件。
这就是为什么我们必须在update（）方法中进行一些更改：
首先，我们保存当前画布上的对象：
ctx.save（）;
然后，使用translate方法将整个画布移动到特定组件的中心：
ctx.translate（x，y）;
然后我们使用rotate（）方法执行想要的旋转：
ctx.rotate（角度）;
现在我们准备将该组件绘制到已转动的画布上，绘制的中心位置在已转动的画布的（0,0）：
ctx.fillRect（width / -2，height / -2，width，height）;
完成后，我们必须使用restore方法将上下文对象恢复到保存的位置：
ctx.restore（）;
只有绘制的组件被旋转：
The Component Constructor
The component constructor has a new propery called angle, which is radian number that represents the angle of the component.
The update method of the component constructor is were we draw the component, and here you can see the changes that will allow the component to rotate:
组件构造函数
组件构造函数有一个称为angle的新属性，它是表示组件角度的弧度数。
组件构造函数的更新方法是我们绘制组件，并看到组件旋转的变化
Example
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();
}
完整源代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>
var myGamePiece;
function startGame() {
myGamePiece = new component(30, 30, "red", 80, 75);
myGameArea.start();
}
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.frameNo = 0;
this.interval = setInterval(updateGameArea, 20);
},
stop : function() {
clearInterval(this.interval);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
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();
}
</script>
<p>每当游戏区更新（每秒50次）时，红色方块将旋转一度。
注意：angle属性必须是弧度。</p>
</body>
</html>
|
