JS ошибка в игре змейка

Question

JS ошибка в игре змейка

Илья Мамонтов Ученик (98), на голосовании 3 месяца назад

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

var canvas = document.getElementById('game');
var context = canvas.getContext('2d');

var grid = 16;
var count = 0;
var p;
p = document.getElementById('point');
var snake = {
x: 160,
y: 160,
dx: grid,
dy: 0,
cells: [],
maxCells: 4
};

var apple = {
x: 320,
y: 320
};

function kill(){
window.alert("вы обосрались");
snake.x = 160;
snake.y = 160;
snake.cells = [];
snake.maxCells = 4;
snake.dx = grid;
snake.dy = 0;
apple.x = getRandomInt(0, 25) * grid;
apple.y = getRandomInt(0, 25) * grid;
p.innerHTML = snake.maxCells;
}

function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}

function loop() {
requestAnimationFrame(loop);

if (++count < 4) {
return;
}

count = -3;
context.clearRect(0,0,canvas.width,canvas.height);

snake.x += snake.dx;
snake.y += snake.dy;

if (snake.x < 0) {
kill();
}
else if (snake.x >= canvas.width) {
kill();
}
if (snake.y < 0) {
kill();
}
else if (snake.y >= canvas.height) {
kill();
}

snake.cells.unshift({x: snake.x, y: snake.y});

if (snake.cells.length > snake.maxCells) {
snake.cells.pop();
}

context.fillStyle = 'red';
context.fillRect(apple.x, apple.y, grid-1, grid-1);

context.fillStyle = 'green';
snake.cells.forEach(function(cell, index) {

context.fillRect(cell.x, cell.y, grid-1, grid-1);

if (cell.x === apple.x && cell.y === apple.y) {
snake.maxCells++;
p.innerHTML = snake.maxCells;
apple.x = getRandomInt(0, 100) * grid;
apple.y = getRandomInt(0, 50) * grid;
}

for (var i = index + 1; i < snake.cells.length; i++) {

if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) {
kill();
}
}
});
}

document.addEventListener('keydown', function(e) {
if (e.which === 37 && snake.dx === 0 && snake.dy !== 0) {
snake.dx = -grid;
snake.dy = 0;
}

else if (e.which === 38 && snake.dy === 0 && snake.dx !== 0) {
snake.dy = -grid;
snake.dx = 0;
}

else if (e.which === 39 && snake.dx === 0 && snake.dy !== 0) {
snake.dx = grid;
snake.dy = 0;
}

else if (e.which === 40 && snake.dy === 0 && snake.dx !== 0) {
snake.dy = grid;
snake.dx = 0;
}

});

requestAnimationFrame(loop);

Answer 1

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

Вот исправленный код:

 var canvas = document.getElementById('game'); 
var context = canvas.getContext('2d'); 
 
var grid = 16; 
var count = 0; 
var p; 
p = document.getElementById('point'); 
var snake = { 
  x: 160, 
  y: 160, 
  dx: grid, 
  dy: 0, 
  cells: [], 
  maxCells: 4 
}; 
 
var apple = { 
  x: 320, 
  y: 320 
}; 
 
function kill() { 
  window.alert("вы обосрались"); 
  snake.x = 160; 
  snake.y = 160; 
  snake.cells = []; 
  snake.maxCells = 4; 
  snake.dx = grid; 
  snake.dy = 0; 
  apple.x = getRandomInt(0, 25) * grid; 
  apple.y = getRandomInt(0, 25) * grid; 
  p.innerHTML = snake.maxCells; 
} 
 
function getRandomInt(min, max) { 
  return Math.floor(Math.random() * (max - min)) + min; 
} 
 
function loop() { 
  requestAnimationFrame(loop); 
 
  if (++count < 4) { 
    return; 
  } 
 
  count = 0; 
  context.clearRect(0, 0, canvas.width, canvas.height); 
 
  snake.x += snake.dx; 
  snake.y += snake.dy; 
 
  if (snake.x < 0 || snake.x >= canvas.width || snake.y < 0 || snake.y >= canvas.height) { 
    kill(); 
  } 
 
  snake.cells.unshift({ x: snake.x, y: snake.y }); 
 
  if (snake.cells.length > snake.maxCells) { 
    snake.cells.pop(); 
  } 
 
  context.fillStyle = 'red'; 
  context.fillRect(apple.x, apple.y, grid - 1, grid - 1); 
 
  context.fillStyle = 'green'; 
  snake.cells.forEach(function (cell, index) { 
    context.fillRect(cell.x, cell.y, grid - 1, grid - 1); 
 
    if (cell.x === apple.x && cell.y === apple.y) { 
      snake.maxCells++; 
      p.innerHTML = snake.maxCells; 
      apple.x = getRandomInt(0, 25) * grid; 
      apple.y = getRandomInt(0, 25) * grid; 
    } 
 
    for (var i = index + 1; i < snake.cells.length; i++) { 
      if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) { 
        kill(); 
      } 
    } 
  }); 
} 
 
document.addEventListener('keydown', function (e) { 
  if (e.which === 37 && snake.dx !== grid) { // Left arrow 
    snake.dx = -grid; 
    snake.dy = 0; 
  } else if (e.which === 38 && snake.dy !== grid) { // Up arrow 
    snake.dy = -grid; 
    snake.dx = 0; 
  } else if (e.which === 39 && snake.dx !== -grid) { // Right arrow 
    snake.dx = grid; 
    snake.dy = 0; 
  } else if (e.which === 40 && snake.dy !== -grid) { // Down arrow 
    snake.dy = grid; 
    snake.dx = 0; 
  } 
}); 
 
requestAnimationFrame(loop);

В этом коде добавлены дополнительные условия в обработчик событий клавиатуры, чтобы змейка не могла повернуть в противоположную сторону напрямую. Теперь змейка может повернуть только в допустимом направлении, что предотвращает её немедленную смерть.

Answer 2

Альбрет Ферштэйн Ученик (180) 4 месяца назад

код калл