0

我正在使用 HTML5 Canvas 和 javascript 制作一个小游戏。到目前为止，我有一只风筝在碰撞时移动某种电源，在碰撞时移动障碍物。

现在我想增加生命，当你遇到障碍时，你的生命将减少 1。

我尝试了一些东西，当你撞到障碍物时，生命会减少，但它会不断减少，并且玩家图像被移除而不是障碍物图像。

这是生活中的事情，您可以在那里检查所有代码。

http://nickzijlstra.com/kite

这里的代码我认为是最重要的问题。

 function  hitObject(player, obj){
var a = (obj.x - player.x),
b = (obj.y - player.y),
c = Math.sqrt(a*a + b*b),
r0 = player.image.width/2,
r1 = obj.image.width/2;

 if (c < r0+r1) { 
player.drawable = false;
lifes -=1;


window.location.reload(true);       
  }
 }

如果有人看到问题或知道解决方案，我将不胜感激！

4

2 回答 2

1

播放器消失的原因是hitObject函数中的这一行：

player.drawable = false;

由于绘图函数中的这种情况，这将导致无法绘制玩家：

if (player.drawable == true) {
    context.drawImage(player.image, player.x, player.y, player.image.width, player.image.height);
}

我想如果玩家被击中，你实际上想将obj背部移动到屏幕顶部的随机位置。目前它不这样做，这就是生命值迅速下降的原因：物体击中玩家，移除一条生命，然后下一帧再次击中玩家（即使玩家不可见） .

你可能想要的是这样的：

...
if (c < r0+r1) { 
    lifes -=1;

    // Respawn the object.
    obj.y = -50;
    obj.x = Math.random() * canvas.width;
...
于 2013-04-04T19:55:12.520 回答
0

猜测一下，我会说你应该更换

player.drawable = false;

和

obj.drawable = false;

并将整个碰撞检测包裹在 if obj.drawable=true 中，这样移除的障碍物就不会与风筝发生碰撞。

于 2013-04-04T19:53:49.737 回答