Посмотрев несколько игр для маленьких (и не только) детей на Android я знатно приофигел от того как и с какой частотой там показывается реклама. Она появляется часто, внезапно и ее невозможно быстро закрыть - нужно просмотреть чуть ли не 3-4 экрана и только после этого появляется неудобная кнопка закрыть. Адская штука! Мало того в большинстве игр эту рекламу невозможно отключить никаким образом - просто отсутствует такая опция.

Дочка очень любить играть в игры, не смотря на ее возраст (2.5 года). Всегда приходит ко мне на работу (то есть за мой стол - так как работаю то я дома). И внимательно наблюдает что я делаю. Очень любит играть в супер марио, но так же и в игры на планшете. Собственно для нее я и пытался найти, что то вменяемое. В итоге я принял решение написать ее любимую игру с нуля. А раз у меня есть свой блог то логично сюда запостить весь процесс.

В качестве платформы я выбрал обычный веб браузер. На работе я использую Rust и определенные подходы. Стало интересно как проявят эти подходы в таком личном пет проекте на другом языке программирования. В качестве языка мы будем использовать TypeScript, это типизированный вариант JavaScript. Так же мы будем использовать технологию PWA, которая позволяет устанавливать веб приложение как нативное оффлайн приложение на Android и iOS. В общем будет интересно!

Как известно любая разработка начинается с установки ПО и настройки среды. По своему опыту могу сказать, что это нетривиальная и бывает довольно скучная задача. Так как у всех нас разные ОС, их версии и разный набор уже установленного ПО. Но без этой части никуда.

ВКонтакте • YouTube

00:00 Вступление
01:19 Смотрим "игру"
01:57 Мнение об "игре"
03:04 Обзор технологий веб браузера
04:54 Механика нашей игры
05:58 План
07:09 Установка NodeJS
08:38 Установка VS Code
08:50 Создание репозитория на GitHub
09:52 Настраиваем проект в VS Code
11:35 Устанавливаем TypeScript в проекте
15:56 Добавляем скрипты для билда
17:39 Добавляем index.html
21:54 Запускаем index.html в браузере
23:46 Подключаем JavaScript в html
24:26 Заливаем на GitHub
25:41 Паблишим на GitHub Pages
27:27 Заключение

Код посмотреть тут

Открыть результат можно здесь

Оглавление
1. Настраиваем проект (мы тут)
2. Добавляем canvas
3. Масштабирование игры
4. Добавляем интерактивность