ES6 Zombie Attack | JavaScript Personal Project

This is a personal project I put together to cement my understanding of some exciting
new JavaScript technologies, and to have some fun making my own game.

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!

Sorry, your browser can’t display canvas!

ES6 Classes

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:

ES6 Modules

Javascript has been crying out for modules since day one. The need was so great that
developers had to invent their own module system as there was no official version.
This lead to all sorts of competing formats, which was of course a nightmare. Now
that nightmare is over! Finally official ES6 Modules (or ESM) are fully supported
in modern browsers:

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.

The Code

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:

ES6 Zombie Attack Github Source Code

Leave a Reply

Your email address will not be published. Required fields are marked *