Змейка. как начать игру заново

116
17 февраля 2021, 08:10

Создаю первую игру на JS. Не могу начать игру заново - при нажатии на confirm ok появляется все вновь, но змейка не двигается, как вначале. Не могу запустить вновь setInterval. В чем ошибка?

Еще ошибка в том, что змейка врезается в стену и на одну ячейку дальше продвигается? Получается, что теряется одна доля змейки после рамки. Как сделать так чтобы она не уходила дальше чем нужно?

Ниже мой код:

// создала поле
let field = document.createElement("div");
document.body.appendChild(field);
field.setAttribute("class","field");
// создала ячейки
for(let i=0; i < 100; i++) {
    let exceldiv = document.createElement("div");
    field.appendChild(exceldiv);
    exceldiv.setAttribute("class","excel");
}
// создаю координаты x,y
let excel = document.getElementsByClassName("excel");
let x = 1,//первая ячейка имеет координаты х = 1,y =10
    y = 10;
for (let i = 0; i< excel.length; i++){
    if( x > 10 ) {
        x = 1;//x сбрасывается до 1 с каждой новой строчкой, когда достигает 11 и y уменьшается
        y--;
    }
    excel[i].setAttribute("posX", x);// добавляю
    excel[i].setAttribute("posY", y);
    x++;
}

//создаю змею
//korper
function snakeKorper() {
    let posX = Math.round(Math.random() * (10 - 3) + 3);
    let posY = Math.round(Math.random() * (10 - 1) + 1);
    return [posX, posY];
}
//змея состоит из трех элементов
let coordinates = snakeKorper();
let snakeBody = [
document.querySelector("[posX = '" + coordinates[0] + "'][posY = '" + coordinates[1] + "']"),
document.querySelector("[posX = '" + (coordinates[0] - 1) + "'][posY = '" + coordinates[1] + "']"),
document.querySelector("[posX = '" + (coordinates[0] - 2) + "'][posY = '" + coordinates[1] + "']")
];
//kopfsnake
for (let i = 0; i < snakeBody.length; i++) {
    snakeBody[i].classList.add("snakeBody");
}
snakeBody[0].classList.add("head");

// misch
let mouse;
function createMouse() {
    function mouseKorper() {
    let posX = Math.round(Math.random() * (10 - 3) + 3);
    let posY = Math.round(Math.random() * (10 - 1) + 1);
    return [posX, posY];
}
    let mouseCoordinates = mouseKorper();
    mouse = document.querySelector("[posX = '" + mouseCoordinates[0] + "'][posY = '" + mouseCoordinates[1] + "']");
    while(mouse.classList.contains("snakeBody")) {
        let mouseCoordinates = mouseKorper();
        mouse = document.querySelector("[posX = '" + mouseCoordinates[0] + "'][posY = '" + mouseCoordinates[1] + "']");
    }
    mouse.classList.add("mouse");
}
createMouse();
let direction = 'right';// направления движения
let steps = false;// чтобы змея при быстром переключении клавиш не врезалась в себя не успев сделать ход
let divInput = document.createElement("div");
document.body.appendChild(divInput);
divInput.setAttribute("class","input");
let score = 0;
divInput.innerHTML = "Ihre punkte: " + score;
    var timer;
    function interval() {
      timer = setInterval(function () {
            moveSnake();
    }, 300);
    }
    function stopInterval() {
        clearInterval(timer);
        interval();
    }
function mouseEat() {
    if(snakeBody[0].getAttribute('posX') == mouse.getAttribute('posX') && snakeBody[0].getAttribute('posY') == mouse.getAttribute('posY')) {
        mouse.classList.remove('mouse');
        let a = snakeBody[snakeBody.length - 1].getAttribute('posX');
        let b = snakeBody[snakeBody.length - 1].getAttribute('posY');
        snakeBody.push(document.querySelector("[posX = '" + a +"'][posY = '" + b +"']"));
        createMouse();
        score++;
        divInput.innerHTML = "Ihre punkte: " + score;
    }
    }
function moveSnake() {
    let snakeCoordinates = [snakeBody[0].getAttribute('posX'), snakeBody[0].getAttribute('posY')];//получить атрибуты, координаты головы
    snakeBody[0].classList.remove('head');
    snakeBody[snakeBody.length-1].classList.remove('snakeBody');
    snakeBody.pop(); //удаляю последний элемент
    // dvigaemsa vo vsex napravleniyax и врезаемся в стены
    if (direction == 'right') {
        if ( snakeCoordinates[0] < 10) {
        snakeBody.unshift(document.querySelector("[posX = '" + ( + snakeCoordinates[0] + 1) + "'][posY = '" +  snakeCoordinates[1] + "']"));
    }   
    }
    else if (direction == 'left') {
        if ( snakeCoordinates[0] > 1) {
        snakeBody.unshift(document.querySelector("[posX = '" + ( + snakeCoordinates[0] - 1) + "'][posY = '" +  snakeCoordinates[1] + "']"));
    }  
    }
    else if (direction == 'up') {
        if ( snakeCoordinates[1] < 10) {
        snakeBody.unshift(document.querySelector("[posX = '" + snakeCoordinates[0] + "'][posY = '" + ( + snakeCoordinates[1] + 1 ) + "']"));
    }   
    }
    else if (direction == 'down') {
        if ( snakeCoordinates[1] > 1) {
        snakeBody.unshift(document.querySelector("[posX = '" + snakeCoordinates[0] + "'][posY = '" + ( + snakeCoordinates[1] - 1 )+ "']"));
     } 
    }
    // поедание мыши
    mouseEat();
    //змея врезается в себя
    snakeStack();
    steps = true;//после каждого хода возвращаем тру
 }
