Canvas Drag and Drop with Collision Detection

In this post I’ll cover the basics of implementing drag and drop with collision detection using the Canvas element and JavaScript. The end result will produce the following:

Drag and Drag shapes on the canvas

Each item on the canvas is represented by a rectangle.  When clicking inside the bounds of an rectangle the inner circle’s colour changes to grey to indicate the item is selected.  Release the button results in a mouse up event .  Between the mouse down and up events the item can be dragged and thus moved around the canvas.  When two objects collide they will be coloured red. This functionality has been implemented as follows. Continue reading “Canvas Drag and Drop with Collision Detection”

Advertisements

3 Step CSS Animation Tutorial

CSS3 includes the ability to animate elements using nothing more that pure CSS – no JavaScript or Flash required.  An animation is defined as the transition of an element moving from one state to another.  For example a simple square can be move from one position to another using CSS e.g.

CSS Animation illustration Continue reading “3 Step CSS Animation Tutorial”

Software Security: Education’s missing module

Security the missing module in education

I’m shortly due to reach my fifteenth year as a programmer within the software industry. During this time I have witnessed a significant increase in the number of viruses, malicious software and security holes found within any given piece of software. To protect us, software vendors issue security patches issued within software updates on a regular basis and hope we all apply these to avoid the pitfalls. This ship first, fix later approach has always seemed odd to me. It’s akin to locking the door of your house after the burglar has already visited, in the hope all of your neighbours will follow suite and remember to lock their houses too!

The computer security industry can be split into three sections: the White hats, Grey hats and Black hats. The White hats are our guardian angles, who spend their time finding and fixing security problems. The opposite of this is the ‘evil’ Black hats who attempt to expose and maliciously exploit security vulnerabilities in the goal taking our data or controlling our computers without our consent. And, in-between these two are the Grey hats, who like to prove they can hack; but without any real malicious intent. The individuals within each camp range from IT professional to passionate teenagers seeking a thrill. Although quite different they share a common tool-set. All of these tools are easy to access and complemented by a huge collection of tutorials. These include standalone utilities such as the port scanner ‘nmap’ to entire operating systems built for the sole purpose of security scanning/hacking, such as ‘Back Track 5’. Another similarity shared by these individuals is they share a common target. Your Software!

Flaws in software more often than not reveal security vulnerabilities. These vulnerabilities can lead to leaked data, or, even the bad guys having control of your computer.   This leads me onto the main point and a question: do software programmers/developers consider security when applying their craft? In my experience the answer in, ‘No!’. The fault of which does not solely lie with the programmer.  I see no evidence from the Schools, Collages and Universities that the subject is covered sufficiently by the relevant courses.  Take for example, a web development course; are the students being taught about SQL injection, or, the importance of software updates. More often than not I see web developers creating beautiful sites in Joomla or WordPress, or, any other CMS, and at the end the site simply gets hosted and left for the client to manage. I ask the question: whose’s going to update the core CMS, or, the plugins used after a security vulnerability has been found. Not the web developer, as they have been paid and moved on! This is a typical example of how the industry is disjointed. And, I’m not picking out web developers: further examples could easily be given involving Java/C/Ruby developers, or, companies that deliver bespoke systems.

The problem is both an educational one in the academic sense and a re-education of users and clients so they appreciate and demand security guarantees. Imagine if you are faced with these two quotes, the first, “I can provide you with a website for $400”. The other said, “I can provide you with a website for $400, plus $50 per year to monitor and maintain security patches”. What option would you pick? I fear at the minute most would choose the first option; thus, the need for re-education, re-education, re-education.

So how would one go about fixing this? I’d love to see security knowledge being taught  alongside every web development and software development course. I’d also like to see a web development/programming governing body, ensuring our work is up to scratch. This governing body would be akin to the building trade’s regulators; ensuring and enforcing we deliver consistent and quality products to our customers. Alongside this we should expect our work to be appreciated as a craft and educate future clients that our products need maintenance which will incur maintenance costs.

Is your JavaScript code top quality?

How do you measure code quality? This question is harder than you think to answer! The topic of code quality is quite young. In fact the topic of writing code is young in comparison to other crafts; such as carpentry or engineering. We therefore struggle to agree what is good or bad code. And, more often than not we disagree about trivial points such as whether braces should start at the end of the line or, on the next line. Although these points are fun to debate they mute the real point and should be hidden in the religious wars drawer with the vi vs. emacs argument!

