Intro to retro game Toppler@2016

Toppler is one of my favourite games from the childhood. And it is not about great graphics or funny signs in the game (nope, I don’t understand it neither) but about simple, straightforward gameplay.

I made first attempt to port that game to JS around 2007, when Canvas API was new and fresh. Today is good moment to take a look back and check if it can be refactored into modern patterns.

First attempt — perfect graphics

I decided to clean up the old code, push a fresh life but using ES6 and preparing proper modules. It was also good opportunity to test different build tools/package managers like JSPM.

Main points to refactor were:

  • modules
  • render assets once on separate <canvas> objects
  • eliminate spaghetti code patterns

Modules

JSPM together with Babel made perfect work to introduce ES6 modules to the game. The game isn’t so complicated so I have grouped components into few categories:

  • services — for one instance objects
  • models
  • assets/sounds — for generated multimedia files
import {Toppler} from './toppler';
let game = new Toppler(document.body);

game.start();

Assets

The game@2007 looks very good (very similar to original one) so this part was quite easy. Every asset file exports <canvas>. With drawing on it.

/**
* Brown ball
*
@type {HTMLCanvasElement}
*/
let canvas = document.createElement('canvas');
canvas.width = 25;
canvas.height = 25;

let ctx = canvas.getContext('2d');
drawBall(ctx, 12, 12, 'rgb(228, 175, 86)');

export {canvas as brownBall};

Code

Code of the refactored game is available at GitHub under Toppler project.

Demo (be aware that it is still in development so it might not work from time to time).

Like what you read? Give Michal B a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.