Я хочу сделать так, чтоб если змейка съедала яблоко, у нее появлялся новый блок в конце. Для этого, если координаты головы змейки и яблока совпадают, я изменяю переменную addNewBlock на координаты последнего блока, а затем, после того как змейка подвинулась на 1 шаг (последний элемент переместился вперед), добавляю новый блок в конец змейки. Но почему то он добавляется неправильно и змейка дробится на части.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake</title>
</head>
<body>
<canvas id="game" width="600px" height="600px" style="border: 5px solid;"></canvas>
<script>
// Values
var game = document.getElementById("game")
var ctx = game.getContext('2d')
var snakeSize = 30
var direction = 2
var snake = [[10, 10], [10, 11], [10, 12]]
var apple = newApple()
var addNewBlock = false
// creating new apple
function newApple() {
return [Math.floor(Math.random() * 21) * 30, Math.floor(Math.random() * 21) * 30]
}
// changing direction of moving
function changeDirection(event) {
if (event.code == 'KeyA' && direction != 2) {direction = 0}
else if (event.code == 'KeyW' && direction != 3) {direction = 1}
else if (event.code == 'KeyD' && direction != 0) {direction = 2}
else if (event.code == 'KeyS' && direction != 1) {direction = 3}
}
document.addEventListener('keydown', changeDirection);
// game cycle
setInterval(function() {
// cleaning
ctx.clearRect(0, 0, game.width, game.height)
// checking if snake eat apple
var prevSnake = snake.slice();
if (apple[0] / 30 == snake[0][0] && apple[1] / 30 == snake[0][1]) {
addNewBlock = snake[snake.length - 1]
console.log(addNewBlock)
apple = newApple()
}
// moving
if (direction == 0) {
snake[snake.length - 1][0] = snake[0][0] - 1; snake[snake.length - 1][1] = snake[0][1]
}
else if (direction == 1) {
snake[snake.length - 1][1] = snake[0][1] - 1; snake[snake.length - 1][0] = snake[0][0]
}
else if (direction == 2) {
snake[snake.length - 1][0] = snake[0][0] + 1; snake[snake.length - 1][1] = snake[0][1]
}
else if (direction == 3) {
snake[snake.length - 1][1] = snake[0][1] + 1; snake[snake.length - 1][0] = snake[0][0]
}
var newHead = snake[snake.length - 1]
snake.splice(snake.length - 1, 1)
snake.unshift(newHead)
if (addNewBlock) {
console.log(addNewBlock)
snake.push(addNewBlock)
addNewBlock = false
}
// rendering
for (let block in snake) {
ctx.fillStyle = "black"
ctx.fillRect(snake[block][0] * 30, snake[block][1] * 30, snakeSize, snakeSize)
}
ctx.fillStyle = "black"
ctx.fillRect(apple[0], apple[1], snakeSize, snakeSize)
}, (750));
</script>
</body>
</html>
