A WIP browser based real time strategy game in the vein of 90's classics such as Dune 2 and Command & Conquer.
The game is written in TypeScript using Vue 3 with Pinia. The game sprite rendering is done using igorski's zCanvas library with Vue handling the UI overlays.
All the game's actors and properties are Object structures inside Pinia store states making these reactive.
In order to create a new structure, a factory pattern is provided and every
game structure has its own factory (see /src/model/factories/). You should never
create your own Object structure but use a factory instead.
Operations on structures are done using the action modules (see /src/model/actions/) but remember
when changing values of a Pinia state object, that these should be called from a store action.
While the game clock could increment at a lower speed than in actual life (e.g. when paused), think of all
time related operations (e.g. Effects) as if they were actual time (e.g. "the effect of this item should last for fifteen minutes during gameplay"). The unit used is the millisecond and is automatically
scaled to the game/real life ratio when creating a new Effect using the EffectFactory.
All of the games behaviour and time bound effects update in the same place: the update()-handler
in the game-store. This is bound to the render cycle of the game world (and deferred to AnimationFrame
so the game is effectively paused when the browser/tab isn't focused).
- ./assets/ resources referenced by the application e.g. images, fonts and SASS stylesheets
- ./components/ Vue components
- ./definitions/ enumerations for game specific actions
- ./model/ game actor factories and actions (e.g. game logic)
- ./renderers/ visualizers of game actors (these are zCanvas Sprites)
- ./store/ Pinia store root and sub modules
- ./utils/ common helper methods
npm install
Create a local development server with hot module reload:
npm run dev
Creating a production build (build output will reside in /dist/-folder):
npm run build
Running unit tests:
npm run test