HTML 游戏旋转



  • 定义和使用

    点击下面按钮红色方块可以旋转:
  • 旋转组件

    在本教程的前面,红色方块可以在游戏区移动,但不能旋转或旋转。
    要旋转组件,我们必须改变绘制组件的方式。
    画布元素唯一可用的旋转方法将旋转整个画布:
    rotate1
    在画布上绘制的其他所有内容也将被旋转,而不仅仅是特定的组件。
    这就是为什么我们必须对 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()
    组件是唯一旋转的对象:
  • 组件构造函数

    组件构造函数有一个名为angle的新属性,它是表示组件角度的弧度数。
    组件构造函数的更新方法是绘制组件,在这里您可以看到允许组件旋转的更改:
    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();
    }
    尝试一下