В этой и следующей главах мы разработаем свою вер-
сию классической игры «Змейка». В «Змейке» игрок
управляет с клавиатуры змеей, направляя ее вверх,
вниз, влево или вправо. По мере движения змейки
по экрану на нем появляются яблоки, которые змея
поедает, становясь при этом длиннее. Однако если
змейка столкнется с препятствием или съест свой
хвост, игра закончится.
При создании этой игры нам понадобится множе-
ство техник и инструментов, изученных в предыдущих
главах, включая jQuery, рисование на «холсте», анима-
ции и интерактивность. В этой главе мы рассмотрим
общую структуру игры и напишем код для рисования
рамки, вывода игрового счета и окончания игры. В сле-
дующей мы напишем код для самой змейки и яблока,
а затем соберем части воедино и сможем поиграть!
Игровой процесс
На рис. 16.1 показано, как будет выглядеть законченная игра. В процессе
игры нужно следить за четырьмя объектами и выводить их на экран: это
рамка (серого цвета), счет игры (надпись черным), сама змейка (синего
цвета) и яблоко (светло-зеленое).
237
Рис. 16.1. Наша «Змейка»
Структура игры
Перед тем как начинать писать код, давайте рассмотрим общую струк-
туру игры. Этот псевдокод описывает, что наша программа должна делать:
Настроить «холст»
Установить счет игры в 0
Создать змейку
Создать яблоко
Каждые 100 миллисекунд {
Очистить «холст»
Напечатать текущий счет игры
Сдвинуть змейку в текущем направлении
Если змейка столкнулась со стеной или своим хвостом {
Закончить игру
} Иначе Если змейка съела яблоко {
Увеличить счет на 1
Переместить яблоко на новое место
Увеличить длину змейки
}
Для каждого сегмента тела змейки {
Нарисовать сегмент
}
Нарисовать яблоко
238 Часть III. Графика
Нарисовать рамку
}
Когда игрок нажмет клавишу {
Если это клавиша-стрелка {
Обновить направление движения змейки
}
}
Постепенно мы напишем код для каждого из этих шагов.
Но сначала давайте поговорим о некоторых основных частях
нашей программы и выясним, какие из инструментов JavaScript
нам понадобятся для их реализации.
Использование setInterval для анимации в игре
Как видно в псевдокоде, каждые 100 миллисекунд нам нужно вызы-
вать набор функций и методов для обновления и перерисовки всех
объектов на игровом поле. Так же как в главах 14 и 15, мы будем использо-
вать setInterval для периодического вызова всех этих функций. Вот как
будет выглядеть вызов setInterval в законченной программе:
var intervalId = setInterval(function () {
ctx.clearRect(0, 0, width, height);
drawScore();
Draw score —
snake.move();
нарисовать
snake.draw();
счет
apple.draw();
Snake —
drawBorder();
змейка
}, 100);
Draw border —
нарисовать
В функции, которую мы передаем первым аргументом setInterval,
границу
первая строка кода очищает «холст» вызовом clearRect, после чего
можно рисовать следующий кадр анимации. Далее следуют вызовы
нескольких функций и методов. Обратите внимание, что они приблизи-
тельно соответствуют командам псевдокода.
Также отметим, что ID интервала, который возвращает функция
setInterval, сохраняется в переменной intervalId. Это значение
понадобится нам, чтобы остановить анимацию, когда игра закончится
(см. «Конец игры» на с. 249).
Создание игровых объектов
В этой игре мы воспользуемся изученным в главе 12 объектно-ори-
ентированным стилем программирования для реализации двух основ-
ных игровых объектов: змейки и яблока. Мы создадим конструктор
16. Пишем игру «Змейка»: часть 1 239
Apple —
для каждого из этих объектов (назовем их Snake и Apple) и добавим
яблоко
методы (такие как move и draw) к прототипам этих конструкторов.
Кроме того, мы будем рассматривать игровое поле как сетку с ква-
Block — секция
дратными ячейками и напишем конструктор под названием Block для
создания объектов, представляющих ячейки в этой сетке. Эти объекты
мы будем использовать как позиции сегментов тела змейки, плюс еще
один объект-ячейка будет хранить текущую позицию яблока. Также
у объектов-ячеек будут методы, позволяющие отображать сегменты
змейки и яблока на «холсте».
Управление с клавиатуры
В псевдокоде есть фрагмент, посвященный обработке нажа-
тия клавиш. Для управления змейкой с помощью клавиш-
стрелок мы используем возможности jQuery по обработке
событий клавиатуры, как мы это уже делали в предыдущей
главе. Мы будем определять, какая клавиша нажата, прове-
ряя ее код, и в соответствии с этим менять направление дви-
жения змейки.
Начинаем писать игру
Мы вкратце рассмотрели устройство будущей программы, теперь пора
браться за код! В этой главе мы подготовим HTML-файл, «холст» и неко-
торые переменные, которые нам понадобятся. Затем займемся наибо-
лее простыми функциями, необходимыми в игре: функцией рисования
рамки вокруг игрового поля, функцией отображения текущего счета
и функцией окончания игры. В следующей главе мы создадим конструк-
торы и методы для змейки и яблока, обработчик нажатий на клави-
ши-стрелки, а потом соединим все вместе.
Создаем HTML-файл
Начнем с HTML-файла — введите следующий код в текстовом редакторе
и сохраните его под именем snake.html.
240 Часть III. Графика
В строке мы создали элемент canvas размером 400 × 400 пик-
селей. Здесь будут отображаться все объекты нашей игры. В строке
загружаем библиотеку jQuery, а в строке добавляем еще пару тегов