web-minesweeper

Для работы WebGpu может потребоваться запуск в браузере с флагом --enable-unsafe-webgpu (chrome), либо включить экспериментальную функцию в настройках браузера

Ссылка на деплой

Готовый проект можно посмотреть по ссылке:
https://mihaillatyshov.github.io/web-minesweeper/

Управление

• Левый клик - открыть ячейку
• Правый клик - поставить флаг
• Левый клик по ячейке с открытым числом - открывает все соседние ячейки, если количество флагов вокруг равно числу в ячейке; либо ставит флаги во все соседние ячейки, если количество закрытых ячеек вокруг равно числу в ячейке
• Перемещение камеры с помощью колеса мыши (перемещение по вертикали, с зажатым Shift перемещение по горизонтали)
  Можно перемещать камеру с использованием тачпада

Описание проекта

Игра "Сапер" на TypeScript

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

• TypeScript
• WebGpu
• HTML Canvas
• Webpack
• SCSS
• IndexedDB

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

Есть две темы оформления: светлая и темная. Изначально тема берется из настроек браузера или системы, далее из localStorage.
Сохранение поля происходит в IndexedDB.

Запуск проекта

1. Для запуска проекта нужен Node.js и npm
2. Установите зависимости командой npm install
3. Запустите проект командой npm run dev

Возможные доработки

• Добавить тесты для игры
• Хранить состояние поля в QuadTree. Это позволит ускорить открытие большого поля с маленьким количеством мин
• Добавить воркеров для генерации поля, чтобы оно грузилось после загрузки страницы
• Добавить перемещение камеры с помощью клавиатуры
• Добавить другие виды рендеринга