Комментарий: Сложность игры заключается в том, как смоделировать движение жадной змеи. Это, очевидно, просто, если это просто квадрат. Однако как контролировать длину змеи после того, как она становится дольше? Вот краткое введение в конкретную реализацию. Заинтересованные друзья могут ссылаться на это. Я надеюсь, что это будет полезно для вас.
Игровые инструкции
Используйте клавиши стрел, чтобы контролировать движение змеи вверх и вниз, влево и вправо. Чесная змея вырастет на одну длину после еды.
Реализация игры
Сложность игры заключается в том, как смоделировать движение жадной змеи. Это, очевидно, просто, если это просто квадрат. Но как контролировать длину змеи после того, как она становится дольше
Как насчет движения каждого квадрата?
Если вы наблюдаете за движением змеи, вы можете обнаружить, что от головы до хвоста змеи позиция каждого квадрата в следующий момент - его предыдущий квадрат в текущий момент.
расположение. Поэтому все, что нам нужно сделать, это контролировать движение головы прожорливой змеи. Положения других частей могут быть аналогичены по очереди.
Еще одна примечательная проблема
После того, как змея ест пищу, где должны быть размещены недавно добавленные блоки?
Ответ заключается в том, что в следующий момент недавно добавленный блок должен появляться в положении хвоста текущего момента.
Следовательно, после употребления пищи следует добавить квадрат, прежде чем обновлять каждую позицию змеи, и ее положение установлено в положении хвоста текущего момента.
Затем, в настоящее время, позиции всех блоков, кроме новых блоков, обновляются.
index.html
Snake.js
вар холст;
var ctx;
var таймер;
//Меры
var x_cnt = 15;
var y_cnt = 15;
var Unit = 48;
var box_x = 0;
var box_y = 0;
var box_width = 15 * Unit;
var box_height = 15 * int;
var bound_left = box_x;
var bound_right = box_x + box_width;
var bound_up = box_y;
var bound_down = box_y + box_height;
// изображения
var image_sprite;
// объекты
var snake;
var Food;
var food_x;
var food_y;
// функции
Функциональная роль (SX, SY, SW, SH, направление, статус, скорость, изображение, флаг)
{
this.x = sx;
this.y = sy;
this.w = SW;
this.h = sh;
this.direction = направление;
this.status = status;
this.speed = speed;
this.image = image;
this.flag = flag;
}
передача функции (KeyCode)
{
переключатель (KeyCode)
{
Случай 37:
возврат 1;
Случай 38:
возврат 3;
Случай 39:
возврат 2;
Случай 40:
возврат 0;
}
}
Функция addFood ()
{
//food_x=box_x+math.floor(math.random()*(box_width-Unit));
//food_y=box_y+math.floor(math.random()*(box_height-Unit));
FOOD_X = UNIT * MATH.FLOOR (MATH.RANDOM () * X_CNT);
food_y = Unit * math.floor (math.random () * y_cnt);
Food = новая роль (Food_x, Food_y, Unit, Unit, 0, 0, Image_sprite, true);
}
Функциональная игра (событие)
{
var KeyCode;
if (событие == null)
{
KeyCode = window.event.keyCode;
window.event.preventdefault ();
}
еще
{
KeyCode = event.KeyCode;
Event.preventDefault ();
}
var cur_direction = Transfer (KeyCode);
Snake [0] .direction = cur_direction;
}
Функция Update ()
{
// Добавить новую часть в змею, прежде чем переместить змею
if (snake [0] .x == food.x && snake [0] .y == food.y)
{
var length = snake.length;
var tail_x = snake [длина - 1] .x;
var tail_y = snake [длина - 1] .y;
var tail = новая роль (tail_x, tail_y, единица, единица, змея [длина - 1] .direction, 0, 0, image_sprite, true);
Snake.push (хвост);
addFood ();
}
// изменять атрибуты
// Перемещать голову
Переключатель (змея [0]. Дирекция)
{
Случай 0: // вниз
змея [0] .y += единица;
if (snake [0] .y> bound_down - unit)
Snake [0] .y = bound_down - Unit;
перерыв;
Случай 1: // слева
змея [0] .x -= единица;
if (snake [0] .x <bound_left)
змея [0] .x = bound_left;
перерыв;
Случай 2: // Право
змея [0] .x += единица;
if (snake [0] .x> bound_right - unit)
змея [0] .x = bound_right - unit;
перерыв;
Случай 3: // up
змея [0] .y -= единица;
if (snake [0] .y <bound_up)
змея [0] .y = bound_up;
перерыв;
}
// перемещать другую часть змеи
для (var i = snake.length-1; i> = 0; i--)
{
if (i> 0)
//snake®.direction=snake®-1^.direction;
{
Snake [i] .x = Snake [i - 1] .x;
Snake [i] .y = Snake [i - 1] .y;
}
}
}
Функция traitScene ()
{
ctx.clearrect (box_x, box_y, box_width, box_height);
ctx.strokestyle = "rgb (0,0,0";
ctx.strokerect (box_x, box_y, box_width, box_height);
// обнаружение столкновений
// рисовать изображения
для (var i = 0; i <snake.length; i ++)
{
ctx.drawimage (image_sprite, snake [i] .x, snake [i] .y);
}
ctx.drawimage (image_sprite, food.x, food.y);
}
функция init ()
{
canvas = document.getElementById ("сцена");
ctx = canvas.getContext ('2d');
// изображения
image_sprite = new Image ();
image_sprite.src = "Images/sprite.png";
image_sprite.onload = function ()
{}
// oucts
Snake = new Array ();
var Head = новая роль (0 * Единица, 0 * Единица, единица, единица, 5, 0, 1, image_sprite, true);
Snake.push (голова);
window.addeventlistener ('keydown', play, false);
addFood ();
SetInterval (обновление, 300); //примечание
SetInterval (DrawScene, 30);
}
Связанное чтение: HTML5 Snake Game идеально реализована с использованием 63 строк кода