使用对象编程

Question

如果我的玩家在图块上行走（water1，water2，water3变量），我正在尝试重置一个小节。当玩家与这三个图块之一发生碰撞时，栏会重置。如果我的玩家没有走在地砖上，并且栏位于100，您将看到“游戏结束”屏幕。

到目前为止，它仍然有效，但问题是，当玩家与水瓷砖碰撞时，滑杆将重置以开始，但“游戏结束”屏幕的计数器并未重置。

例如：如果在40％时重置该条，它会回到0，但是在另一条60％之后，我将获得Game Over Screen，而不是在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;
}

注意：现在阅读代码难道不是很容易吗？现在，由于我们将其制成功能，因此可以容纳任何瓷砖！

比如说瓷砖。

//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;

Javascript发生冲突后重置功能

1 个答案:

使用对象编程

瓷砖