Programmers within any team have quite different opinions on what makes code quality. One major point they generally agree on is that when writing quality code you must ensure the team agrees to a coding standard. Ensuring every line of code has a consistent implementation is paramount. Let’s look at an example.

Inconsistent code

function dr() {
	c = d.getElementById('x');
	if(c.getContext)
	  {
	  t = c.getContext('2d');
		b = c.height / 80; db();
	dp();
		p = new Image(); p.src = 'pieces.png'; p.onload = dps;
          c.addEventListener('click', bc, false); }
	else{ alert("Canvas not supported!"); 
}}

Consistent code

function draw()
{
	// Main entry point got the HTML5 chess board example
	canvas = document.getElementById('chess');

	// Canvas supported?
	if(canvas.getContext)
	{
		ctx = canvas.getContext('2d');

		// Calculdate the precise block size
		BLOCK_SIZE = canvas.height / NUMBER_OF_ROWS;
		
		// Draw the background
		drawBoard();

		defaultPositions();
		
		// Draw pieces
		pieces = new Image();
		pieces.src = 'pieces.png';
		pieces.onload = drawPieces;

		canvas.addEventListener('click', board_click, false);
	}
	else
	{
		alert("Canvas not supported!");
	}
}
The two examples above perform the same function and the code is exactly the same, except for naming and layout. They are equal in speed and performance and result. However, from a code quality perspective these are world’s apart.

Assuming we all agree that quality matters, how do we enforce it? Introducing JSLint. JSLint is a JavaScript code quality tool. The tool is written by Douglas Crockford: a member of the JavaScript royal family. JSLint takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source. The problem is not necessarily a syntax error, although it often is. JSLint looks at some style conventions as well as structural problems. It does not prove that your program is correct. It just provides another set of eyes to help spot problems.

Using JSLint

JavaScript can be copied-and-pasted directly into JSLint.

On pasting your code into JSLint simply press the “JSLint” button to submit. The site will then analyse your code and present the results:

Some of the rules applied can be tweaked to match your preference:

jslint online code quality options

On minor annoyance with using the on-line tool is that it can be time consuming. It is more than likely that you’ll go though several iterations of copy-paste-analyse cycle before your code conforms to the rule-set. Thankfully the tool can be used with IDEs such as Aptana.

Integrating JSLint with Aptana

Aptana is an open source IDE which lets you develop and test your entire web application within a single environment. It fully supports JavaScript; however, by default JSLint validation included but not enabled. To enable JSLint first select the option “Window->Preferences” e.g.

Enabling jslint in Aptana

Within the window that appears select the option “Aptana Studio->Validation” from the left-hand list. Then select the “JavaScript” option from the menu on the left within the ‘Validation’ section e.g.:

Code quality with Aptana

To enable JSLint simply click the ticks within the “Build” and “Reconcile” column within the validator’s list. Confirm by pressing the OK button. The IDE will then begin to report feedback from JSLint. Lines which are flagged as warnings by JSLint are decorated with a warning symbol on the left hand margin of Aptana e.g.

Aptana code quality results

The rule-set can be tweaked using the same settings as the on-line tool. Modification of settings is applied by including a formatted comment block at the top of the JavaScript file e.g.

Code quality option within Aptana with JSLint

Further information on JSLint can be found on the official site JSLint. Please note that JSLint’s official tag line is: Warning: JSLint will hurt your feelings! Did it?

HTML 5 Canvas – Chess board

My next HTML5 project to take advantage of the canvas element will attempt to draw the traditional chess board. The pieces will then be drawn from a sprite map. Finally, one’s intention is to implement a mouse-click handler, so you can click and move the pieces. This will not be a fully functional chess game, my aim is to prove the concept and explain the steps involved to produce a prototype. One day I may return to the project to implement the full rule-set; however, time-scales prevent me from achieving this at the moment. Let’s start by looking at the end product and then we will look at the source code.

html5 canvas chess board

The HTML Source

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>HTML5 Canvas - Chess board</title>
		<script src='chess_board.js'></script>
	</head>
	<body onload='draw();'>
		<div>
			<canvas id="chess" width="800" height="800"></canvas>
		</div>
	</body>
</html>
The HTML is straight forward. The items of interest are the canvas element and the ‘onload’ event for the body. For those who are not familiar with HTML let me explain how we draw the chess board and pieces onto the canvas. When any HTML page loads the browser will run the JavaScript code attached to the onload event of the body tag e.g.
	<body onload='draw();'>
In order to understand how the ‘draw’ function works we need to understand how the browsers locates it. The browser will load any JavaScript code included in-line or within any script tags prior to displaying the page to the user e.g.
	<script src='chess_board.js'></script>
Therefore, the content of the script “chess_board.js” will be loaded, and thus, the function called ‘draw’ will be available. If you were to look inside the aforementioned script you will be able to see the code e.g.
function draw()
{
	// Main entry point got the HTML5 chess board example
	canvas = document.getElementById('chess');

	// Canvas supported?
	if(canvas.getContext)
	{
		ctx = canvas.getContext('2d');

		// Calculdate the precise block size
		BLOCK_SIZE = canvas.height / NUMBER_OF_ROWS;
		
		// Draw the background
		drawBoard();

		defaultPositions();
		
		// Draw pieces
		pieces = new Image();
		pieces.src = 'pieces.png';
		pieces.onload = drawPieces;

		canvas.addEventListener('click', board_click, false);
	}
	else
	{
		alert("Canvas not supported!");
	}
}

The content of the function is quite readable and the code is ordered in logic steps. The first step is to obtain a handle to the canvas element. If the canvas element is found we then proceed to ensure the browser supports the canvas. Assuming support is implemented the second step is to calculate the dimensions for the height and width of one block within the chess board e.g.
    // Calculdate the precise block size
    BLOCK_SIZE = canvas.height / NUMBER_OF_ROWS;
The next step is to draw the board. The code for this is within the function ‘drawBoard’. This function contains the following:
function drawBoard()
{	
	for(iRowCounter = 0; iRowCounter < NUMBER_OF_ROWS; iRowCounter++)
	{
		drawRow(iRowCounter);
	}	
	
	// Draw outline
	ctx.lineWidth = 3;
	ctx.strokeRect(0, 0, NUMBER_OF_ROWS * BLOCK_SIZE, NUMBER_OF_COLS * BLOCK_SIZE);	
}
The chess board is 8 rows by 8 columns. The source above iterates through each of the 8 rows – top to bottom. Each row is handle by the function ‘drawRow’:
function drawRow(iRowCounter)
{
	// Draw 8 block left to right
	for(iBlockCounter = 0; iBlockCounter < NUMBER_OF_ROWS; iBlockCounter++)
	{
		drawBlock(iRowCounter, iBlockCounter);
	}
}
Each time the function is called it draws 8 blocks left-to-right

chess-piece-drawing-the-board

Each block is drawn within the function ‘drawBlock’:
function drawBlock(iRowCounter, iBlockCounter)
{	
	// Set the background
	ctx.fillStyle = getBlockColour(iRowCounter, iBlockCounter);
	
	// Draw rectangle for the background
	ctx.fillRect(iRowCounter * BLOCK_SIZE, iBlockCounter * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);

	ctx.stroke();	
}
Within this function the colour of the block is set and the rectangle that represents one block is drawn. The function to calculate the colour follows:
function getBlockColour(iRowCounter, iBlockCounter)
{
	var cStartColour;
	
	// Alternate the block colour
	if(iRowCounter % 2)
		cStartColour = (iBlockCounter % 2?BLOCK_COLOUR_1:BLOCK_COLOUR_2);
	else
		cStartColour = (iBlockCounter % 2?BLOCK_COLOUR_2:BLOCK_COLOUR_1);
		
	return cStartColour;
}
The function uses JavaScript’s Mod operator to determine the colour. Rows which have an odd number colours the first block using the darker colour and then toggles between the light and dark for each subsequent block. Even rows start on the lighter colour. That concludes the logic to draw the games board.


The next step within the ‘draw’ function deals with drawing the pieces. This is achieved by the following lines:

	defaultPositions();
		
	// Draw pieces
	pieces = new Image();
	pieces.src = 'pieces.png';
	pieces.onload = drawPieces;

	canvas.addEventListener('click', board_click, false);