function snakeStack() {
     if (snakeBody[0].classList.contains("snakeBody")) {
          setTimeout( function() {  
            let newgame = confirm("Das Spiel ist beendet. Ihre punkte: " + score + "\nWollen Sie neues anfangen?");
            if (newgame == true) { 
            document.getElementsByTagName("div")[0].remove();
            document.getElementsByTagName("div")[0].remove();
                                // создала поле
                    let field = document.createElement("div");
                    document.body.appendChild(field);
                    field.setAttribute("class","field");
                    // создала ячейки
                    for(let i=0; i < 100; i++) {
                        let exceldiv = document.createElement("div");
                        field.appendChild(exceldiv);
                        exceldiv.setAttribute("class","excel");
                    }
                    // создаю координаты x,y
                    let excel = document.getElementsByClassName("excel");
                    let x = 1,//первая ячейка имеет координаты х = 1,y =10
                        y = 10;
                    for (let i = 0; i< excel.length; i++){
                        if( x > 10 ) {
                            x = 1;//x сбрасывается до 1 с каждой новой строчкой, когда достигает 11 и y уменьщается
                            y--;
                        }
                        excel[i].setAttribute("posX", x);// добавляю
                        excel[i].setAttribute("posY", y);
                        x++;
                    }
                    interval(); 
                    //создаю змею
                    //korper
                    snakeKorper();
                    //змея состоит из трех элементов
                    let coordinates = snakeKorper();
                    let snakeBody = [
                    document.querySelector("[posX = '" + coordinates[0] + "'][posY = '" + coordinates[1] + "']"),
                    document.querySelector("[posX = '" + (coordinates[0] - 1) + "'][posY = '" + coordinates[1] + "']"),
                    document.querySelector("[posX = '" + (coordinates[0] - 2) + "'][posY = '" + coordinates[1] + "']")
                    ];
                    //kopfsnake
                    snakeBody[0].classList.add("head");
                    for (let i = 0; i < snakeBody.length; i++) {
                        snakeBody[i].classList.add("snakeBody");
                    }
                    // misch
                    let mouse;
                    createMouse();
                    mouseEat();
                    moveSnake();
                    var direction = 'right';// направления движения
                    var steps = false;// чтобы змея при быстром переключении клавиш не врезалась в себя не успев сделать ход
                    var divInput = document.createElement("div");
                    document.body.appendChild(divInput);
                    divInput.setAttribute("class","input");
                    let score = 0;
                    divInput.innerHTML = "Ihre punkte: " + score;
            } 
            else {
                clearInterval(timer);//ostanovit igru
            }
          }, 200);
           snakeBody[0].style.backgroundColor = "#B22222";
      } 
            snakeBody[0].classList.add("head"); 
            for (let i = 0; i < snakeBody.length; i++) {
            snakeBody[i].classList.add("snakeBody");
      }
    }
    interval(); 
    // движение коды стрелок влево-37, вправо-39, вверх-38, вниз-40
    window.addEventListener('keydown', function(e) {
        if(steps == true) {
            if( e.keyCode == 37 && direction != 'right') {
                direction = 'left';
            }
            else if( e.keyCode == 38 && direction != 'down') {
                direction = 'up';
            }
            else if( e.keyCode == 39 && direction != 'left') {
                direction = 'right';
            }
            else if( e.keyCode == 40 && direction != 'up') {
                direction = 'down';
            }
      }
    });
Answer 1

Нашла как запустить вновь. просто при нажатии перезагрузить страницу)) window.location.reload();

осталось только исправить с врезаниями в рамки.

READ ALSO
Как сделать так, чтобы в alert выводились все name? В моём коде - если нажать на name=&ldquo;prim&rdquo; и name=&ldquo;prim2&rdquo; то выводит только name=&ldquo;prim2&rdquo;(value)

Как сделать так, чтобы в alert выводились все name? В моём коде - если нажать на name=“prim” и name=“prim2” то выводит только name=“prim2”(value)

Если хотите иметь возможность выбрать несколько вариантов, то radio - не самый подходящий вариантСемантически правильнее будет использовать...

129
Неповторяющийся случайный фон

Неповторяющийся случайный фон

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

102
Не выводит стили на печать

Не выводит стили на печать

Использую bootstrapНа некоторых строках таблицы есть определённый стиль

111
Поиск элемента по дереву в iframe

Поиск элемента по дереву в iframe

Нужно в iframe найти найти блок по классу и удалить егоКак это реализовать на чистом js?

82