W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

HTML 游戏运动



在“游戏旋转”一章中介绍的新的绘图组件方式中,动作更加灵活。


如何移动对象?

component 构造函数添加 speed 属性,该属性表示组件的当前速度。

还可以在 newPos() 方法中进行一些更改,以根据 speedangle 计算组件的位置。

默认情况下,组件面朝上,通过将speed属性设置为1,组件将开始向前移动。

Example

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 的新属性,它表示当前的移动值或旋转角度。 在 newPos() 方法中,根据 moveAngle 属性计算角度:

Example

将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);
    }
}
尝试一下 »

使用键盘

使用键盘时红色方块如何移动? 而不是上下移动,并且从一侧到另一侧,当您使用“向上”箭头时,红色方块向前移动,当按向左和向右箭头时,向左和向右转。

Example

尝试一下 »