Javascript Сброс функции после столкновения вправо - PullRequest
Новая
       6

Javascript Сброс функции после столкновения вправо

0 голосов
/ 01 марта 2019

Я пытаюсь сбросить бар, если мой игрок ходит по плитке (переменные water1, water2, water3).Когда игрок сталкивается с одной из этих трех плиток, панель сбрасывается.Если мой игрок не ходил по плиткам, а планка на 100, вы получаете экран Game Over.

Пока это работает, но проблема в том, что когда игрок сталкивается с плиткой воды,бар сбрасывается, чтобы начать, но счетчик экрана Game Over не сбрасывался.

Например: если я сбрасываю бар, когда он на 40%, он возвращается к 0, но после того, как бар переходит в другой60% я получаю Экран Game Over, а не после 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>

Возможно, у вас естьПонимаю, что не так.

Я знаю, что мог бы написать это с меньшим количеством кода, но я учусь, и я действительно рад, что это работает до сих пор.

1 Ответ

0 голосов
/ 01 марта 2019

Программирование с объектами

Хорошо, я вижу вашу близость к цели с обнаружением столкновений и методами, которые вы используете.
Есть некоторые проблемы с кодом, и вы должны их исправить.
Но у меня есть несколько указателей для вас.

Водяные плитки

В вашем коде: 

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 () (обычно называемом «update» в игровых циклах) получите что-то от этого thirtкак: var width = player.thirst
Когда вы уменьшаете его (каждый кадр?) Просто установите переменную снова: player.thirst = player.thirst - 1;

...