VIMinO

!Making a Splat!

Back in 2016 I created Splat!, a simple game in javascript.
The idea was to learn how to use ES6 and gain a better understanding of additional Javasript features.

Of course, after finishing the basic prototype I started defining entities (Player, Enemies, Points, Goal), as well as abstracting concepts which had Shapes (Rectangle, Circle). While the game was simple it got me to realize how fun it was to make an Engine for it.

At this point I wanted to create a series named "Making a Splat!" where I split the game (Splat!) from the engine (Splatter). This didn't last long as the time working on splitting while also recording was immense. I wanted the videos to be just right and went as far as deciding whether to record my comments a few times.
Naturally I had a prototype, and the desire to improve on it. But in the end it was too soon as I had to learn and use both babel and Webpack to use the new fangled ES6 features.

But now, 4 years later I started moving forward with this project. I'm not going to record it, just keep track of changes in the git repository.
Funny story is that I created JerboaTTS later on and it shared the same mentality. Make an engine to build a simple game.

Update on 2020-01-30

So now there's an index.html, Splat.js and Splatter.js files. While I didn't use classes exclusively (to avoid pointless sintatic sugar in some cases) the Splat class inherits from Splatter and only works on game-related things.
On the other hand, Splatter automatically adds a canvas and scales it (using Splatter.resize method, which is bound to the 'resize' event) while defining the games' actual size (in this case: 800x600).
I find that letterboxing is a simple solution that will work in most devices. It's awesome that I could do it entirely with a single canvas tag and not require a containing div.
It took 4 years until I came around to update Splat. But it feels good to no longer worry about scrollbars.

by vimino on 2020-01-13