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

Я делаю свою собственную игру в 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>

наконец-то яваскрипт. вот где начинается проблема, и некоторым может быть довольно сложно следовать. Также я использую свои собственные функции, которые я сделал, называемые 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");
}

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

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

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

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

и вы могли бы подумать, что просто добавьте еще 50-80 пикселей к обнаружению, но НЕТ, тогда это становится еще более странным, потому что, если я добавлю к нему еще пикселей, обнаружение столкновений просто исчезнет, ​​и pac-man сможет взлететь прямо с места. экран, как будто там вообще нет div

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

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


javascript runtime-error html css pacman
person Nick    schedule 26.05.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

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

... и это сработало

person Nick    schedule 27.05.2018