While I’m working on the game design for the Breakout/Pong hybrid in Unity, I’m starting to set up the development for HTML 5. I have to admit, a lot has changed since I last had a look in this sector. When I was looking for the last time, there were the first fledgeling HTML 5 game engines. Now, if you search for the term, you get dozens of engines!

But, as I want the pure, intense and gritty experience of doing everything by hand, I’m going to skip all that and do it myself! Maybe a general-purpose javascript library if the language itself gets too confined, but apart from that, I’m on my own.

IDE

I’ve had a cursory glance at IDEs for javascript, and I’ve decided to go for Brackets. Notably, it doesn’t have autocompletion for javascript, but since the purpose of this whole exercise is to learn it better, I think it’s not necessarily a bad idea to live without it. This way, you actually have to learn the API and not glance at what your IDE suggests you use.

First steps

I was following this tutorial on James Litten’s blog for getting the keyboard inputs in HTML 5 and got a super basic website going that logs what key you have pressed. It’s certainly not rocket science, but it’s one of the foundations for game development :-)

The next step was to put this code into a nice class that goes into a separate file. No huge, hundred-classes-in-one-file web page for me, thank you. Currently I’ve got the paddle controls and the ball physics implemented, after which will be the Breakout bricks. The whole things still has a really classic Pong look (black and white shapes), nice sprites and animations will be added later on.

Reading

Playing the first prototype got me interested in the game mechanics of Breakout. A search found me this gem on Gamasutra by Mark Nelson which I’ve been reading. One major insight is that a Breakout-style game really benefits from a level editor to create interesting levels. Which is why I’ve expanded a bit on the web-based game idea and am currently also working on an editing mode to have the level editor also web-based. For this goal I’m also going into PHP for the server-side code for storing levels in a database.