https://github.com/igorski/rts
An isometric real time strategy game that runs in your browser
https://github.com/igorski/rts
game rts rts-game typescript vue vue3 web
Last synced: about 1 year ago
JSON representation
An isometric real time strategy game that runs in your browser
- Host: GitHub
- URL: https://github.com/igorski/rts
- Owner: igorski
- License: mit
- Created: 2022-06-06T09:35:52.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-10-03T19:05:53.000Z (over 3 years ago)
- Last Synced: 2025-03-20T15:03:02.854Z (over 1 year ago)
- Topics: game, rts, rts-game, typescript, vue, vue3, web
- Language: TypeScript
- Homepage: https://www.igorski.nl/application/rts
- Size: 625 KB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# RTS
A WIP browser based real time strategy game in the vein of 90's classics such as Dune 2 and Command & Conquer.
## Game model
The game is written in TypeScript using Vue 3 with Pinia. The game sprite rendering is
done using igorski's [zCanvas library](https://www.github.com/igorski/zcanvas) 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).
## Application source outline
* _./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
## Project setup
```
npm install
```
### Development
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
```