The function ‘defaultPositions’ configures a data-structure that represents the games state:
function defaultPositions()
{
	json = 
	{
		"white": 
		[
			{
				"piece": PIECE_CASTLE,
				"row": 0,
				"col": 0,
				"status": IN_PLAY
			},
			{
				"piece": PIECE_ROUKE,
				"row": 0,
				"col": 1,
				"status": IN_PLAY
			},
			{
				"piece": PIECE_BISHOP,
				"row": 0,
				"col": 2,
				"status": IN_PLAY
			},
			{
				"piece": PIECE_KING,
				"row": 0,
				"col": 3,
				"status": IN_PLAY
			},	
			{
				"piece": PIECE_QUEEN,
				"row": 0,
				"col": 4,
				"status": IN_PLAY
			},
			{
				"piece": PIECE_BISHOP,
				"row": 0,
				"col": 5,
				"status": IN_PLAY
			},
			{
				"piece": PIECE_ROUKE,
				"row": 0,
				"col": 6,
				"status": IN_PLAY
			},
			{
				"piece": PIECE_CASTLE,
				"row": 0,
				"col": 7,
				"status": IN_PLAY
			},
			{
				"piece": PIECE_PAWN,
				"row": 1,
				"col": 0,
				"status": IN_PLAY
			},
			{
				"piece": PIECE_PAWN,
				"row": 1,
				"col": 1,
				"status": IN_PLAY
			},
			{
				"piece": PIECE_PAWN,
				"row": 1,
				"col": 2,
				"status": IN_PLAY
			},
			{
				"piece": PIECE_PAWN,
				"row": 1,
				"col": 3,
				"status": IN_PLAY
			},	
			{
				"piece": PIECE_PAWN,
				"row": 1,
				"col": 4,
				"status": IN_PLAY
			},
			{
				"piece": PIECE_PAWN,
				"row": 1,
				"col": 5,
				"status": IN_PLAY
			},
			{
				"piece": PIECE_PAWN,
				"row": 1,
				"col": 6,
				"status": IN_PLAY
			},
			{
				"piece": PIECE_PAWN,
				"row": 1,
				"col": 7,
				"status": IN_PLAY
			}
		],
		"black": 
		[
			{
				"piece": PIECE_CASTLE,
				"row": 7,
				"col": 0,
				"status": IN_PLAY
			},
			{
				"piece": PIECE_ROUKE,
				"row": 7,
				"col": 1,
				"status": IN_PLAY
			},
			{
				"piece": PIECE_BISHOP,
				"row": 7,
				"col": 2,
				"status": IN_PLAY
			},
			{
				"piece": PIECE_KING,
				"row": 7,
				"col": 3,
				"status": IN_PLAY
			},	
			{
				"piece": PIECE_QUEEN,
				"row": 7,
				"col": 4,
				"status": IN_PLAY
			},
			{
				"piece": PIECE_BISHOP,
				"row": 7,
				"col": 5,
				"status": IN_PLAY
			},
			{
				"piece": PIECE_ROUKE,
				"row": 7,
				"col": 6,
				"status": IN_PLAY
			},
			{
				"piece": PIECE_CASTLE,
				"row": 7,
				"col": 7,
				"status": IN_PLAY
			},
			{
				"piece": PIECE_PAWN,
				"row": 6,
				"col": 0,
				"status": IN_PLAY
			},
			{
				"piece": PIECE_PAWN,
				"row": 6,
				"col": 1,
				"status": IN_PLAY
			},
			{
				"piece": PIECE_PAWN,
				"row": 6,
				"col": 2,
				"status": IN_PLAY
			},
			{
				"piece": PIECE_PAWN,
				"row": 6,
				"col": 3,
				"status": IN_PLAY
			},	
			{
				"piece": PIECE_PAWN,
				"row": 6,
				"col": 4,
				"status": IN_PLAY
			},
			{
				"piece": PIECE_PAWN,
				"row": 6,
				"col": 5,
				"status": IN_PLAY
			},
			{
				"piece": PIECE_PAWN,
				"row": 6,
				"col": 6,
				"status": IN_PLAY
			},
			{
				"piece": PIECE_PAWN,
				"row": 6,
				"col": 7,
				"status": IN_PLAY
			}
		]		
	};
}
The data-structure uses JavaScript object notation (JSON) to define each team and each piece within the teams. The extract below shows the properties assigned to each piece. These are the piece’s identity, its location and the game state of the piece – whether it is in play or not:
{
	"piece": PIECE_CASTLE,
	"row": 0,
	"col": 0,
	"status": IN_PLAY
}
Following the configuration of the game state data-structure an image containing the chess pieces is loaded:
	// Draw pieces
	pieces = new Image();
	pieces.src = 'pieces.png';
