0

Создаю первую игру на 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';
            }
      }
    });
1

1 ответ 1

1

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

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.