Вход

Просмотр полной версии : Змейка на Canvas. Правильно вывести координаты из массива хвоста змейки


woodoo
21.10.2016, 14:34
Приветствую! Обучаюсь 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;

}

}

woodoo
21.10.2016, 21:49
woodoo, тушку то тоже увеличивай как поел и переменные именуй по-человечески.

Одновременно исправил пост с ответом. Теперь хвост увеличивается, но вот путь не повторяется, статично висит.

рони
21.10.2016, 21:51
woodoo,
шифровка из центра Змейка робот (http://javascript.ru/forum/misc/11350-dobavit-novye-koordinaty.html#post67971)