This image includes each piece:

Chess pieces

Each piece occupies a 100px by 100px square with a transparent background. The order of the pieces is significant: its position relates to the piece identity used in the game state data-structure. These constants are declared at the top of the JavaScript file:
var PIECE_PAWN = 0,
PIECE_CASTLE = 1,
PIECE_ROUKE = 2,
PIECE_BISHOP = 3,
PIECE_QUEEN = 4,
PIECE_KING = 5;
These constants are used to locate the correct piece from the image. The image part is then drawn onto the canvas in the position stored within the column and row attribute of the piece. The logic to draw each piece is performed after the image containing the pieces is loaded. This is achieved by the followed event:
pieces.onload = drawPieces;
This line instructs the browser to call the ‘drawPieces’ function once the image resource has loaded. It contains the following:
function drawPieces()
{
	drawTeamOfPieces(json.black, true);
	drawTeamOfPieces(json.white, false);
}
The logic for drawing both teams is identical. Thus, this function does nothing more than call the ‘drawTeamOfPieces’ function for each team. This function accepts two parameters. These are the data-structure holding the team information, followed by a boolean value to indicate which team the data-structure relates to. The function contains the following:
function drawTeamOfPieces(teamOfPieces, bBlackTeam)
{
	var iPieceCounter;

	// Loop through each piece and draw it on the canvas	
	for (iPieceCounter = 0; iPieceCounter < teamOfPieces.length; iPieceCounter++) 
	{	
		drawPiece(teamOfPieces[iPieceCounter], bBlackTeam);
	}	
}
We loop around each piece for the given team and call the ‘drawPiece’ function for each. This function also accepts two parameters; the piece identity and the same boolean flag passed into the outer function as discussed above. The ‘drawPiece’ function contains the following:
function drawPiece(curPiece, bBlackTeam)
{
	var imageCoords = getImageCoords(curPiece.piece, bBlackTeam)
		
	// Draw the piece onto the canvas
	ctx.drawImage(pieces, 
		imageCoords.x, imageCoords.y, BLOCK_SIZE, BLOCK_SIZE,
		curPiece.col * BLOCK_SIZE, curPiece.row * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
					
}
To draw any given piece we need to perform two actions. The first is to obtain the coordinates of the piece within the sprite image map (which 100px by 100px tile do we need). The second step is to use these coordinates to draw the correct piece onto the board in the correct position. The coordinates for the source image (the chess piece) are calculated within the function called ‘getImageCoords’. This accepts the same two parameters as this ‘drawPiece’ function: the identity and team flag. The ‘getImageCoords’ function contains the following:
function getImageCoords(pieceCode, bBlackTeam)
{
	var imageCoords = 
	{
		"x": pieceCode * BLOCK_SIZE,
		"y": (bBlackTeam?0:BLOCK_SIZE)
	}; 
	
	return imageCoords;
}
The x pixel position within the image sprite map for any give piece can be obtained using the pieces identity. As mentioned earlier the order in which the chess pieces are drawn (from left-to-right) within the spite map is significant. The x coordinate for any piece is determine by multiplying the piece’s identity with the BLOCK_SIZE variable (100 pixels). The y pixel location is governed by the team the piece belongs too. The y position of all of the black pieces is 0 and the white pieces is the BLOCK_SIZE variable (100 pixels). This is obtained used the ternary operator (bBlackTeam?0:BLOCK_SIZE). Both of these values are then stored in a data-structure which is returned to the calling interface. The coordinates within the data-structure are then used to draw the image onto the canvas:

	// Draw the piece onto the canvas
	ctx.drawImage(pieces, 
		imageCoords.x, imageCoords.y, BLOCK_SIZE, BLOCK_SIZE,
		curPiece.col * BLOCK_SIZE, curPiece.row * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
					
To draw the piece onto the canvas we use the in-built canvas function ‘drawImage’. This accepts several parameters. The first parameter is the image source – in this case, this is the image containing all of the chess pieces. The next four parameters relate to the source image (parameter one). They represent the portion of the source image to draw onto the canvas. In our case we use the coordinates returned from ‘getImageCoords’ function as the x and y parameters, along with the height and width which are both set to the BLOCK_SIZE variable (100px). The final four parameters relate to the location (x,y) and size (width, height) that will be used to draw the current piece. An illustration of this follows:

chess-piece-drawing-a-piece

On completion of the ‘drawPieces’ function we are ready to start the game! At this point I originally planned on stopping development of this post; however, I was intrigued in how one would handle the user piece selection and movement. I therefore decided to implement the click and move logic for the pawn.
canvas.addEventListener('click', board_click, false);
The eagle-eyed of you may have noticed I skipped over the line above which is present in the main ‘draw’ function. This instructs the browser to monitor the ‘click’ action of the canvas and when detected calls the function ‘board_click’. This allow us to react to every users click. This includes the following:
function board_click(ev) 
{
	var x = ev.clientX - canvas.offsetLeft;
	var y = ev.clientY - canvas.offsetTop;

	var clickedBlock = screenToBlock(x, y);
	
	if(selectedPiece == null)
	{
		checkIfPieceClicked(clickedBlock);
	}
	else
	{
		processMove(clickedBlock);
	}
}
<div>This function controls the game's state.  A player can do one of two things at anyone time.  They can either choose a piece to move, or, choose a target square that the selected piece should be move too.  These actions must be done serially.  Thus, when the games first starts the expected action is for a player to select a chess piece.  This state is controlled by the global variable 'selectedPiece'.  A value of null means that no piece has been selected.  In this case the 'checkIfPieceClicked' function will be called.</div>

function checkIfPieceClicked(clickedBlock)
{
	var pieceAtBlock = getPieceAtBlock(clickedBlock);
	
	if (pieceAtBlock !== null)
	{
		selectPiece(pieceAtBlock);
	}
}
This function determines whether a piece is present within the block that the user has clicked. The logic for this click detection is contained within the ‘getPieceAtBlock’ function:
function getPieceAtBlock(clickedBlock)
{
	var team = (currentTurn === BLACK_TEAM ? json.black:json.white);

	return getPieceAtBlockForTeam(team, clickedBlock);
}
This function simply determines the correct data-structure for the team whose turn it is and passed this, along with the clickBlock to the function ‘getPieceAtBlockForTeam’:
function getPieceAtBlockForTeam(teamOfPieces, clickedBlock)
{
	var curPiece = null,
		iPieceCounter = 0,
		pieceAtBlock = null;
	
	for (iPieceCounter = 0; iPieceCounter < teamOfPieces.length; iPieceCounter++) 
	{
		curPiece = teamOfPieces[iPieceCounter];
		
		if (curPiece.status === IN_PLAY &&
			curPiece.col === clickedBlock.col &&
			curPiece.row === clickedBlock.row)
		{
			curPiece.position = iPieceCounter;
			
			pieceAtBlock = curPiece;
			iPieceCounter = teamOfPieces.length;
		}
	}
	
	return pieceAtBlock;
}
This function contains the logic required to deduce whether the user has clicked a piece. The pieces within the data-structure are assessed one-by-one to determine whether they are within the clicked block (column and row match that of the clickedBlock variable) and the piece is still in play. If a piece matches these conditions it is stored and returned to the calling interface. The calling interface in this scenario is the function ‘checkIfPieceClicked’ as shown above. This function then passes the return value (if it is not null) to the ‘selectPiece’ function:
function selectPiece(pieceAtBlock)
{
	// Draw outline
	ctx.lineWidth = SELECT_LINE_WIDTH;
	ctx.strokeStyle = HIGHLIGHT_COLOUR;
	ctx.strokeRect((pieceAtBlock.col * BLOCK_SIZE) + SELECT_LINE_WIDTH,
		(pieceAtBlock.row * BLOCK_SIZE) + SELECT_LINE_WIDTH, 
		BLOCK_SIZE - (SELECT_LINE_WIDTH * 2), 
		BLOCK_SIZE - (SELECT_LINE_WIDTH * 2));
	
	selectedPiece = pieceAtBlock;
}
This function draws a red outline within the clicked block e.g.

selected chess piece

After the outline has been applied the selected block is stored in the global variable ‘selectedPiece’.

This changes the logic within ‘board_click’, resulting in the function called ‘processMove’ being called when the user next clicks the board.
function processMove(clickedBlock)
{
	var pieceAtBlock = getPieceAtBlock(clickedBlock),
		enemyPiece = blockOccupiedByEnemy(clickedBlock);
	
	if (pieceAtBlock !== null)
	{
		removeSelection(selectedPiece);
		checkIfPieceClicked(clickedBlock);			
	}
	else if (canSelectedMoveToBlock(selectedPiece, clickedBlock, enemyPiece) === true)
	{
		movePiece(clickedBlock, enemyPiece);
	}
}
The function can either do one of two things. The first check determines whether the user has clicked an alternate piece, indicating they wish to move a difference piece. On detection of this the function simply calls the ‘removeSelection’ function followed by the ‘checkIfPieceClicked’ function. Called in succession these simply switch the selected piece. The second logic clause checks whether the selected piece can legally move to the intended position. This function contains the following:
function canSelectedMoveToBlock(selectedPiece, clickedBlock, enemyPiece)
{
	var bCanMove = false;
	
	switch (selectedPiece.piece)
	{
		case PIECE_PAWN:
		
			bCanMove = canPawnMoveToBlock(selectedPiece, clickedBlock, enemyPiece);	
			
		break;
		
		case PIECE_CASTLE:
			
			// TODO
			
		break;
		
		case PIECE_ROUKE:
		
			// TODO
			
		break;
		
		case PIECE_BISHOP:

			// TODO
			
		break;
		
		case PIECE_QUEEN:
		
			// TODO
				
		break;
		
		case PIECE_KING:
		
			// TODO
			
		break;
	}

	return bCanMove;

}
The function above uses the switch statement to determine which piece is in-play. This code only deals with the pawn and the logic is within the function called ‘canSelectedMoveToBlock’:
function canPawnMoveToBlock(selectedPiece, clickedBlock, enemyPiece)
{
	var iRowToMoveTo = (currentTurn === WHITE_TEAM ? selectedPiece.row + 1:selectedPiece.row - 1),
		bAdjacentEnemy = (clickedBlock.col === selectedPiece.col - 1 ||
					clickedBlock.col === selectedPiece.col + 1) &&
					enemyPiece !== null,
		bNextRowEmpty = (clickedBlock.col === selectedPiece.col &&
					blockOccupied(clickedBlock) === false);
					
	return clickedBlock.row === iRowToMoveTo &&
			(bNextRowEmpty === true || bAdjacentEnemy === true);
}
The logic above is crude and only permits the pawn to move one block forward, or one block in a diagonal direction (if the opposing team occupies the block). This logic does omit to cater for a few of the legal moves for the pawn! Feel free to complete the logic.

Assuming the move is legal the ‘movePiece’ function will be called:
function movePiece(clickedBlock, enemyPiece)
{
	// Clear the block in the original position
	drawBlock(selectedPiece.col, selectedPiece.row);
	
	var team = (currentTurn === WHITE_TEAM ? json.white:json.black);
	var opposite = (currentTurn !== WHITE_TEAM ? json.white:json.black);

	team[selectedPiece.position].col = clickedBlock.col;
	team[selectedPiece.position].row = clickedBlock.row;
	
	if (enemyPiece !== null)
	{
		// Clear the piece your about to take
		drawBlock(enemyPiece.col, enemyPiece.row);	
		opposite[enemyPiece.position].status = TAKEN;
	}
	
	// Draw the piece in the new position
	drawPiece(selectedPiece, (currentTurn === BLACK_TEAM));				
	
	currentTurn = (currentTurn === WHITE_TEAM ? BLACK_TEAM:WHITE_TEAM);
	
	selectedPiece = null;
}
This function performs the movement of a chess piece. It first clears the current block, by calling the ‘drawBlock’ function. It then updates the piece’s properties within the data-structure. The penultimate step is to check whether the target block is occupied by the opposing team. If so, the block is cleared and the status of the opposing teams piece is updated to TAKEN. Finally the moving chess piece is drawn in the new location and the turn variable is switched.

That concludes one’s experiment with my Chess board. I hope this helps someone out there. All the code above may be taken and used for anything – credit not required. Although, it would be nice to know. A working version of this project can be viewed here. The source code for this project can be obtained from my Git Hub repository here