Making an HTML5 Game in 7 Days

TL;DR



I made an HTML5 game in JavaScript called Dave Likes Pizza over the course of a single week. You can play it or view the sources . This article is about the development process, which is rather interesting because I previously knew almost nothing about JavaScript or web development.




DAY 1: IDEAS AND RESEARCH



The first most pressing question might be, "Why HTML5?" I have experience in a few game engines (Unreal, Sparrow, LibGDX, SDL, to name a few), none of which have anything to do with the Internet. But I think that the Internet as a whole is approaching a sort of technological singularity, in that it is quickly becoming possible to do anything on the web. If you don't believe me you can check out . Probably no one knows this better than Google; they even have a thing called a Chromebook that is essentially a lump of hardware with a browser. And weird thing: it can do stuff.



So I decided to try out HTML5. Because I knew nothing about JavaScript development, I did a bit of research (this involved going to Google and typing in "JavaScript game engine"). Turns out most of the solutions available are still in development -- this is a cutting-edge field, after all -- and the ones that look viable cost lots of money. If you're looking for a good resource, try of Javascript engines. Ultimately I chose CraftyJS, mostly because it seemed easy to pick up.



Day 1 ended with me working through the basic .



DAY 2: BRAINSTORMING



It's important to have clear goals before you start banging out a bunch of code. My goal was to create a simple game to showcase new features in my Sagittarius game service. In other words, I didn't want to make the next Halo, but something like Snake or Frogger was within the realm of possibility.



Of course, being me, I also didn't want to just make Snake version 1329092. I wanted something at least a tiny bit original.



At some point I remembered my days in high school, programming games on a TI-84 scientific calculator (fun fact: TI-BASIC was the first programming language I learned). One of the first such games I made was Avalanche: guy on bottom, spikes on top, guy dodges spikes for as long as possible. Simple. So simple, in fact, that my TI-84 version with a little O guy dodging V spikes was only 92 bytes of code.



But how to make it original? The crucial step towards Dave Likes Pizza was wondering why the guy had to dodge the spikes. What if he wanted to collect them? Of course, no one really wants to collect spikes. But spikes are triangles, and I quickly realized that another triangular thing is pizza. From there the rest of the idea was trivial.



In case you're wondering, I was talking to a guy named Dave when I had this epiphany (well, more like listening halfheartedly, since my mind was on Avalanche). I'm not sure whether real-life Dave likes pizza, but I can tell you he is much less square.



I also played around with some Crafty code but didn't really accomplish much on Day 2, other than getting the pizza idea down.



DAY 3: PROTOTYPING



Here's a screen from about the middle of Day 3:



An early development screenshot of Dave Likes Pizza



You'll notice Dave there, looking all nice and green. You'll also notice that the pizzas are squares and brown, not the most appetizing combo in the world.



This sort of thing is called prototyping, and anyone who's done any serious software development (related to video games or otherwise) should know about it. For those of you who don't, the basic idea is to keep everything as bare-bones as possible for as long as possible. To understand why, suppose I went and spent 2 or 3 days making nice artwork and assets for the game, then busied myself with coding and found out I couldn't complete the game. I would have just wasted a whole bunch of time.



On larger projects you'll usually see teams of people, maybe one working on the code and one working on assets. Eventually they'll have to collaborate, but there's a reason why they're split into separate teams. Working on a prototype makes it much easier to iterate builds and you don't have to worry about linking in a bunch of .png's and .mp3 s and junk.



For Day 3 and much of Day 4 I worked on this prototype, getting the details of the game down. Eventually I added a timer and a pause button.



DAY 4: ASSET CREATION BEGINS



I still coded a lot on Day 4, but I also spent a bunch of time in Photoshop. It was time for me to decide the artistic direction of Dave Likes Pizza.



Not a difficult decision at all, it turns out. Pretty much any game with food as a central component has to be whimsical in nature. It's like an unspoken rule or something.



My greatest inspiration was Tiny Wings, which you might be able to see evoked in the concrete textures used throughout. It's actually a really great way to create nice-looking game art really fast:



* Make a vector outline of your scene in pastel colors

* Overlay a concrete texture in photoshop

* Crank up the saturation to bring out brighter colors



Everything in the game, including the pizzas and the power-ups (which I designed on Day 4) follows this strategy. To test things out I put the into the game and left it there until the end, but I kept the pizza sprites out because I still hadn't figured out Crafty's animation system.



