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 *