приведенным выше.
Ну, как вам игра? Сколько очков сможете набрать?
Что мы узнали
В этой главе мы создали законченную игру на основе элемента 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, подняв навыки
на новый уровень. Что именно делать — выбирать только вам, однако
кое-что я могу посоветовать.
Больше о JavaScript
В этой книге мы рассмотрели немало возможностей JavaScript, но вам
еще многое стоит узнать об этом языке. Вот некоторые книги и сайты,
которые помогут вам познакомиться с различными аспектами JavaScript:
• Книга: «JavaScript: сильные стороны », Дуглас Крокфорд (изда-
тельство «Питер»).
• Книга: Eloquent JavaScript, 2nd Edition , Marij n Haverbeke (No
Starch Press, 2014).
• Книга: «JavaScript. Подробное руководство », Дэвид Флэнаган
(издательство «Символ-Плюс», 2013).
• Ресурсы по JavaScript на Mozilla Developer Network:
https://developer.mozilla.org/ru/docs/Web/JavaScript (на русском).
• Курсы JavaScript от Codecademy: http://www.codecademy.com/
en/tracks/javascript/ (на английском).
276
Веб-программирование
Чтобы создавать сайты, вам помимо JavaScript понадобятся знания
HTML и CSS.
HTML
HTML — это язык разметки, предназначенный для создания веб-страниц.
Мы изучили основы HTML в пятой главе, однако это лишь капля в море.
Вот некоторые источники, из которых вы можете узнать об HTML больше:
• Введение в HTML от Mozilla Developer Network: https://developer.
mozilla.org/ru/docs/Web/Guide/HTML/Introduction (на русском).
• Курс HTML и CSS от Codecademy: http://www.codecademy.com/
tracks/web/ (на английском).
• Mozilla Webmaker: https://webmaker.org/.
CSS
CSS, или «каскадные таблицы стилей», — это язык для управления внеш-
ним видом веб-страниц. Узнать о CSS больше можно здесь:
• Введение в CSS от Mozilla Developer Network: https://developer.
mozilla.org/ru/docs/Web/Guide/CSS/Getting_started (на русском).
• Курс HTML и CSS от Codecademy: http://www.codecademy.com/
tracks/web/ (на английском).
Серверное программирование на Node.js
Веб-страницы располагаются на веб-серверах. Сервер хранит весь HTML,
CSS и JavaScript-код страницы, предоставляя к ней доступ из интернета.
Также вы можете писать программы для серверов (так называемый сервер-
ный код), позволяющие серверу генерировать различный HTML-код при
каждой загрузке страницы. Например, когда вы заходите в Twitter, серверная
программа ищет самые свежие посты для вашей ленты, генерирует HTML-
файл с этими постами и передает его вашему браузеру.
Node.js позволяет писать серверные программы на JavaScript. Озна-
комьтесь с информацией о Node.js по этим ссылкам:
• Больше о Node можно узнать здесь: http://nodejs.org/ (на анг-
лийском).
• Руководство Node Beginner Book: http://www.nodebeginner.ru
(на русском).
277
Графическое программирование
Если вы хотите создавать интерактивную графику на JavaScript, у вас
есть два основных пути: это элемент canvas и SVG.
canvas
Мы изучили основы работы с элементом canvas в книге, однако его воз-
можности гораздо шире. Вот некоторые обучающие статьи и игры, кото-
рые помогут вам ближе познакомиться с «холстом»:
• Обучающая статья по canvas на Mozilla Developer Network:
https://developer.mozilla.org/ru/docs/Web/API/Canvas_API/
Tutorial (на русском).
• Игра Code Monster от Crunchzilla: http://www.crunchzilla.com/
code-monster/ (на английском).
SVG с помощью Raphael
SVG — это графический формат, позволяющий рисовать разные фигуры
и анимировать их без необходимости перерисовывать каждый шаг ани-
мации с нуля.
Программирование SVG — дело не из простых, но вам будет куда
легче, если вы воспользуетесь JavaScript-библиотекой Raphael:
• Введение в библиотеку Raphael: http://code.tutsplus.com/
tutorials/an-introduction-to-the-raphael-jslibrary--net-7186/
(на английском).
3D-программирование
Помните, как в главе 13 мы запрашивали у «холста» canvas двухмер-
ный контекст рисования вызовом canvas.getContext("2d")? Кроме
этого, на «холсте» можно создавать и трехмерные изображения. Это
еще одна из тех областей, где проще всего воспользоваться библиоте-
кой, и я рекомендую вам библиотеку three.js. Вот некоторые ресурсы
для ее изучения:
• Руководство по three.js: http://threejs.org/docs/index.html#Manual
(на английском).
• three.js для начинающих: http://blog.teamtreehouse.com/the-
beginners-guide-to-three-js/ (на английском).
278 Послесловие: куда двигаться дальше
Программирование роботов
При помощи JavaScript можно даже управлять роботами! Например,
Parrot AR.Drone. Это маленький вертолет, которым можно управлять
с помощью Node.js. Также вы можете обратить внимание на Johnny-Five,
JavaScript-библиотеку для управления устройствами наподобие Arduino
(это популярный микроконтроллер, который используется во многих
любительских устройствах и роботах). Вот некоторые ресурсы о том, как
управлять роботами и другими устройствами из JavaScript-кода:
• node-ar-drone: https://github.com/felixge/node-ar-drone/ (на анг-
лийском).
• NodeBots: http://nodebots.io/ (на английском).
• Johnny-Five: https://github.com/rwaldron/johnny-fi ve/ (на анг-
лийском).
Программирование звука
JavaScript также позволяет программировать звук в веб-браузере с помо-
щью интерфейса Web Audio API. Используя этот программный интер-
фейс, вы можете создавать звуковые эффекты и даже писать музыку! Вот
некоторые ресурсы по Web Audio API:
• Web Audio API на Mozilla Developer Network:
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/