Приветствую! Обучаюсь JS и попутно пишу змейку, проблема в том, что хвост змейки висит статично и не повторяет путь. Как можно поправить массив дабы исправить такой баг?
Здесь можно потестить:
http://karadag-snake.comxa.com/snake.html
var quadX = 24,
quadY = 24,
quadW = 24,
field = document.getElementById('field'),
x = 0,
y = 0,
dx = 0, //snake way
dy = 0,
fX = 192, //fruit
fY = 192,
bool = false, //horizontal or vertical way
timer,
//timePassed,
//total = 0,
tail = [{x:240, y:240}];
window.onload=function start(e) {
e.keyCode == 38
bool = true;
dy = -1;
}
function init() {
field.width = quadX * 20;
field.height = quadY * 20;
context = field.getContext('2d');
context.globalAlpha = 1;
timer = setInterval(snakeMove, 200);
}
function clear () {
context.fillStyle = 'gray';
context.fillRect(0, 0, field.width, field.height);
}
function snakeEating () {
context.beginPath();
context.fillStyle = 'orange';
context.fillRect(fX, fY, quadW, quadW);
context.rect(fX, fY, quadW-23, quadW-23);
context.closePath();
}
function tailDraw() {
for (var i = 0; i < tail.length; i++) {
context.fillStyle = 'red';
context.fillRect(tail[i].x, tail[i].y, quadW, quadW);
if (bool == false)
tail[i].x = tail[i].x + dx * quadW;
else
tail[i].y = tail[i].y + dy * quadW;
if (tail[i].x == context.canvas.width)
tail[i].x = -quadX;
else if (tail[i].x == -quadX)
tail[i].x = quadX * 20;
if (tail[i].y == context.canvas.height)
tail[i].y = -quadY;
else if (y == -quadY)
tail[i].y = quadY * 20;
if (context.isPointInPath(tail[i].x, tail[i].y)) {
fX = 24*(Math.floor(Math.random() * 20));
fY = 24*(Math.floor(Math.random() * 20));
tail.unshift ({x: tail[i].x, y: tail[i].y});
}
console.log(tail[i].x, tail[i].y);
console.log(tail);
}
}
function snakeMove () {
clear();
//update();
snakeEating();
tailDraw();
}
window.onkeydown = processKey;
function processKey(e) {
if (e.keyCode == 38) {
bool = true;
dy = -1;
}
if (e.keyCode == 40) {
bool = true;
dy = 1;
}
if (e.keyCode == 37) {
bool = false;
dx = -1;
}
if (e.keyCode == 39) {
bool = false;
dx = 1;
}
}