I had a thought today: I should make a game in HTML 5. Actually, it’s an idea I’ve had for a while now, but have never really had the time or motivation to do it. So why now? I had a conversation with one of my friends and was asked how one would go about learning to code from scratch. I guess I couldn’t help but try to influence an otherwise untainted mind, so I asked, “What do you want to be able to do with it?” The winning reason was games.
It shouldn’t be too surprising that a lot of people get into coding with the hopes and dreams of some day creating the next great blockbuster game. There are a lot of reasons to start coding, and game development is certainly one of the most fun, at least in my mind. But is it a realistic goal? Games are not the simplest programs to design, especially for someone with no coding experience. It’s no coincidence that nearly every programming book I’ve ever read starts out with the “Hello world!” program and then works into the rest of the language syntax with boring examples that read and write to the command line. This is how real programs are made. You have to start with the basics and work up to fancy stuff like graphics. But does it have to be this way? Sure you’ll write better programs if you know all the ins and outs of a language, but you don’t always have to start learning with the same boring exercises. I can’t tell you how many times I’ve started learning a new programming language and gotten so bored of the little exercises that I’ve just given up. I need feedback. Visual feedback. If I want to make a game with graphics, then that’s where I want to start. So here’s my plan. I’m going to try to explain in detail how a person with no programming experience can make a game from scratch. Not just some “guess the number” game played on the command line, but a real game with interactive graphics. What game you ask? Tetris.
Why Tetris? Geoff Howland wrote a great article about the kinds of games new developers should focus on. Tetris was chosen as a starting point because it’s really a very simple game, yet has all of the elements that go into more complex games. Plus, you don’t need to be a great artist to make a commercial quality Tetris game. So if it’s such a simple game, surely there are dozens of tutorials on how to code it up. Why am I writing this tutorial? Well, I’m doing this just as much for myself as I am for anyone who happens to be reading it. Teaching is perhaps the best way to truly understand something, and I’ve always wanted to make games, so I’m hoping that this will be enough to keep me going. I’ve been programming for a while, but I can’t say I know everything. My thought process is my own, and my goal here is to provide a record of the steps that go into designing a game from scratch.
So, what language will we be using? In the interest of keeping this modern, relevant, and as simple as possible, I’ve elected to create Tetris in HTML5, which means that we’ll also be using JavaScript and CSS. The advantage of this approach is that any modern browser will be able to play our game, on any platform, Windows, Mac, or Linux. Also, there is a direct and obvious correlation between what appears in your code and what you see on screen, allowing us to jump right into graphics programming. Finally, once our game is complete, it’s easy to distribute it as a webpage to anyone in the world with an internet connection. The skills you will learn in this tutorial will transfer easily to other settings and let you build upon what you learn here.
One final note. Why HTML5 instead of some other language? While both Flash and Java provide sandbox environments for distributing games across the web, they both require plugins in order to work properly, and in the case of Flash, can cost a lot of money. C++ and other languages like Objective-C and C# are more powerful, but that power comes with a price. These languages produce programs that have to be compiled rather than interpreted, meaning that it’s harder to distribute your work. Naturally, there are plenty of other paths to developing great games and plenty of resources to go along with them. I think this tutorial will be a great way to get started if you have no prior experience and just want to make something awesome.
Ready? Let’s get started…