Пишем игру «Змейка» на JavaScript: полный туториал с пошаговым разбором на HTML5 Canvas
Coding With Adam
0:00 / 0:00
Пишем игру «Змейка» на JavaScript: полный туториал с пошаговым разбором на HTML5 Canvas
74 269 просмотров · 5 лет назад
Coding With Adam
14,2 тыс. подписчиков
74 269 просмотров · 5 лет назад
В этом уроке мы создадим игру «Змейка» с использованием JavaScript и HTML5 Canvas. Мы рассмотрим игровой цикл, обнаружение столкновений, ввод с клавиатуры и добавление звука. Если вам понравился этот урок, пожалуйста, подпишитесь, поставьте лайк и поделитесь им!
Если вы ещё не играли в «Змейку», я расскажу вам об этой версии игры. Вы, игрок, перемещаетесь по линии, то есть по змейке, поедая различные предметы, и ваше тело змейки удлиняется. Цель — продолжать съедать красную точку и избегать столкновений со своим телом или краями экрана. Если это произойдёт, игра закончится. Это игра на выживание, где нужно продержаться как можно дольше и набрать как можно больше очков, используя свою быструю реакцию.
В этом уроке вы узнаете о добавлении звука. Каждый раз, когда наша змейка съедает яблоко, она издаёт звук глотания!
Мы также изучим обнаружение столкновений, определяя, когда змейка съедает яблоко, ударяется о край экрана или сталкивается с другой частью своего тела.
Мы будем использовать ввод с клавиатуры для определения направления движения нашей змейки.
Наконец, мы добавим текст на холст, реализовав экран окончания игры и отображая счет, который увеличивается по мере поедания яблок.
Исходный код игры «Змейка» на GitHub:
https://github.com/CodingWith-Adam/snake
Играбельная версия змейки из руководства (используйте клавиши со стрелками для перемещения):
https://codingwith-adam.github.io/snake/
Альтернативная версия змейки от пользователя GitGub jeremystone4321 (используйте клавиши WASD для перемещения):
https://jeremystone4321.github.io/Sna...