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

В данном уроке мы рассмотрим как создать мини-игру Block breaker при помощи html5. При помощи данной игры мы продемонстрируем возможности js и не только. И так, приступим.

Шаг 1. HTML

Для начала мы рассмотрим разметку, в которой мы подключим все необходимые скрипты и создадим контейнер с данной игрой, при этом мы зададим относительные параметры окна:

Как вы заметили в разметке ничего сложного нет, далее мы рассмотрим стили.

Шаг 2. CSS

В них мы зададим позиционирование контейнера, да некоторые параметры для преображения вида демонстрации.

Шаг 3. JavaScript

Завершающим этапом будут скрипты, в которых мы будем создать отсчет времени с помощью параметра iSec, так же зададим подписи о счете и лучшем результате с помощью ctx.fillText, зададим цветовую гамму для полосок, скорость анимации шарика и манипуляций мышью.

 Вот и все. Готово!

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

Читайте также: