Top 7 JavaScript Tools for Web Game Programming

by Jason Gilmore

Interested in building Web-based games? Check out these seven useful resources guaranteed to help you get started.

I consider myself really lucky in that the majority of my working days are spent doing something I truly enjoy: teaching others about Web development. However, like so many others involved in the IT industry, I've long secretly harbored another ambition: to be a game developer! Yet console- and PC-based video games are incredibly complex and expensive to produce,and have been for years. The Web, however, has leveled the playing field with a powerful array of development tools at your disposal for building engaging, scalable games.

If you're interested in experimenting with what will almost certainly be the most powerful gaming platform to date, I'll introduce you to seven promising solutions which can help you hit the ground running!

Web Game Tool #1: ImpactJS

Of the seven solutions introduced in this article, ImpactJS is undoubtedly the one which has me the most excited in terms of its ability to lower game development's technological barriers significantly. Created by Dominic Szablewski, this HTML- and JavaScript-based game engine comes complete with a Web-based level editor, support for assets, collisions, animations and a command-line tool for packaging your game ahead of its release.

If that feature list isn't enough to convince you, take a look at Biolab Disaster, ImpactJS' flagship demo. Built entirely using ImpactJS, and this action-packed side-scroller is sure to set your aspirations soaring. Check out this video which discusses key aspects of Biolab Disaster's development.

Few things in life are free, and neither is ImpactJS. However, it comes at a cost of only $99, and the BioLab demo alone should be enough cause to open the wallet.

Web Game Tool #2: LimeJS

LimeJS is another promising HTML5-based game framework (with a focus on mobile clients) offering several amazing demos, including one called Roundball. Presumably implemented with inspiration from Bejeweled, Roundball's touch-based gameplay on my iPhone 4 is simply flawless and is demonstrative of the ability to integrate a Web-based game into the iOS environment (Figure 1).

Tools for Web Game Programming
Figure 1. Adding Roundball to the Home Screen

Based on Google's Closure library (the same technology used to build Gmail and Google Docs), the Box2D physics library, and other mature technologies, LimeJS offers a really solid set of features, particularly for those of you interested in mobile Web-based game development.

Head over to the project's GitHub repository to learn more and check out the latest code.

Web Game Tool #3: CraftyJS

Licensed under the MIT and GPL licenses, CraftyJS is another open source game engine. It offers several examples which highlight different engine capabilities, recreating classic games such as Connect Four, Asteroids, and a simple RPG.

The CraftyJS tutorial focuses on the advantages of "component-based entity systems" within games development, documenting this concept in a really practical and easy-to-understand way. I suggest starting your CraftyJS exploration by checking out this tutorial, as it says a lot about the thought process put into the project.

Web Game Tool #4: Akihabara

Akihabara is a JavaScript game engine focused on the recreation of Web-based 8- and 16-bit "pixelated" games. Although several demos clearly demonstrate this engine's capabilities (see below), unfortunately, it seems this project is lacking the documentation and companion tutorials necessary for encouraging adoption.

The Akihabara home page links to several interesting-looking demos, including Tetris, Pacman and Guitar Hero reproductions. Be sure to heed the warning on the home page, using the Z key to start the games rather than the A key as the games themselves instruct.

Web Game Tool #5: Effect Games

Effect Games departs from the other solutions described here in that its game development tools are all hosted services. This might strike you as a wholly impractical solution--until you see the demos. In addition to the incredible Super Mario Bros. recreation and amazing platformer demo (complete with companion tutorial), you can browse the large list of games currently under public development.

Using a combination of Effect Games' object-oriented JavaScript framework and a series of Web-based tools, it's possible to create sophisticated games of any sort. The documentation and beginner's tutorial should be enough to get you started after signing up for a free developer account.

Web Game Tool #6: Node

Node.js is commonly defined as "an event-driven I/O framework for the V8 JavaScript engine." To define it less succinctly, it is a server-side JavaScript implementation useful for creating incredibly responsive network applications--like Web-based multiplayer games! To showcase the power of this amazing JavaScript framework, in 2010 Visnu Pitiyanuvath and Gerad Suyderhoud founded the Node.js Knockout, a 48-hour coding competition which resulted in some really amazing entries, several of which were game-specific. Of the game-related entries, in my opinion the most impressive was Scrabb.ly (now called Word2). Described by its creators as "massively multiplayer online Scrabble," Word2 attracted almost 100,000 unique visitors and placed over 2 million tiles in the month following its launch. See this fantastic blog entry written by team member Jacques Crocker which details the project's origin and development process.

Web Game Tool #7: OpenGameArt.org

No matter which of the above solutions you choose, even a simple game will logically consist of protagonists, enemies, terrain, weapons, and other objects. Likewise, you'll probably want to add some auditory realism by associating sounds with various actions. One great starting point for finding both art and sounds is OpenGameArt.org, a repository for video game assets freely available under a wide variety of licenses. As with most such volunteer repositories, the quality ranges from amazing to downright amateurish. For an example certainly falling into the former categorization, check out this impressive set of medieval icons.


Are you currently using one of the aforementioned solutions? Or do you have other suggestions which might be useful to readers? Tell us about your experiences in the comments!

About the Author

Jason Gilmore -- Contributing Editor, PHP -- is the founder of EasyPHPWebsites.com, and author of the popular book, "Easy PHP Websites with the Zend Framework". Jason is a cofounder and speaker chair of CodeMash, a nonprofit organization tasked with hosting an annual namesake developer's conference, and was a member of the 2008 MySQL Conference speaker selection board.

This article was originally published on Tuesday Jun 14th 2011
Mobile Site | Full Site