• Move using the arrow keys.
  • Press ‘J’ to shoot.
  • Left-click to place blocks.
  • Right-click to remove them (or shoot them).


There is not much of a game here currently. This is primarily an excercise to learn more about structuring complex programs and modularising code. At the same time, I’m using it as an opportunity to learn more about the new features introduced in ECMAScript 6 (aka the new JavaScript).

Here’s an example class from my demo. This is the class for an entity in the game, be it the player, a “monster” or the shots the player shoots. There are certainly improvements to be made, as it is a work in progress.

You can find the source on GitHub

 1 class Entity extends GameObject {
 2     constructor(type, x, y, update, rest, state, dir) {
 3         super(x, y, type, update);
 4         this.rest = rest || 10;
 5         this.attackRest = rest || 10;
 6         this.state = state || 1;
 7         this.dir = dir || 0;
 8         this.wait = 0;
 9         this.attackWait = 0;
10         this.uuid = GameObject.generateUUID();
11 
12         this.moveDown = function(steps) {
13             if (Tile.isLegalMove(this.x, this.y + 10) && this.wait >= this.rest) {
14                 this.wait = 0;
15                 steps = steps || 1;
16                 this.y += steps * 10;
17             }
18             this.dir = 0;
19         };
20 
21         this.moveRight = function(steps) {
22             if (Tile.isLegalMove(this.x + 10, this.y) && this.wait >= this.rest) {
23                 this.wait = 0;
24                 steps = steps || 1;
25                 this.x += steps * 10;
26             }
27             this.dir = 1;
28         };
29 
30         this.moveUp = function(steps) {
31             if (Tile.isLegalMove(this.x, this.y - 10) && this.wait >= this.rest) {
32                 this.wait = 0;
33                 steps = steps || 1;
34                 this.y -= steps * 10;
35             }
36             this.dir = 2;
37         };
38 
39         this.moveLeft = function(steps) {
40             if (Tile.isLegalMove(this.x - 10, this.y) && this.wait >= this.rest) {
41                 this.wait = 0;
42                 steps = steps || 1;
43                 this.x -= steps * 10;
44             }
45             this.dir = 3;
46         };
47 
48         this.isOffScreen = function() {
49             return !!(this.x > CANVAS_WIDTH || this.x < 0 || this.y > CANVAS_HEIGHT || this.y < 0);
50         };
51 
52         this.destroy = function() {
53             ENTITIES.remove(this.uuid);
54         };
55 
56         return ENTITIES.add(this);
57     }
58 
59 
60 
61     static find(x, y) {
62         return ENTITIES.find(x, y)
63     }
64 
65     static findByUUID(uuid) {
66         return ENTITIES.get(uuid);
67     }
68 
69     static all() {
70         return ENTITIES.all();
71     }
72 
73 }