Question

我正在使用HTML5 Canvas和javascript制作一个小游戏。我到目前为止，我有一只风筝在碰撞时移动了一些力量，碰撞时出现了障碍。

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

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

这是你可以查看那里所有代码的生活。

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

 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);       
  }
 }

如果有人看到问题或知道解决方案，我会非常感激！

Answer 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;
...

Answer 2

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

player.drawable = false;

与

obj.drawable = false;

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

碰撞时生命减少

2 个答案: