At this point in time the game is not super advanced. I deliberately did not use any frameworks as I wanted to design it from scratch. I will come back to it when time permits and add proper graphics and levels, but for now it exists as a nice example game code base using modern JS.
Use arrow left / right and ‘f’ to fire!
The game is constructed using ES6 classes. There is a lot of debate in the JS community on if JS classes are a good or bad thing. The main argument against them is that they are not really classes, but just a ‘smoke and mirrors’ cover over prototypical inheritance. JS is not a class based language, and the JS class is really only a function in disguise. While this is true, it is more a purist argument than a practical one.
While JS is indeed based on Objects linking to other Objects, in the real world when people program using Object Oriented design patterns they imagine classes are there anyway. A constructor function is essentially the same thing as a class, and the prototype chain is used for inheritance. Why not just give those commonly used patterns a name and a syntax to make things easier? Class and Super, hurray!
Here is a diagram of how I use ES6 classes to structure the game:
Splitting software into components makes it possible to reason about each part separately. Each part does it’s own thing and communicates with the other parts. This makes maintenance much easier and writing software much more enjoyable.
Of course the decrepit stench of Internet Explorer is still lingering, no support there of course. Soon this wretched zombie will decay with time, but if you need to support legacy browsers in the corporate environment the best solution is to compile the modules together using a build tool like https://rollupjs.org/guide/en
ES6 Arrow Functions
Everybody loves arrow functions, expect of course pundits like Kyle Simpson, who still uses the var keyword 🙂 Not only do they look cool, and fit more into a functional style of programming, they inherit the scope they are in so you don’t need to use .bind or some ‘that = this’ hack.
Below is the bundled version of the code. All the ES6 modules have been compiled together by Rollup. All the original source code is here: