Чистый TypeScript + Three.js + ECS Архитектура
(Никаких React-оберток, Unity или Godot. Только чистый код, математика и производительность.)
Инженерное портфолио в жанре Bullet Hell / Survivor-like.
Мы не "накликиваем" игру в редакторе. Мы пишем её архитектуру. Это демонстрация того, как backend-подход (строгая типизация, управление памятью, ECS) работает во фронтенде.
Для PHP Full Stack (Backend Focus) разработчика это идеальный кейс:
- Архитектура системы: не лапша из скриптов, а строгий ECS-фреймворк. 5000+ сущностей, 60 FPS.
- Строгая типизация: TypeScript на стероидах - дженерики, интерфейсы, защита от выстрела в ногу. Как PHP 8+, но в браузере.
- Оптимизация: мы сами управляем памятью (object pooling) и циклом рендера. Никакого оверхеда.
- Прозрачность: нет "черных ящиков". Каждый кадр просчитывается явно.
- Runtime: Vanilla TypeScript (без фреймворков для логики).
- Renderer: Three.js (WebGL).
- Architecture: Miniplex (ECS - Entity Component System).
- Bundler: Vite (быстрый HMR и сборка).
- DX: ESLint, Prettier, Vitest.
- Platform: Web & Yandex.Games SDK.
Мы отказались от ООП-наследования (class Bullet extends GameObject). Только Data-Oriented Design.
- Entities (Сущности): просто ID.
- Components (Компоненты): данные (как столбцы в БД).
- Systems (Системы): логика (как SQL-запросы или сервисы).
Схема работы похожа на базу данных в памяти:
const moving = world.with('position', 'velocity');
for (const entity of moving) {
entity.position.add(entity.velocity);
}pnpm install
pnpm dev| Команда | Описание |
|---|---|
pnpm dev |
Запуск dev-сервера |
pnpm check |
Полная проверка проекта |
pnpm test |
Запуск тестов |
pnpm test:watch |
Тесты в watch-режиме |
pnpm test:coverage |
Отчет о покрытии |
pnpm lint |
Проверка линтером |
pnpm lint:fix |
Автоисправление линтером |
pnpm format |
Форматирование кода |
pnpm format:check |
Проверка форматирования |
pnpm typecheck |
Проверка типов TypeScript |
pnpm build |
Продакшн-сборка |
pnpm h |
Список всех команд |
src/core/- ECS ядро: сущности, компоненты, системы.src/main.ts- точка входа и игровой цикл.tests/- тесты систем.docs/- архитектурные решения и философия..agent/- контекст для AI-помощника.
Код написан так, чтобы его было приятно читать бэкендеру. Чисто, строго, быстро.