×
Namespaces

Variants
Actions
Revision as of 02:16, 13 August 2012 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

HTML5 Canvas example - Noughts and Crosses game

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Article
Created: Maveric (14 Dec 2010)
Last edited: hamishwillee (13 Aug 2012)

Contents

Introduction

This is a variation of a successful and simple game concept called Noughts & Crosses, also known as "Tic-Tac-Toe" game. It is most known as a two player game on a 3x3 grid with the other player representating the "0" (Zero/Nought) and the other playing the "X" (Cross). As a computer game the other player is usually simply randomized move by the CPU, carrying the role of the other human player. The idea of the game is to form a full line of either "X"es or "0"es. Who ever gets a full line to any direction first is considered as the winner.

Prerequisites

  • Any code editor of your choice
  • A HTML5 supported web browser (like e.g. Google Chrome)

Example code

The example code is put into one html file with separation to a little bit of CSS and HTML, and the actual game as JavaScript code. The sections are presented as follows.

We will start the html part with the "html" tag, nothing more is needed to define html by HTML5 standardization.

<html>
<head>
<title>HTML5 canvas example - Noughts & Crosses game</title>

Here we set some simple CSS for the game board.

<style>
canvas{
margin:1px;
padding:0px;
border:#333 solid;
}
.label {
font-weight:bold;
}
</style>

The actual game JavaScript part starts here.

	<script type="text/javascript"> 
 
var context; //referral to canvas context
var mouse = {x:-100, y:-100};
var circle = Math.PI * 2
 
var h = 320;
var w = 320;
var square_X = 1;
var square_Y = 1;
var game_board_grid;
var playerwins = 0;
var computerwins = 0;
 
function block(x,y,player) {
 
this.x = x;
this.y = y;
this.player = player;
 
}
 
function doCalc()
 
{
if(mouse.x < (w/3)*1) square_X = 1
else if(mouse.x < (w/3)*2) square_X = 2
else if(mouse.x < (w/3)*3) square_X = 3;
 
if(mouse.y < (h/3)*1) square_Y = 1
else if(mouse.y < (h/3)*2) square_Y = 2
else if(mouse.y < (h/3)*3) square_Y = 3;
 
}
 
 
function $(id) {
 
return document.getElementById(id);
 
}
 
function init() {
 
//2D array for the game_board_grid
if(game_board_grid != undefined)
game_board_grid.length = 0;
game_board_grid = new Array(3);
 
for(var i=0;i<3;i++) {
game_board_grid[i] = new Array(3);
for(var j=0;j<3;j++) {
game_board_grid[i][j] = new block((w/3)*j,(h/3)*i,'C');
}
}
 
context = $('canvas').getContext('2d');
context.fillStyle = "#CCF";
context.fillRect(0,0,w,h);
createGameBoard();
_clock();
 
}
 
 
 
function createGameBoard() {
 
context.fillStyle = "#330";
context.fillRect(w/3,0,2,w);
context.fillRect((w/3)*2,0,2,w);
context.fillRect(0,h/3,h,2);
context.fillRect(0,(h/3)*2,h,2);
}
 
 
 
function drawZeroForMovement() {
 
context.fillStyle = "#FF0";
context.beginPath();
context.arc(mouse.x, mouse.y, 30, 0, circle, true);
context.closePath();
context.fill();
}
 
function display_X(x,y) {
 
context.strokeStyle = "#666";
context.lineWidth = 5;
context.moveTo(x,y);
context.lineTo(x+w/3,y+h/3);
context.moveTo(x,y+h/3);
context.lineTo(x+w/3,y);
context.stroke();
}
 
function display_0(x,y) {
 
context.fillStyle = "#300";
context.beginPath();
context.arc(x+(w/3)/2, y+(h/3)/2, 50, 0, circle, true);
context.closePath();
context.fill();
 
}
 
function _clock() {
 
doCalc();
 
document.onmousemove = function(e) {
mouse.x = e.pageX;
mouse.y = e.pageY;
}
 
window.setTimeout('_clock()', 1000/50); //50 frames per second
 
}
 
function play() {
 
doCalc();
if(game_board_grid[square_Y-1][square_X-1].player == 'C') { //this square has not been used
game_board_grid[square_Y-1][square_X-1].player = '0';
display_0(game_board_grid[square_Y-1][square_X-1].x,game_board_grid[square_Y-1][square_X-1].y);
 
} else { //Used square
return false;
}
 
var won = false;
 
//Player 0 check for possible win condition
 
if(game_board_grid[0][0].player == '0' && game_board_grid[0][1].player == '0' && game_board_grid[0][2].player == '0') {
alert("You win!");
won = true;
init();
 
} else if(game_board_grid[1][0].player == '0' && game_board_grid[1][1].player == '0' && game_board_grid[1][2].player == '0') {
alert("Player wins");
won = true;
init();
 
} else if(game_board_grid[2][0].player == '0' && game_board_grid[2][1].player == '0' && game_board_grid[2][2].player == '0') {
alert("Player wins");
won = true;
init();
 
} else if(game_board_grid[0][0].player == '0' && game_board_grid[1][0].player == '0' && game_board_grid[2][0].player == '0') {
alert("Player wins");
won = true;
init();
 
} else if(game_board_grid[0][1].player == '0' && game_board_grid[1][1].player == '0' && game_board_grid[2][1].player == '0') {
 
alert("Player wins");
won = true;
init();
 
} else if(game_board_grid[0][2].player == '0' && game_board_grid[1][2].player == '0' && game_board_grid[2][2].player == '0') {
alert("Player wins");
won = true;
init();
 
} else if(game_board_grid[0][0].player == '0' && game_board_grid[1][1].player == '0' && game_board_grid[2][2].player == '0') {
alert("Player wins");
won = true;
init();
 
} else if(game_board_grid[2][0].player == '0' && game_board_grid[1][1].player == '0' && game_board_grid[0][2].player == '0') {
alert("Player wins");
won = true;
init();
 
}
 
if(!won) {
//Game check if nobody wins this game
var finnished = true;
for(i=0;i<3;i++) {
for(j=0;j<3;j++) {
if(game_board_grid[i][j].player == 'C')
thru = false;
}
}
 
if(thru) {
alert("House wins this game! =)");
init();
} else { //Computer makes a random move
 
var picked = false;
 
while(!picked) {
 
var ran1=Math.floor(Math.random()*3);
var ran2=Math.floor(Math.random()*3);
 
if(game_board_grid[ran1][ran2].player == 'C') {
display_X(game_board_grid[ran1][ran2].x,game_board_grid[ran1][ran2].y);
game_board_grid[ran1][ran2].player='X';
picked = true;
}
}
}
 
// Check if X wins
 
if(game_board_grid[0][0].player == 'X' && game_board_grid[0][1].player == 'X' && game_board_grid[0][2].player == 'X') {
alert("Computer win!");
computerwins=computerwins+1;
init();
 
} else if(game_board_grid[1][0].player == 'X' && game_board_grid[1][1].player == 'X' && game_board_grid[1][2].player == 'X') {
alert("Computer wins");
computerwins=computerwins+1;
init();
 
} else if(game_board_grid[2][0].player == 'X' && game_board_grid[2][1].player == 'X' && game_board_grid[2][2].player == 'X') {
alert("Computer wins");
computerwins=computerwins+1;
init();
 
} else if(game_board_grid[0][0].player == 'X' && game_board_grid[1][0].player == 'X' && game_board_grid[2][0].player == 'X') {
alert("Computer wins");
computerwins=computerwins+1;
init();
 
} else if(game_board_grid[0][1].player == 'X' && game_board_grid[1][1].player == 'X' && game_board_grid[2][1].player == 'X') {
alert("Computer wins");
computerwins=computerwins+1;
init();
 
} else if(game_board_grid[0][2].player == 'X' && game_board_grid[1][2].player == 'X' && game_board_grid[2][2].player == 'X') {
alert("Computer wins");
computerwins=computerwins+1;
init();
 
} else if(game_board_grid[0][0].player == 'X' && game_board_grid[1][1].player == 'X' && game_board_grid[2][2].player == 'X') {
alert("Computer wins");
computerwins=computerwins+1;
init();
} else if(game_board_grid[2][0].player == 'X' && game_board_grid[1][1].player == 'X' && game_board_grid[0][2].player == 'X') {
alert("Computer wins");
computerwins=computerwins+1;
init();
}
} else {
playerwins = playerwins+1;
}
}
</script>
</head>

On the page "onload" function, we will add the following parts: call to the JavaScript function "play()" which will start the game when the page has finished loading. Also, we will create the tag for HTML5 "canvas" with id "canvas" and initialize it with values for x and y size. Should the browser not support the HTML5 canvas tag, a message will be shown to the user.

<body onload="init()">
<canvas onclick="play();" id="canvas" width="320" height="320">Game Exit: HTML5 not supported by browser.</canvas>
</body>

Finally we will close the "html" tag to finalize the page.

</html>

Tested on

Google Chrome, v. 8.0.552.224

This page was last modified on 13 August 2012, at 02:16.
125 page views in the last 30 days.