https://github.com/david-else/typescript-zombie-attack
Arcade quality thrilling game written in TypeScript with zero dependencies using custom game engine
https://github.com/david-else/typescript-zombie-attack
canvas-game game-engine typescript zero-dependency
Last synced: about 1 year ago
JSON representation
Arcade quality thrilling game written in TypeScript with zero dependencies using custom game engine
- Host: GitHub
- URL: https://github.com/david-else/typescript-zombie-attack
- Owner: David-Else
- Created: 2019-06-27T09:18:03.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2020-02-24T21:05:06.000Z (over 6 years ago)
- Last Synced: 2025-02-17T04:26:55.325Z (over 1 year ago)
- Topics: canvas-game, game-engine, typescript, zero-dependency
- Language: TypeScript
- Homepage:
- Size: 1.33 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Zombie Attack!
## How to play
- `git clone https://github.com/David-Else/typescript-zombie-attack`
- `npm` (or whatever package manager you use) `install`
- Build the JavaScript to run in the browser using the NPM script `build`
- Launch a dev server on `index.html` in the `dist` directory
- **Kill zombies!**
# Code Documentation
The game is built in TypeScript using OOP with an emphasis on composition. The [state pattern](https://gameprogrammingpatterns.com/state.html) is used for the different screens/levels. There are no dependencies, the engine has been written from scratch in an attempt to be as simple and maintainable as possible.
NPM Scripts are used to control the build process. Just run `build-watch` and Rollup will continuously monitor for changes to the source code and compile the entire game into `dist/mod.js`. You can run a dev server on `dist/index.html` to play the game and work on development.
## Overview
### src/mod.ts
The 'main' entry function is `mod.ts` which is loaded and run by `index.html`. It does the following:
- Imports the `GlobalState` class ready to be instantiated as `globalState`. This is where all mutable state lives, including all the on screen entities, key press states, all the sound/graphics assets, and the levels themselves contained inside `levelState: StatePattern`
- Imports the initial state `Init` for the state pattern. Each state can call the next state, and this one loads the assets and continues to the start screen
- Set the rendering context to the `"game-canvas"` element
- Decides the dimensions of the game screen based on the current browser `canvas.width`/`canvas.height`
- Adds the keyboard event listeners
- Starts the `gameLoop()`
### src/states
All the files in this directory are part of the state pattern and use `extends Base implements StatePattern`.They have a single abstract base class they inherit from called `base-class.ts` which contains:
`update()` which is responsible for updating all the entities and drawing them.
`keyHandler()` which deals with in-game key presses
## Screen Shot of Level 1
