Javascript 正确碰撞后重置函数

Question

如果我的玩家在方 block 上行走(water1、water2、water3 变量)，我会尝试重置条。当玩家与这三个方 block 中的一个发生碰撞时，该条会重置。如果我的玩家没有在方 block 上行走并且条数为 100，您将看到一个游戏结束屏幕。

到目前为止它可以正常工作，但问题是，当玩家与水砖碰撞时，进度条重置为开始，但游戏结束屏幕的计数器没有重置。

例如:如果我在 40% 时重置条，它会回到 0，但在条再达到 60% 后，我会看到游戏结束屏幕，而不是像我想要的那样在 100% 之后。

var water1 = {x: 352, y: 64, width: 32, height: 32}
var water2 = {x: 352, y: 96, width: 32, height: 32}
var water3 = {x: 384, y: 64, width: 32, height: 32}

function thirst() {                                                                                                     
      var elem2 = document.getElementById("durst");   
      var width = 1;
      var id2 = setInterval(frame, 1000);
      function frame() {
             if (player.xPos < water1.x + water1.width &&
                    player.xPos + player.width > water1.x &&
                    player.yPos < water1.y + water1.height &&
                    player.height + player.yPos > water1.y) {
                    thirst();
                    return;
                    }   if (player.xPos < water2.x + water2.width &&
                            player.xPos + player.width > water2.x &&
                            player.yPos < water2.y + water2.height &&
                            player.height + player.yPos > water2.y) {
                            thirst();
                            return;
                        }       if (player.xPos < water3.x + water3.width &&
                                    player.xPos + player.width > water3.x &&
                                    player.yPos < water3.y + water3.height &&
                                    player.height + player.yPos > water3.y) {
                                    thirst();
                                    return;
                                }       if (width >= 100) {
                                            clearInterval(id2);
                                        }    else {
                                                width++; 
                                                elem2.style.width = width + '%'; 
                                            }       if(width == 100) {
                                                        location.href = '666_GameOver.html';
                                                    }       
        }       
}

CSS

#balkenDurst {                                                                                                                          
      width: 5%;
      background-color: #0000ff;
      z-index: 4;
      position: absolute;
      margin-left: 8% ;
    }

    #durst {
      width: 0%;
      height: 30px;
      background-color: #ffffff;
      z-index: 4;
    }

HTML

<div id="balkenDurst">
  <div id="durst"></div>
</div>

也许你知道哪里出了问题。

我知道我可以用更少的代码编写它，但我正在学习，我很高兴它到目前为止能正常工作。

Answer 1

对象编程

好的，我看到你通过碰撞检测和你使用的方法接近你的目标。
代码有一些问题，请您自行解决。
但我为您提供了一些建议。

水砖

在你的代码中:

if (player.xPos < water1.x + water1.width &&
                player.xPos + player.width > water1.x &&
                player.yPos < water1.y + water1.height &&
                player.height + player.yPos > water1.y) {
    thirst();
    return;
}

这会重复多次。尽量避免一遍又一遍地重复相同的代码。
您可以轻松地将其更改为可以多次调用的函数。

这是一个例子:

function hit( tile) {
    //Hits on x axis
    if(player.xPos < tile.x + tile.width && player.xPos + player.width > tile.x) {
        //Hits on y axis
        if (player.yPos < tile.y + tile.height && player.yPos + player.height > tile.y) {
            return true;
        }
    }
    return false;
}

注:现在读代码是不是更容易了？现在我们把它变成了一个函数，它可以容纳任何 tile!

比如水砖。

//Defines our water tiles in an array. (Easier to use)
var waterTiles = [
    {x: 352, y: 64, width: 32, height: 32},
    {x: 352, y: 96, width: 32, height: 32},
    {x: 384, y: 64, width: 32, height: 32},
];

//Checks if any of the water tiles hit

function checkHits() {
    for (var i = 0; i < waterTiles.length; i++) {
        //Use our method above.
        var check = hit ( waterTiles[i] );
        if (check) {
            //Code to check if it hits.
        }
    }
}

一切都很好，但你没有回答我的问题。
好吧，现在进入游戏的口渴逻辑。

上面的代码中没有显示您如何设置口渴栏。

但是由于你的口渴条没有重置，这听起来像是一个变量没有被正确重置。

如果您定义了一个 var thirst 和一个 var width 条。你需要改变两者。
因此，在您的口渴方法中设置口渴级别:player.thirst = 60;(示例)。
然后在你的 frame() 方法(通常在游戏循环中称为“更新”)中得到类似这样的东西:var width = player.thirst
当你减少它时(每帧？)只需再次设置变量:player.thirst = player.thirst - 1;