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);
        }
    }
    尝试一下
    使用键盘时红色方块如何移动?当你使用 “向上” 箭头时,红色方块将向前移动,而不是上下移动,也不是从一边到另一边移动,按下左箭头和右箭头时,红色方块会向左和向右移动。