Здесь мы имеем три блока, разметка HTML, стили CSS и код JS:
Исходный код: js_ostrich.txt
Суть игры предельно проста: страус бежит по саванне, а игрок управляет им, чтобы избежать столкновений с препятствиями. Чем дольше продолжается забег, тем выше счёт и тем быстрее движется игровое поле. Для успеха требуются ловкость, реакция и доля везения.
Технически игра состоит из трёх компонентов. Первый — HTML-контейнер с идентификатором ostrich-game-container, который служит точкой вставки на странице. Второй — CSS-стили, изолированные через Shadow DOM для предотвращения конфликтов с оформением сайта. Третий — JavaScript-логика, включающая анимацию, физику и обработку управления, всё в одном файле.
Перед началом игры пользователь видит стартовое меню с фоновым изображением размером 900 на 502 пикселя. Заголовок СТРАУС-БЕГУН оформлен с лёгкой анимацией пульсации, под ним размещена кнопка начала игры. Сам страус отрисован исключительно средствами Canvas API: чёрное тело с текстурой перьев, белая изогнутая шея, оранжевый клюв, глаз с бликом и светлые ноги с анимацией бега. При приседании персонаж плавно меняет позу без визуальных рывков благодаря мгновенной коррекции позиции.
Управление осуществляется с клавиатуры или касанием экрана. Пробел или клик мышью заставляют страуса прыгнуть, стрелка вниз позволяет пригнуться для уклонения от летающих препятствий, клавиша P ставит игру на паузу. На мобильных устройствах прыжок выполняется тапом по области игры.
Функция паузы работает в любой момент: нажатие P останавливает игровое время, страус и препятствия замирают, на экране появляется соответствующее уведомление. Повторное нажатие возобновляет игру с места остановки.
Сложность растёт плавно: начальная скорость около 220 пикселей в секунду постепенно увеличивается на 15 пикселей в секунду до достижения максимума в 550 пикселей в секунду. После набора 200 очков в игре появляются летающие птицы, располагающиеся на трёх разных высотах, что требует от игрока своевременного выбора между прыжком и приседанием.
Лучший результат сохраняется в памяти браузера через механизм localStorage и отображается в верхней части игрового поля вместе с текущим счётом. При столкновении с препятствием экран затемняется, появляется надпись о завершении игры с указанием набранных очков. Если установлен новый рекорд, это отмечается специальным сообщением. Кнопка повторной игры возвращает пользователя к стартовому меню.
Игра полностью изолирована благодаря использованию Shadow DOM: её стили и скрипты не влияют на оформление основного сайта и не конфликтуют с другими библиотеками. Блок с игрой автоматически центрируется на странице, корректно отображается на экранах любого размера, а фоновое изображение меню масштабируется без искажений.
Для установки игры на сайт достаточно добавить контейнер с указанным идентификатором в нужное место страницы, вставить код скрипта и при необходимости скорректировать путь к фоновому изображению в настройках. После этого игра готова к использованию без дополнительной настройки.
Компонент протестирован в основных браузерах: Chrome, Firefox, Safari, Edge, а также на мобильных платформах iOS и Android. Код не использует внешних зависимостей, что обеспечивает стабильную работу в любой среде.
