From 2e90148f80f6483b1d22cb36cd61dacd3eae2d69 Mon Sep 17 00:00:00 2001 From: David <12832280+David-Else@users.noreply.github.com> Date: Sat, 15 Feb 2020 12:32:52 +0000 Subject: [PATCH] Update README --- README.md | 28 ++++++++++++++++++++++++++++ package.json | 14 +++++++------- src/entities/bitmap-character.ts | 1 + 3 files changed, 36 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 8564b24..fd9d408 100644 --- a/README.md +++ b/README.md @@ -8,4 +8,32 @@ - 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 + ![screen shot](/assets/zombie-attack-screenshot.png) diff --git a/package.json b/package.json index a1ded54..9f3c507 100644 --- a/package.json +++ b/package.json @@ -6,13 +6,13 @@ "main": "src/mod.ts", "scripts": { "deno-run": "deno run --allow-all --importmap=./import_map.json src/mod.ts", - "deno-test": "npm run clear-console && deno test --allow-all --importmap=./import_map.json test/*", - "build": "npm run copy-build-files && rollup -c", - "build-watch": "npm run copy-build-files && rollup -cw", - "lint": "npm run clear-console && eslint --cache --ext .ts src/", - "clear-console": "deno eval \"console.clear()\"", - "copy-build-files": "cp -r src/{main.css,index.html,game-data.json} assets/ dist", - "clean-build-dir": "rm -r dist/*" + "deno-test": "npm run _clear-console && deno test --allow-all --importmap=./import_map.json test/*", + "build": "npm run _copy-build-files && rollup -c", + "build-watch": "npm run _copy-build-files && rollup -cw", + "build-clean-dist": "rm -r dist/*", + "lint": "npm run _clear-console && eslint --cache --ext .ts src/", + "_copy-build-files": "cp -r src/{main.css,index.html,game-data.json} assets/ dist", + "_clear-console": "deno eval \"console.clear()\"" }, "author": "https://www.elsewebdevelopment.com/", "license": "gpl-3.0", diff --git a/src/entities/bitmap-character.ts b/src/entities/bitmap-character.ts index 4ace6fc..d342c55 100644 --- a/src/entities/bitmap-character.ts +++ b/src/entities/bitmap-character.ts @@ -10,6 +10,7 @@ import { Character } from "./character.js"; export abstract class BitmapCharacter extends Character implements Drawable { protected abstract image: HTMLImageElement; protected abstract widthHeight: Vector2; + public draw(ctx: CanvasRenderingContext2D): void { ctx.drawImage(this.image, this.x, this.y); }