Перейти к содержимому

Пишем игру «Змейка» на 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...