Лабиринт на JavaScript и canvas | В паутине

Лабиринт на JavaScript и canvas

Создание игры-лабиринта на языке JavaScript с помощью HTML5 Canvas.

Разметка

Создается холст и картинка-маркер.

Код

После загрузки документа, находим холст и создаем контекст рисования.

Создаем переменные x и y для хранения положения маркера, timer для перерисовки холста.
Запускаем функцию drawMaze, рисующую лабиринт (с указанием изображения лабиринта и начальных координат маркера).
Устанавливаем прослушку на событие нажатия клавиши с функцией-обработчиком processKey.

Код этих функций:

После того, как лабиринт нарисован, через 10 миллисекунд запускается функция drawFrame, которая должна перерисовать лабиринт.

Эта функция проверяет, двигается ли маркер, и при необходимости перерисовывает весь лабиринт. При этом она отмечает пройденный путь желтым цветом. Получая новые координаты маркера, функция проверяет, нет ли столкновения со стенами, вызывая функцию checkForCollision. Для обеспечения цикла перерисовки, функция drawFrame сама себя вызывает с интервалом в 10 миллисекунд.

Проверка столкновения со стенами лабиринта основана на анализе цвета пикселей.

Полный код файла script.js

Открыть в новой вкладке



Источник professorweb.ru


Вам будет интересно:

Пятнашки на JavaScript и Canvas
Простой платформер на Flash

Комментарии (0)

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