вания событий клавиатуры и установки направления движения змейки.
Как и прежде, вам следует поместить весь этот код внутрь элемента
script в HTML-документе. Чтобы запустить игру, просто загрузите файл
snake.html в браузер и управляйте змейкой с помощью клавиш-стрелок.
Если при нажатии на клавиши ничего не происходит, может понадо-
биться кликнуть мышкой внутри окна браузера, чтобы он мог отслежи-
вать события клавиатуры.
Если игра не работает, возможно, в ваш
JavaScript-код закралась ошибка. Сведения об ошиб-
ках отображаются в консоли — посмотрите, нет ли
там каких-нибудь сообщений. В случае, если выяс-
нить, в чем проблема, так и не получилось, внима-
тельно, строка за строкой сверьте ваш код с кодом,
приведенным выше.
Ну, как вам игра? Сколько очков сможете набрать?
Что мы узнали
В этой главе мы создали законченную игру на основе элемента canvas.
В нашей игре используются различные типы данных, концепции и тех-
ники, изученные в процессе чтения книги: это числа, строки, булевы
значения, массивы, объекты, управляющие конструкции, функции,
объектно-ориентированное программирование, обработчики событий,
setInterval и рисование на «холсте».
Теперь, когда вы разобрались с игрой «Змейка», вы можете запрограм-
мировать на JavaScript множество других несложных двухмерных видео-
игр. Например, вы можете создать свои версии классических Breakout,
Asteroids, Space Invaders или Tetris. Или придумать собственную игру!
Разумеется, JavaScript годится не только для игр. Например, зная,
как выполнять на языке JavaScript математические расчеты, вы можете
использовать его для решения задач по математике. А может, вы хотите
создать сайт, чтобы показать всему миру, на что вы способны? Вариантов
бесчисленное множество!
17. Пишем игру «Змейка»: часть 2 273
УПРА ЖНЕНИЯ
Вот некоторые идеи по усовершенствованию и доработке нашей
игры.
#1. Увеличьте игровое поле
Измените размер игрового поля до квадрата 500 × 500 пикселей.
Что в коде нужно поменять, чтобы игра работала с таким разме-
ром поля?
#2. Цветная змейка
Наша змейка выглядит скучновато: все сегменты ее тела одина-
кового синего цвета. Можно сделать ее больше похожей на насто-
ящую змею, если чередовать цвета сегментов, сделав тело полоса-
тым. Например, пусть голова будет зеленой, а дальше чередуйте
через один сегмент синий и желтый цвета либо выберите другой
окрас на свой вкус.
#3. Постепенно увеличивайте скорость игры
Измените программу так, чтобы с каждым съеденным ябло-
ком скорость игры возрастала. Для этого вместо setInterval
используйте setTimeout, ведь setInterval вызывает задан-
ную функцию всегда через один и тот же промежуток времени.
Однако вы можете снова и снова вызывать функцию через
setTimeout, меняя значение задержки при каждом вызове:
var animationTime = 100;
Animation
var gameLoop = function () {
time — время
// Здесь должен быть код для рисования объектов и обновления
анимации
// состояния игры
Game loop —
setTimeout(gameLoop, animationTime);
цикл игры
};
gameLoop();
Вместо использования setInterval для периодического
вызова функции в теле функции gameLoop выполняется вызов
setTimeout(gameLoop, animationTime), что означает «вызови
gameLoop снова через animationTime миллисекунд». Так же
как и setInterval, это способ снова и снова вызывает функцию
с небольшой задержкой между вызовами. Разница в том, что вы
можете легко изменить время задержки из любой части своего
кода, меняя значение переменной animationTime, и программа
будет использовать это значение при последующих вызовах
setTimeout.
274 Часть III. Графика
(Однако имейте в виду — в таком случае вам нужно найти
другой способ остановки игрового цикла, когда игра закончится.
Как бы вы это сделали?)
#4. Исправление метода apple.move
Каждый раз после съедания яблоко перемещается в новую
случайную позицию, однако ничто не мешает ему очутиться
в ячейке, которая уже занята частью тела змейки. Чтобы пре-
дотвратить эту возможность, измените метод move так, чтобы
он учитывал положения сегментов змеиного тела. (Подсказка:
используйте цикл while, чтобы вызывать метод move до тех пор,
пока он не выберет позицию, не занятую змейкой).
П О С Л Е С Л О В И Е :
К УД А Д В И ГАТ Ь С Я Д А Л Ь Ш Е
Теперь, изучив основы языка JavaScript, вы готовы к любым приключе-
ниям в необъятном мире программирования. Вы можете изучить еще
один язык или углубить свои познания в JavaScript, подняв навыки
на новый уровень. Что именно делать — выбирать только вам, однако