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