Обнаружение столкновений не работает в игре Pac-Man - PullRequest
Новая
       11

Обнаружение столкновений не работает в игре Pac-Man

0 голосов
/ 26 мая 2018

Я сам играю в pac-man и испытываю трудности с обнаружением столкновений между моим окружающим div и "pac-man".

Вот css для моего персонажа(это квадрат на данный момент) и границы вокруг всей игры.

div#pac{
    background-color: white;
    width: 35px;
    height: 35px;
    position: fixed;
    left: 90px;
    top: 135px;
    margin: 2px;
}
div#shell{
    border: 1px solid white;
    width: 80%;
    height: 75%;
    top: 85px;
    left: 130px;
    text-align: center;
    position: fixed;
    background-color: #DEB887;
}

далее я подумал, что должен показать вам html, хотя он довольно простой 

<div id="shell">
<div id="pac"></div>
</div>

и наконец javascript.Именно здесь начинается проблема, и для некоторых она может быть довольно сложной. Кроме того, я использую свои собственные функции, называемые getStyle и setStyle, которые делают именно то, что звучат, как и они. 

//move function for pac-man.
function move() {
    var upDown = parseInt(getStyle("pac", "top"));
    var leftRight = parseInt(getStyle("pac","left"));
    var width = parseInt(getStyle("shell", "width")) - parseInt(getStyle("pac", "width"));
    var height = parseInt(getStyle("shell", "height")) - parseInt(getStyle("pac", "height"));

    //arrow keys move down
    if (arrowKey == 40) {
        upDown = upDown + 2;
    }
    //arrow keys move up
    else if (arrowKey == 38) {
        upDown = upDown - 2;
    }    
    else if (arrowKey == 37) { //arrow keys move left
        leftRight = leftRight - 2;
    }
    else if (arrowKey == 39) { //arrow keys move right
        leftRight = leftRight + 2;
    }
    if (contains("pac", "shell")) {
        //arrow keys bounce from frame down
        if (upDown <= 85) {
            upDown += 2;
        }
        else if (upDown >= height + 35) {
            upDown += -2;
        }
        else if (leftRight <= 130){
            leftRight += 2;
        }
        else if (leftRight >= width + 35){
            leftRight += -2;
        }
    }
    //update to new location
    setStyle("pac", "top", upDown + "px");
    setStyle("pac", "left", leftRight + "px");
}

в приведенной выше функции я начинаю с определения своих переменных.

далее я создаю фактическую функцию перемещения, которая сообщает ей о перемещении в определенном направлении при нажатии определенной клавиши.

Затем я провожу тестирование столкновений, и именно здесь возникает проблема.

Эта проблема очень случайная и случайная.когда я запускаю функцию, обнаружение столкновения между верхом и левым работает просто отлично.но когда я пытаюсь переместиться в правую или нижнюю часть окружающего элемента, он отрезает меня примерно на 50-80 пикселей.

, и вы подумали бы просто добавить еще 50-80 пикселей к обнаружению, но NOPEвот тогда это становится еще более странным, потому что, если я добавлю к нему больше пикселей, обнаружение столкновений просто исчезнет, ​​и человек-пак сможет вылететь прямо с экрана, как будто там вообще нет div *

пожалуйста,кто-нибудь, я пытался решить эту проблему в течение 2 дней, и я не могу найти решение.Я что-то упускаю из виду?Я попытался изменить некоторые из css на такие вещи, как относительное положение и атрибуты left и top, но ничего не помогло.

полный исходный код и включенная библиотека (ниже приведены функции getStyle и setStyle) https://github.com/nicholaskorte/Javascript-pac-man-game/tree/master

1 Ответ

0 голосов
/ 27 мая 2018

Нашел мой собственный ответ.

Проблема заключалась в функции, содержащейся в моей библиотеке.

Я изменил это ... 

function contains(id1, id2) {
    var left1 = parseInt(getStyle(id1, "left"));
    var top1 = parseInt(getStyle(id1, "top"));
    var width1 = parseInt(getStyle(id1, "width"));
    var width2 = parseInt(getStyle(id2, "width"));
    var height1 = parseInt(getStyle(id1, "height"));
    var height2 = parseInt(getStyle(id2, "height"));

    if (left1 <= 5) {
        return false;
    }
    else if (left1 > width2 - width1) {
        return false;
    }
    else if (top1 < 0) {
        return false;
    }
    else if (top1 > height2 - height1) {
        return false;
    }
    else {
        return true;
    }
}

к этому ... 

function collisionFrame(id1, id2) {
    var left1 = parseInt(getStyle(id1, "left"));
    var right1 = left1 + parseInt(getStyle(id1, "width"));
    var top1 = parseInt(getStyle(id1, "top"));
    var bottom1 = top1 + parseInt(getStyle(id1, "height"));

    var left2 = parseInt(getStyle(id2, "left"));
    var right2 = left2 + parseInt(getStyle(id2, "width"));
    var top2 = parseInt(getStyle(id2, "top"));
    var bottom2 = top2 + parseInt(getStyle(id2, "height"));

    if (left1 < left2 + 4) {//from left
        return false;
    }
    else if (right1 > right2 - 4) {//from right
        return false;
    }
    if (top1 < top2 + 4) {//from top
        return false;
    }
    if (bottom1 > bottom2 - 4) {//from bottom
        return false;
    }
    else {
        return true;
    }
}

... и все заработало

...