Проект: jQuery и DOM

Здесь вам предоставляется возможность поглубже познакомиться с событиями, создав игру "Змейка". Если никогда в нее не играли, ознакомьтесь с ней по статье в Википедии. В общем, в этой игре вы управляете змеей, которая вырастает с каждым съеденным кусочком пищи. Вы проигрываете, если змея натыкается на себя или выползает за пределы поля.

Если вы задумались о том, что понадобится для создания этой игры, то все у вас под рукой - вам необходимо создать поле, получать от пользователя информацию о направлении движения змеи, а также заставить змею расти, учитывая количество съеденной ею пищи. Это тот момент, когда начинается самое интересное!

Ваши задания

Настройка

1. Создайте репозиторий на Github для проекта. Если нужна помощь, воспользуйтесь пройденным материалом.
2. Создайте чистый документ HTML.
3. Подумайте, какого рода объекты и функции вам понадобятся для "функционирования" змеи.
4. Создайте объект JS, представляющий из себя поле размером 40x40, все ячейки которого в начале содержат пробел " ".
   
5. Создайте функцию render(), циклически обрабатывающую поле, и превращающее его на экране в поле, состоящее из div'ов. Наличие границы вокруг каждого из них делает поле гораздо более удобным для восприятия (только помните, что наличие границы увеличивает размер поля). Используя JS и небольшое количество CSS, вы не должны столкнуться с затруднениями на этом этапе. Помните поле, которое мы создавали в проекте jQuery...?
6. Сделайте одну из центральных клеток в виде "O" для отображения змеи. Настройте запуск функции render() в момент загрузки страницы.
7. Создайте объект Javascript для змеи. Задайте ей позицию [20,20] и начaльное направление движения направо. Также включите переменную, отражающую движущуюся змею, которая будет массивом координат (массивом массивов, к примеру [[20,20]] вначале).

Оживляем змею

1. На основании нажатия курсорных клавиш (смотрите документацию по keypress() ), меняйте направление движения змеи, если нажата другая стрелка. Здесь вам, возможно, пригодится использование console.log(), чтобы отслеживать, что вы все делаете верно.
2. Теперь заставьте змею двигаться, запустив игру в цикле и используя setTimeout() для перехода к следующему "ходу".
3. В каждом цикле вызывайте функцию move(), которая двигает змею на одну клетку в сторону текущего направления движения.
4. Создайте условие прекращения игры при выходе змеи за пределы поля.
5. Создайте объект Javascript, представляющий "еду". Разбросайте ее случайным образом на доске.
6. Научите змею есть "еду", что будет увеличивать ее размер на 1 единицу с каждым циклом игры.
7. Измените функцию move() (при необходимости), чтобы она учитывала змею, состоящую из нескольких клеток. Именно поэтому мы должны рассматривать змею как массив координат.
8. Сделайте окончание игры, если змея пересечет сама себя.
9. Играйте!

На десерт

1. Вместо скучного "O", пусть змея состоит из картинок, взятых из Сети.
2. Ведите счет -- каждый кусочек еды дает тем больше очков, чем длиннее змея.
3. Ускорение -- с каждым съеденным кусочком немного ускоряйте игру.
4. Играйте!

Решения студентов

• Решение 1
• Решение 2 | Посмотреть в браузере
• Решение 3 | Посмотреть в браузере
• Решение 4
• Решение 5 | Посмотреть в браузере

Дополнительные ресурсы

Этот раздел содержит полезные ссылки на дополнительные материалы. Это не обязательно, так что расценивайте их как нечто полезное, если вы хотите поглубже погрузиться в тему

• Сыграйте в Сапера по этой ссылке
• Вы не фанат Змейки? Попробуйте создать вместо нее Сапера (из множества вариантов можно выбрать поле 8x8 с 10 минами). Это игра не совсем в реальном времени, но она потребует помыслить логически и понять принцип ее работы. *