Наверно все помнят знаменитую игру детства battle city, эта игра была выпущена для игровых приставок, и покорила сердца многих. Полигон действий виден сверху. Игрок должен, управляя своим танком, уничтожить все вражеские танки на уровне, которые постепенно появляются вверху игрового поля. Враги пытаются уничтожить базу игрока, внизу игрового поля в виде орла, и его танк. На каждом уровне нужно уничтожить двадцать единиц бронетехники противника разных видов. Если противник сможет разрушить базу или лишит игрока всех жизней то игра будет окончена.

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

Шаг 1. HTML

Мы рассмотрим полную разметку страницы, с подключенными стилями.

Как вы заметили, с помощью скрипта мы также подключили фоновую музыку, которая будет проигрываться раз, при запуске страницы.

Шаг 2. CSS

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

Шаг 3. JS

Самым важным файлов будет скрипт script.js, который будет отвечать за разметку, позиционирование танка и его передвижение

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