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.
With the Internets 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 users 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
Lets 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>
<style>
#stageCanvas
{
background-color:#333333;
}
</style>
<!-- import the Easel library. Downloaded from:
http://easeljs.com/ -->
<script src=scripts/easel.js></script>
<script>
//EaselJS Stage instance that wraps the Canvas element
var stage;
var circle;
//radius of the circle Graphics that we will draw.
var CIRCLE_RADIUS = 10;
var circleXReset;
var bounds;
//initialize function, called when page loads.
function init()
{
//check and see if the canvas element is supported in
//the current browser
if(!(!!document.createElement(canvas).getContext))
{
var wrapper = document.getElementById(canvasWrapper);
wrapper.innerHTML = Your browser does not appear to support +the HTML5 Canvas element;
return;
}
//get a reference to the canvas element
var canvas = document.getElementById(stageCanvas);
//copy the canvas bounds to the bounds instance.
bounds = new Rectangle();
bounds.width = canvas.width;
bounds.height = canvas.height;
//pass the canvas element to the EaselJS Stage instance
stage = new Stage(canvas);
//Create an EaselJS Graphics element to create the
//commands to draw a circle
var g = new Graphics();
//stroke of 1 px
g.setStrokeStyle(1);
//Set the stroke color, using the EaselJS
g.beginStroke(Graphics.getRGB(255,255,255,.7));
//draw the circle
g.drawCircle(0,0, CIRCLE_RADIUS);
circle = new Shape(g);
//set the initial x position, and the reset position
circle.x = circleXReset = -CIRCLE_RADIUS;
//set the y position
circle.y = canvas.height / 2;
//add the circle to the stage.
stage.addChild(circle);
//tell the stage to render to the canvas
stage.update();
Ticker.setFPS(24);
Ticker.addListener(this);
}
//function called by the Tick instance at a set interval
function tick()
{
//check and see if the Shape has gone of the right
//of the stage.
if(circle.x > bounds.width)
{
//if it has, reset it.
circle.x = circleXReset;
}
//move the circle over 10 pixels
circle.x += 8;
//re-render the stage
stage.update();
}
</script>
</head>
<body onload=init()>
<div width=400 height=300 id=canvasWrapper>
<canvas width=400 height=300 id=stageCanvas></canvas>
</div>
</body>
</html>
To execute this sample script, follow the instructions given below:
- Copy this script and paste it into Notepad and rename it game.html
- Download the easel.js file and place it in the Scripts folder
- Run game.html in the browser
Over the last few years, games built for browsers have been deployed on laptops, tablets, mobiles or any other computing device. With HTML5, we have the true power of writing an application once and deploying it anywhere.
