Using HTML5 and JavaScript Frameworks to Develop Online Games

Currently, Adobe Flash dominates online games, although with the advent of new standards this will most likely change. One sure example of this upcoming change is the rise in JavaScript and HTML5 game frameworks.

Using JavaScript along with HTML5 uses less system resources than Flash and work just as fluidly as Flash without the need for a plugin.

With the development of JavaScript/HTML5 Frameworks, along with more popular applications developed under this language and browsers that support these new features, online games are increasingly moving away from Flash.

The games developed in JavaScript are not only easy to program for web developers, but they also meet the demand of being deployed as a desktop, web and/or mobile application.

Here are three examples of JavaScript frameworks that can be used to create new games

• LimeJS
• Crafty
• Impact

LimeJS

LimeJS is a framework to develop HTML5 games quickly for all touch screens and modern browsers that support it. This framework is released under Apache license.

The framework is very well documented; but there are no many examples to help you learn how to create a game using HTML5 and JavaScript. However, through studying the documentation, we can begin to create our own games.

Something interesting about this framework is that it supports sockets. Sockets provides more capabilities in the games such as implementing a chat, multiplayer support real-time notifications.

LimeJS currently has the following dependencies: Python 2.6 or higher, Git, and finally Subversion or Git-svn, and if you want to use Closure (a JavaScript library created by Google, used in various applications such as Gmail or Docs) then Java is also required.

On their website you can find examples, documentation, guides and more, and although the page appears to have infrequent updates, there is an active community working through Google groups.

Crafty

Crafty is a free JavaScript game engine with the distinguishing feature of being 'Cross Browser compatible'. It lets you generate a code that will work on any browser, the creator says that even in the Internet Explorer 6.

Its syntax is very similar to jQuery, which is renowned for its simplicity and clarity. It also has a modular design that allows easy creation of reusable components and extensions.

The size of this engine (a simple. Js) is only 88.4 kb once compressed and minimized, which means it will not add any additional weight to your code.

Another feature of Crafty is that you can choose how to display graphics (DOM or Canvas) and switch from one to another very easily. It also allows simple management of sprite sheets to create animated sprites.

Crafty also includes a collision detection system. Finally, what I think is the most important feature, is that Crafty uses the paradigm Entity-Component. This means that instead of having to work with a vast inheritance of class’s hierarchy, each object of the game is an entity, and each piece of functionality is a component. So all you have to do to provide functionality to your entities is assign components.

Impact

Impact is a commercial engine, so you have to purchase a license before you can use, that works with most browsers that support HTML5 canvas, including iPhone, iPod Touch and iPhone.

Impact has good documentation, tutorials, and a really useful support system that can be accessed via the forums.

Impacts includes a long list of functionalities in the form of entities (objects within the game), physical features, animations, user input, collision detection, audio and even a full level editor.

Also, due to how the engine is built, using an object oriented model that allows us, in the most efficient way, to plug and play with new possibilities in our games.

The Level Editor Weltmeister is perhaps one of the most striking visual features of the engine. The level editor is actually a graphical interface that lets you create an entire stage of the game, from simple level design to the placement of objects and defining their mutual interactions.

Conclusion

Please keep in mind that LimeJS and Crafty are still in development, so even though they're free, they're not perfect. On the other hand, if you are interested in purchasing the Impact JavaScript Game Engine there are several tutorials that walk you through building a game.