Игра “Змейка” на Javascript | Ник Морган – Javascript для детей | Уроки Javascript

Недавно осваивать JavaScript начал и мой сын. И сейчас он с удовольствием читает книгу Ника Моргана Javascript для детей. Самые любопытные могут скачать и почитать эту книгу тут:

Читая с сыном книгу Ника Моргана Javascript для детей, не могла не начать сохранять себе в коллекцию игры c этой книги. Первой игрой была Игра Виселица (Hangman). Игра написана самыми простыми циклами и набором переменных, без функций, с помощью сигнальных диалогов.

Змейка – финальная игра книги. Это итог накопленных в книге знаний. В ней используется весь выученный материал: циклы, объекты, методы, конструкторы, события…

Играть в игру

А вот и полный код игры:

Цитата из книги, как комментарий к игре:

Этот код состоит из нескольких частей. В первой части создаются и настраиваются необходимые в коде игры переменные, включая «холст», контекст рисования, ширину и высоту «холста». Далее, идет код отдельных функций: drawBorder, drawScore, gameOver и circle.
После начинается код конструктора Block, за которым следуют его методы drawSquare, drawCircle и equal. Затем идет код конструктора Snake и все его методы. Далее, следует конструктор Apple и его методы draw и move.

Наконец, в итоге начинается код, который запускает игру и обеспечивает ее выполнение. Сначала мы создаем объект-змейку snake
и объект-яблоко apple. Затем с помощью setInterval мы запускаем анимацию игры. Обратите внимание, что при вызове setInterval мы
сохранили ID интервала в переменной intervalId, чтобы иметь возможность отменить его выполнение в функции gameOver.
Функция, переданная setInterval в качестве аргумента, вызывается на каждом шаге игры. Она отвечает за отображение на «холсте»
всей графики и за обновление состояния игры. Она очищает «холст» и затем рисует змейку, яблоко и рамку. Также она вызывает метод объекта – змейки move, передвигающий змейку на один шаг в текущем направлении. После вызова setInterval идет код для отслеживания событий клавиатуры и установки направления движения змейки.
Как и прежде, вам следует поместить весь этот код внутрь элемента script в HTML-документе. Чтобы запустить игру, просто загрузите файл
snake.html в браузер и управляйте змейкой с помощью клавиш-стрелок.
Если при нажатии на клавиши ничего не происходит, может понадобиться кликнуть мышкой внутри окна браузера, чтобы он мог отслеживать события клавиатуры.
Если игра не работает, возможно, в ваш JavaScript-код закралась ошибка. Сведения об ошибках отображаются в консоли — посмотрите, нет ли
там каких-нибудь сообщений. В случае, если выяснить, в чем проблема, так и не получилось, внимательно, строка за строкой сверьте ваш код с кодом, приведенным выше.
Ну, как вам игра? Сколько очков сможете набрать?


Подпишитесь на RSS канал - если Вы хотите первыми узнавать о новых статьях на сайте!!!

Статьи по теме:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *