Develop Multi-device Web Based Games with HTML5
The gaming design and development industry is growing exponentially. If you are interested in creating a Web based game, try out this HTML5 sample script.
W ith the Internet’s capabilities evolving at a fast pace and browsers now available in almost every handheld device, Web based games are common these days. A study suggests that users spend more time on Web based games than on traditional console games.
A Web game as the term suggests is an application that you can launch in your browser and play. There are several plugins available right now, which allow us to play these standard games and most popular Web browsers (like Chrome, Firefox and IE) support them. Currently, there has been an evolution from single player games to multi-player games across the Internet. A few examples are listed here: http://www.powersoccer.com http://www.miniclip.com/games/en/
How a Web based game is designed
There are three main stages in a Web based game: The presentation or UI Interpretation of the user’s actions Calculation of the results based on the above factors Any Web based game has to go through these stages to work well. These specifics may vary for a few games but are the important aspects to keep in mind before developing a game engine. In some games, users may be asked to repeat certain actions, so your script has to be made to interpret those actions to achieve specific results in the game.
Several requirements are involved in the development of a Web based game, such as: The game platform – HTML5, JavaScript, etc Plugins – ActiveX, Shockwave, etc Browser support – Internet Explorer, FireFox, Google Chrome, etc
HTML5
HTML5 has good support for lots of game frameworks, and with JavaScript support, it makes a great platform for game development. Table 1 specifies the function and technology used, along with the features.
EaselJS
EaselJS is a simple JavaScript library that makes working with HTML 5 Canvas very efficient. It provides solutions for working with graphics and interactivity with HTML5 Canvas. It also provides an API that is familiar to Flash developers, including a hierarchical display list and DOM Level 2 events. Source: http://www.createjs.com/EaselJS
Sample script
Let’s try to create a simple animation clip using EaselJS. The following is the code that will help to demonstrate the animation: <!DOCTYPE html> <html lang=”en”> <head>
<title>TITLE</title>