This post is intended to demonstrate the very simple and crude implementation of Snakes and Ladders game using HTML5. Recently, I started to dig deeper into HTML5. By the time I came to the canvas part, this game was one of the candidates which I wanted to try with. For those of you who have never heard of this game, here is a Wiki article about it.
Though this game is usually played as a dual player, the current implementation is a single player and is more intended to show the concepts used and the potential behind it. Before I actually start explaining the code and implementation, I would like to touch the background by explaining the HTML
Canvas element which is the heart of the game. I assume that everyone reading this article would have heard about HTML5 by now.
HTML5 is the successor of HTML4. HTML4 was standardized in 1997 and since then a lot has changed in the internet industry. Thus, there a demand for the next standardized version of HTML to improve the language and at the same time support the various multimedia blocks which have almost become regular to usage in web development. In general, HTML5 includes many syntactical features like
<canvas>, etc. We will be briefly going through
Canvas element before proceeding to its usage in Snakes & Ladders game.
canvas element isn’t supported in some older browsers, but is supported in Firefox 1.5 and later, Opera 9 and later, newer versions of Safari, Chrome, and Internet Explorer 9.
Using the Code
Well, let’s walk through the code to see the use of
<canvas> in developing the game.
I started with a simple HTML page which contains a
<title>Manas Bhardwaj's Snake & Ladder</title>
<canvas id="board" width="650" height="650">
var canvas = document.getElementById("board");
var context = canvas.getContext("2d");
In the first line, we retrieve the canvas DOM node using the
getElementById method. We can then access the drawing context using the
<canvas> creates a fixed size drawing surface that exposes one or more rendering contexts, which are used to create and manipulate the content shown. We’ll focus on the 2D rendering context.
var colorA = "white";
var colorB = "red";
var initRow = 1; var totalRows = 10; var initcolumn = 1; var totalColumns = 10;
var x = 0; var y = canvas.height - squareSize;
var columnNr = 1; var leftToRight = true;
for (var row = initRow; row <= totalRows; row++)
x = 0;
x = canvas.width - squareSize;
for (var column = initcolumn; column <= totalColumns; column++)
if (columnNr % 2 == 0)
context.fillStyle = colorA;
context.fillStyle = colorB;
context.fillRect(x, y, squareSize, squareSize);
squares[columnNr] = x.toString() + ',' + y.toString();
contextText.font = "15px tahoma";
contextText.fillStyle = "black";
contextText.fillText(columnNr, x, y + squareSize);
var x1, y1
x += squareSize;
x1 = x + (squareSize / 2);
x -= squareSize;
x1 = x - (squareSize / 2);
y1 = y - (squareSize / 2);
y -= squareSize;
leftToRight = !leftToRight;
Apart from the logic how I build the different squares and keep their co-ordinates for later use to plot the player moves, the import aspect we will see here is draw a rectangle.
Canvas only supports one primitive shape – rectangles. All other shapes must be created by combining one or more paths. It was at east handy for me as I did not have to do anything extra for that and could use the in-built functionality.
There are three functions that draw rectangles on the
fillRect(x,y,width,height): Draws a filled rectangle
strokeRect(x,y,width,height): Draws a rectangular outline
clearRect(x,y,width,height): Clears the specified area and makes it fully transparent.
var img = new Image();
img.onload = function ()
context.drawImage(img, 66, 23);
img.src = "Images/SnakeA.gif";
Image object or other
canvas element as a source. It isn’t possible to use images by simply providing a URL/path to them. Secondly, we draw the image on the canvas using the
I used two snakes and two ladders in my example to keep it simple. If a player falls on a ladder, he climbs up the ladder and thus does not have to cover the whole path. Against this, if a player falls on Snake’s mouth, he slips down to the tail. On the click of a button, I generate a random number between 1 and 6. The position of the player is changed based on his score and a new rectangle is drawn to show his new location.
var newMove = GenerateRandomNumber(6);
alert("You got : " + newMove);
_currentPos = _currentPos + newMove;
_currentPos = 46;
_currentPos = 79;
_currentPos = 29;
_currentPos = 2;
var coorintaes = squares[_currentPos];
coorintaes = coorintaes.split(',');
context.fillRect(coorintaes, coorintaes, squareSize, squareSize);
if (_currentPos == 100)
alert("Congratulations, you have won the game <img class="wp-smiley" alt=":)" src="http:
The post Snakes and Ladders – An attempt using HTML5 appeared first on Manas Bhardwaj's Stream.