Question

我创造了一个小游戏，我试图让我的敌人精灵从画布墙上随机弹跳（改变方向并在它碰到画布的墙壁/边缘时随机飞出）示例 - [http://www.onlywebpro.com/2011/07/20/html5-canvas-for-absolute-beginners-part-4/]

这是我移动敌人的功能，但遗憾的是它不起作用，敌人飞离画布的边缘，有人可以帮忙吗？

Enemy.prototype.update = function () {

    this.drawX = this.drawX +5 ;
    this.drawY = this.drawY+ 5;

if ((this.x + 2) >= canvasWidth || (this.x - 2) <= 0) 
{    
this.x = -2;   
}

  if ((this.y + 2) >= canvasHeight || (this.y - 2) <= 0) { 
        this.y = -2;
      }
     }

非常感谢，

Answer 1

当您希望对象改变方向时，您不仅需要更改位置，还需要更改其当前的运动矢量。目前，您的移动向量在第3行和第4行中被硬编码为+5和+ 5。

将移动矢量移动到您在对象的构造函数中设置的变量：

this.moveX = 5;
this.moveY = 5;

然后通过变量而不是硬编码值更改每帧的位置：

this.x = this.x + this.moveX ;
this.y = this.y + this.moveY ;

当您检测到水平或垂直碰撞时，反转相应的运动矢量：

if ((this.x + 2) >= canvasWidth || (this.x - 2) <= 0) 
{    
    this.moveX = -this.moveX;   
}

if ((this.y + 2) >= canvasHeight || (this.y - 2) <= 0) { 
    this.moveY = -this.moveY;
}

画布游戏移动精灵

1 个答案: