Показать сообщение отдельно
  #1 (permalink)  
Старый 21.10.2016, 14:34
Новичок на форуме
Отправить личное сообщение для woodoo Посмотреть профиль Найти все сообщения от woodoo
 
Регистрация: 21.10.2016
Сообщений: 2

Змейка на Canvas. Правильно вывести координаты из массива хвоста змейки
Приветствую! Обучаюсь 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:44.
Ответить с цитированием