Dec 08, 2018

'Breaking out' the JavaScript

Making the famous game in JavaScript using Canvas.

Breakout gif

Breakout was a smash hit when it was released in the mid-‘70s, created by Nolan Bushnell and Steve Bristow, inspired by Pong. During my time at Lincoln College, we were tasked to create a replica of the game, using JavaScript and other web languages.

Designing the game was the hardest part, not knowing how the design would directly convert to CSS or HTML in my head was a big hurdle to get over, but I pioneered on and stuck with the idea of a retro-inspired look and feel.

The HTML for the project was very basic containing: links to assets, audio files, lists for the help menu, and the main event Canvas. Using this HTML5 element made drawing graphics possible without the use of Flash or a Java Plugin making life and coding much much easier.

With the use of Canvas, it made it necessary to learn JavaScript and use it to create the graphics, an area which I had not veered into before, it was a challenge but one that I turned out to enjoy. The canvas element made it simple and straightforward to make the game graphics and the physics of the ball all with the power of vanilla JS.

Using SASS throughout this project made me appreciate the preprocessor more, being able to nest elements without having to fuss with brackets in vanilla CSS, really helps my workflow and allows me to create designs faster, with this project and its limited CSS it maybe wasn’t worth it but throughout this I was still learning it and trying to be fluent in it.

Continuing that, I got to dive in with CSS styles I haven’t tried or used for such as CSS animations, which I used to make the text slightly flicker imitating the refresh on a CRT, using linear-gradient to create the purple and dark purple background and finally the box shadows on the text, giving the design a really retro and vintage feel.

This project was a really fun adventure in using JavaScript canvas and it allowed me to hone my skills in HTML5 and CSS with the use of SASS. I would like to continue this further using the P5.js library to enhance the game experience which I feel is the weakest point of the game also making it responsive, allowing mobile or tablet users to play the game, making is more device diverse.

You can see the project over on Codepen

This project was made in 2016, this blog post on the other hand was made in 2018.