Would You Like To Play A Game?
Our last Let’s Program was focused on some pretty serious AI techniques for solving pretty serious math problems. So this time around let’s take it easy and program a nice relaxing game.
Eh, who am I kidding. A well designed game is just as mathematically intense as your average AI. But the end product sure is a lot more fun!
Why A Browser Game?
If you’re anything like me, when you hear the word “videogame” you immediately think of a console or powerful computer running a big game like Skyrim or Final Fantasy. Tiny little browser games may not have even crossed your mind.
But don’t be too fast to look down on web browser games! Modern computer browsers have more power than most of the gaming systems I grew up with and some of the more elaborate browser games rival traditional games in terms of graphics, gameplay and content.
Browser games also benefit from a massive audience. Millions and millions of people may own gaming consoles and gaming PCs but the number of people who own web browsers is in the billions! So if you want to create a game that anyone, anywhere, can play browser games are the way to go. This is a big part of the reason that they are the king of casual games.
Not to say that they don’t have their downsides. Browsers games lack the power and size for many types of games. Skyrim could never have been built as a browser game, and even if it was no-one would want to wait the eight hours it took for that particular page.
But even if your end goal is to build the next Skyrim instead of the next Cookie Clicker you still might want to spend at least a little time playing with browser game programming. It’s a good learning experience and you might be surprised at just how much game you can fit into a small browser download.
The Rise of JavaScript And The War Against Flash
So we’ve decided to program a small game that can be inserted directly into a web page. Now how do we do that?
For years Flash was the most reliable way to include a game in a website. Flash is basically a program designed to run other programs and it let people enhance their websites with streaming video, animated menus and even entire games. It was hardly perfect and had definite issues with memory hogging and slowdown but it was very successful at letting people play online games without the normal mess of downloading and installing a separate program. They just visited a web page and Flash automatically loaded the game and started it up in the browser.
Today Flash is still one of, if not the most, popular way to build browser based games. Just visit a free gaming site like kongregate to see what I mean. Flash as far as the eye can see.
But in the last few years a new option for building browser games has arisen in the form of JavaScript.
JavaScript isn’t a new technology. It has been an important part of web browsers for a long long time. It offers a flexible scripting language that can interact directly with web pages, allowing programmers to build powerful interactive menus, perform efficient error checking and streamline page loading. Without JavaScript the Internet would be a much clunkier and user-unfriendly place.
But for all its power JavaScript was never really a good choice for game programming.
At least, not until a few years ago when a new HTML element called the “Canvas” was announced. The canvas is basically a big blank space that can be inserted into a web page and then controlled through JavaScript. A few lines of code is all it takes to fill a canvas with color or copy part of an image onto part of the canvas. And of course, if you repeatedly repaint the canvas you can create simple animations.
This was the last puzzle piece needed to build full JavaScript browser games. We can now use JavaScript to check for keyboard input, use JavaScript to simulate a game world and finally use JavaScript to draw that world to a canvas. And we can do all this using nothing but the browsers that people already own.
As a programmer, all you need in order to create one of these games is a simple text editor for writing your code and a browser for testing it in. No fancy tools required! In fact, that’s the main reason I chose JavaScript for this Let’s Program. Flash is a powerful tool but to really get the most out of it you need to buy some moderately expensive Adobe products.
So next week we’ll get this Let’s Program started by covering the basics of drawing on the HTML canvas.