DAY 5: MORE ASSETS



In most Avalanche games the spikes magically disappear when they hit the ground; the apparent implication is that they fall "behind" the ground and out of sight. The real reason is that keeping spikes around will eventually crash the game, since Avalanche theoretically never ends. If someone survives for an hour, imagine how many spikes they've dodged! There's no way to represent them hitting the ground realistically.



However, Dave Likes Pizza is a game about collecting as many spikes (a.k.a. pizzas) as possible, which makes no sense in the context of a never-ending game -- so I imposed a time limit of 2 minutes. At a rate of 2 pizzas spawned every second, this means roughly only 240 pizzas per game. That's a lot, but certainly nothing a browser can't handle. My major innovation of Day 5 was to keep the pizzas around even when they hit the ground.



My shows how this mechanic works for pizzas and power-ups. It's fairly simple: when the pizza/power-up object hits the ground, kill it and replace it with a 2-image static animation corresponding to the object.



On Day 5 I also finished coding the power-up logic and added a whole bunch of sounds into the project. One AMAZING resource for this was . I can't recommend this site enough for great free game music!



DAY 6: MENUS



First, a progress screenshot:



What Dave Likes Pizza looked like on Day 6



By the start of Day 6 the actual game was pretty much complete, including a last-minute swap to the from Google Fonts. But the pause button didn't really do anything. In fact, there were no menus at all.



To rectify that I decided to build a simple menu and have it working by nightfall. It turns out that working in JavaScript is absolutely beautiful for this sort of thing because menus can be coded in HTML. Each menu "button" is essentially just a text field with a link reference to another menu/scene. My leaderboard is just an HTML table. That little line to submit your score at the end of the game? That's right, it's just an HTML input form. And because I had set up my CSS correctly, everything was immediately styled exactly the way I wanted it.



In all, the logic for the menus takes up less than 50 lines of code, and only took about two hours to write (and much of that time was spent drawing the and figuring out how to animate its bounce).



On Day 6 I minified all my JavaScript code and uploaded it to GitHub Pages. Then I shared a link to the game on Facebook to let a few people play it and see how it would fare. How did it turn out? Well



DAY 7: LAST-MINUTE FIXES



Another unspoken rule about video games (besides the "games with food have to be whimsical" thing) is that if things go wrong, they'll usually go wrong right away. This is why beta testing exists and should be mandatory.



But since my company -- insert mocking laughter here -- consists of one person who's both the CEO and on janitor duty, beta testing is a luxury I can't afford. The initial reception was that my game was cool but full of bugs, one of which was the fact that the leaderboard had stopped recording scores after 9 or so entries.



I rushed to fix the problem and traced it to a quirk in App Engine, the service that's hosting Sagittarius that's powering the leaderboard. Sagittarius stores leaderboards in compressed JSON format in a single entity property element. If that's gibberish to you, just imagine each leaderboard as a long unreadable string. By default App Engine doesn't allow strings longer than 512 characters, which is why new scores weren't being recorded. So I had to rewrite the whole leaderboard system -- insert nervous laughter here -- and upload the new code.



There were also a few cosmetic issues, none worth going into detail about. All were corrected by the end of Day 7.



CLOSING THOUGHTS: JAVASCRIPT



JavaScript is wonderful and weird. Wonderful because:



* Like Python, which I learned a few months ago, it's insanely easy to learn

* Like Python, it has dynamic typing (no need to declare what type a variable is!)

* It has anonymous functions, which solve all the problems I have with Java

* It's interpreted! No need to compile, just reload the page!



Weird because:



* Everything is a function, so OOP is really hard (but not impossible)

* If you screw something up, good luck finding it

* Variable/function scope -- probably only CS majors will understand what I mean by this, but dear God it's horrendous in JavaScript



In short, I would highly recommend learning it. Especially if you plan on doing any sort of web development, like making a personal site or something.



CLOSING THOUGHTS: DAVE LIKES PIZZA



If I charged $1.99 for people to "buy" Dave Likes Pizza, I would have already made more money than on my previous game Never End, which was $1.99 on the App Store.



I'm going to assume that this is a good thing and that I'm headed in the right direction as far as video game development is concerned. I really enjoyed the condensed development process; it seems like forcing myself to get the game out the door in a week caused me to make smarter choices and better design decisions.



Thank you to everyone who has already tried Dave Likes Pizza, and if you haven't already please feel free to give it a go. And as always, happy gaming!
Full Post