上一节:

  HTML 游戏动作

  • 定义和使用

    有了新的绘制组件的方式，在游戏旋转一章中解释，动作更加灵活。

  • 如何移动对象？

    向组件构造函数添加一个 speed 属性，该属性表示组件的当前速度。
    还要对 newPos() 方法进行一些更改，以根据速度和角度计算组件的位置。
    默认情况下，组件朝上，通过将 "speed" 属性设置为 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 的新属性，它指示当前移动值或旋转角度。根据 newangle() 属性计算 newangle：
    组件构造函数的更新方法是绘制组件，在这里您可以看到允许组件旋转的更改：
    将 moveangle 属性设置为 1，然后查看发生的情况： 
    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);
    }
}
    尝试一下
    使用键盘时红色方块如何移动？当你使用 “向上” 箭头时，红色方块将向前移动，而不是上下移动，也不是从一边到另一边移动，按下左箭头和右箭头时，红色方块会向左和向右移动。
上一节: