Тетрис (TypeScript) — веб-версия игры «тетрис»

СегментFault, авторская колонка: «Постоялый двор на окраине»

Автор: Джеймс Фан (James Fan), также известный как «Окраина».

Используемые технологии

• HTML5;
• LESS;
• TypeScript 4.0+;
• JavaScript (ES2015+ with ESM).

Структура проекта

Настройка среды

Среда разработки (а также среда npm scripts) представляет собой Windows 10, более низкие версии Windows или Linux требуют внесения изменений в скрипты в файле package.json.

Хотя это и фронтенд, всё ещё используется идея проекта для создания результатов. Цели скрипта и таблицы стилей создаются с помощью сборки. Сборка выполняется в среде NodeJs 14+ .

В процессе разработки использовался TypeScript, который требует поддержки языка TypeScript. Хотя большинство редакторов или IDE, поддерживающих TypeScript, уже имеют встроенную поддержку TypeScript, она может быть не самой последней версией. Можно установить последнюю версию TypeScript через npm, а затем проверить установленную версию с помощью команды tsc --version.

TypeScript можно установить глобально или локально, рекомендуется использовать локальную установку:

tetris/> npm install typescript
tetris/> npx tsc --version

Сборка

В последней перестройке используется <script type="module" ...></script> для ссылки на скрипт, используется современный синтаксис JS, не требуется упаковка, также не требуется Babel для перевода, поэтому Babel и Gulp были удалены, и используется самый простой метод построения, реализованный с помощью сценариев npm.

Полная сборка выполняется с помощью команды npm run build, обратите внимание, что эта команда не включает очистку старых результатов сборки.

— Сборка TypeScript напрямую использует команду tsc, см. сценарий compile в package.json.

Из-за недостаточной дружественности TypeScript к type="module", в исходном коде import операторы должны иметь расширение .js (обратите особое внимание — не .ts) для файлов скриптов.

— Сборка LESS таблицы стилей использует команду lessc, см. скрипт lessc в package.json.

— Копирование index.html и jQuery использует системные команды, см. сценарии copy-html и copy-jquery в package.json.

— Очистка результатов сборки использует команду rm Powershell Core, см. скрипт clean в pckage.json.

Запуск

Поскольку используется type="module", нельзя напрямую открыть локальный index.html, чтобы запустить его, необходимо опубликовать результаты сборки (dist каталог) как статический веб-сайт и запустить его через HTTP-протокол. Веб-серверный контейнер можно выбрать из Nginx, IIS, Apache и т. д.

На основе стека технологий Node рекомендуется выбрать http-server, рекомендуется установить его глобально для удобства использования в различных средах разработки:

/> npm install -g http-server
/> cd d:/workspace/tetris/
/> http-server dist

Управление

Дополнительная литература: серия статей SegmentFault

— JavaScript версия тетриса; — Рефакторинг JavaScript версии тетриса; — Преобразование JavaScript версии тетриса в TypeScript.