Создаю первую игру на 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';
}
}
});
Нашла как запустить вновь. просто при нажатии перезагрузить страницу)) window.location.reload();
осталось только исправить с врезаниями в рамки.
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Если хотите иметь возможность выбрать несколько вариантов, то radio - не самый подходящий вариантСемантически правильнее будет использовать...
Пытаюсь реализовать кнопку, по нажатию на которую должен выставляться случайный фон, да так, чтобы картинки при повторном нажатии не повторялисьСделал...
Использую bootstrapНа некоторых строках таблицы есть определённый стиль
Нужно в iframe найти найти блок по классу и удалить егоКак это реализовать на чистом js?