Created
January 2, 2015 10:55
-
-
Save perborgen/5b6a76bdfa60cafbcb37 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE HMTL> | |
<html> | |
<head> | |
<script type="text/javascript"> | |
var canvas, ctx, index; | |
var o_img = new Image(); | |
o_img.src = 'http://i.imgur.com/JxByHOT.png'; | |
var x_img = new Image(); | |
x_img.src = 'http://i.imgur.com/mgdXoSG.png'; | |
var gameIsOn = true; | |
winner_declared = false; | |
var player = 1; | |
o_positions = []; | |
x_positions = []; | |
var moves = []; | |
winningNumbers = [[4,5,6],[7,8,9],[1,4,7],[2,5,8],[3,6,9],[1,5,9],[3,5,7],[1,2,3]]; | |
allWinningCombinations = [[4,5,6],[4,6,5],[6,5,4],[7,8,9],[7,9,8],[9,8,7],[1,4,7],[1,7,4],[7,4,1],[2,5,8],[2,8,5],[8,5,2],[3,6,9],[3,9,6],[9,6,3],[1,5,9],[1,9,5],[9,5,1],[3,5,7],[3,7,5],[7,5,3],[1,2,3],[1,3,2],[3,2,1]]; | |
corners = [1,3,7,9]; | |
positions_left=[1,2,3,4,5,6,7,8,9]; | |
window.onload = main; | |
function main(){ | |
canvas = document.createElement("canvas"); | |
canvas.width = 600; | |
canvas.height = 600; | |
ctx = canvas.getContext("2d"); | |
r1=ctx.rect(0,0,200,200); | |
r2=ctx.rect(200,0,200,200); | |
r3=ctx.rect(400,0,200,200); | |
r4=ctx.rect(0,200,200,200); | |
r5=ctx.rect(200,200,200,200); | |
r6=ctx.rect(400,200,200,200); | |
r7=ctx.rect(0,400,200,200); | |
r8=ctx.rect(200,400,200,200); | |
r9=ctx.rect(400,400,200,200); | |
ctx.lineWidth = 3; | |
ctx.stroke(); | |
document.body.appendChild(canvas); | |
} | |
window.onclick = function (e){ | |
if (gameIsOn == true){ | |
if (e.pageX < 600 && e.pageY <600){ | |
cX = Math.floor(e.pageX/600*3); | |
cY = Math.floor(e.pageY/600*3); | |
} | |
position = fetchPosition(cX,cY); | |
avaibility = isAvailable(position); | |
if (avaibility == false){ | |
} | |
else if (avaibility == true) { | |
makeMove(position); | |
} | |
} | |
else if (gameIsOn == false){ | |
if (confirm("The game is over. Wanna play again?") == true){ | |
location.reload(); | |
} | |
else { | |
return; | |
} | |
} | |
} | |
// making the actual move | |
function makeMove(position) { | |
index = positions_left.indexOf(position); | |
positions_left.splice(index,1); | |
addToPlayersList(position,player); | |
fetchCoordinates(position); | |
draw(); | |
checkResults(); | |
} | |
// draw the latest move on the canvas | |
function draw(){ | |
size=200; | |
if (player == 1){ | |
ctx.drawImage(o_img,cX*size,cY*size); | |
} | |
else if (player == -1) { | |
ctx.drawImage(x_img,cX*size,cY*size); | |
} | |
} | |
// trigger the computer's move if it's the computer's turn | |
function nextTurn(player){ | |
if (player == -1){ | |
computerMove(); | |
} | |
else if (player== 1){ | |
return; | |
} | |
} | |
// checking results after each move | |
function checkResults(){ | |
if (player==-1){ | |
player_check = x_positions; | |
} | |
else if (player==1){ | |
player_check = o_positions; | |
} | |
checkTwoInRow(player_check); | |
checkForWin(player_check); | |
player=player*-1; /* switch player turn */ | |
//checking if it's a tie | |
if (positions_left.length>0 && winner_declared == false){ | |
nextTurn(player); | |
} | |
else if (positions_left.length==0 && winner_declared == false) | |
{ | |
if (confirm("It's a tie! Want to play again?") == true) | |
{ | |
location.reload(); | |
} | |
else | |
{ | |
gameIsOn= false; | |
} | |
} | |
} | |
//check if player has got 3 in a row | |
function checkForWin(player_check){ | |
for (x=0;x<winningNumbers.length; x++){ | |
count = 0; | |
winner=winningNumbers[x]; | |
for (i=0;i<3;i++){ | |
for (j=0;j<player_check.length;j++){ | |
if (winner[i] == player_check[j]){ | |
count +=1; | |
if (count==3){ | |
triggerConfirmBox(player); | |
winner_declared= true; | |
return; | |
} | |
} | |
} | |
} | |
} | |
} | |
// check wether player has got two in a row | |
function checkTwoInRow(player_check){ | |
for (x=0; x < allWinningCombinations.length; x++){ | |
winner=allWinningCombinations[x]; | |
count = 0; | |
for (i=0;i<2;i++){ | |
for (j=0;j<player_check.length;j++){ | |
if (winner[i] == player_check[j]){ | |
count += 1; | |
if (count == 2){ | |
if (isAvailable(winner[2]) == true){ | |
// return the position for the final winning move | |
return winner[2]; | |
} | |
} | |
} | |
} | |
} | |
} | |
} | |
// adding the latest position (1-9) to the player's array of positions | |
function addToPlayersList(position,player){ | |
if (player == -1){ | |
x_positions.push(position); | |
} | |
else if (player==1){ | |
o_positions.push(position); | |
} | |
} | |
// fetch coordinates to enable the draw() function to draw properly on the canvas | |
function fetchCoordinates(num){ | |
switch(num){ | |
case 1: | |
cX = 0; | |
cY = 0; | |
break; | |
case 2: | |
cX=1; | |
cY=0; | |
break; | |
case 3: | |
cX=2; | |
cY=0; | |
break; | |
case 4: | |
cX = 0; | |
cY = 1; | |
break; | |
case 5: | |
cX=1; | |
cY=1; | |
break; | |
case 6: | |
cX=2; | |
cY=1; | |
break; | |
case 7: | |
cX = 0; | |
cY = 2; | |
break; | |
case 8: | |
cX=1; | |
cY=2; | |
break; | |
case 9: | |
cX=2; | |
cY=2; | |
break; | |
} | |
} | |
// get the position (from 1-9) of the current click, based upon the coordinates of the click | |
function fetchPosition(x,y){ | |
if (x == 0 && y==0){ | |
return 1; | |
} | |
else if (x==1 && y==0){ | |
return 2; | |
} | |
else if (x==2 && y==0){ | |
return 3; | |
} | |
else if (x==0 && y==1){ | |
return 4; | |
} | |
else if (x==1 && y==1){ | |
return 5; | |
} | |
else if (x==2 && y==1){ | |
return 6; | |
} | |
else if (x==0 && y==2){ | |
return 7; | |
} | |
else if (x==1 && y==2){ | |
return 8; | |
} | |
else if (x==2 && y==2){ | |
return 9; | |
} | |
} | |
// checking if third position is available, on order to get 3 in a row | |
function isAvailable(pos){ | |
for (i = 0; i < x_positions.length; i ++){ | |
if (x_positions[i] == pos){ | |
return false; | |
} | |
} | |
for (j = 0; j < o_positions.length; j ++){ | |
if (o_positions[j] == pos){ | |
return false; | |
} | |
} | |
return true; | |
} | |
// checking if corners are available | |
function findAvailableCorners(){ | |
for (c = 0; i < positions_left.length; c ++){ | |
if (positions_left[c] == 1 || positions_left[c] == 3 || positions_left[c] == 7 ||positions_left[c] == 9){ | |
return positions_left[c]; | |
} | |
return false; | |
} | |
} | |
// the computer AI | |
function computerMove(){ | |
humans_last_spot_to_win = checkTwoInRow(o_positions); | |
computers_last_spot_to_win = checkTwoInRow(x_positions); | |
center = isAvailable(5); | |
corner = findAvailableCorners(); | |
//check is there is a winning possibility | |
if (computers_last_spot_to_win){ | |
makeMove(computers_last_spot_to_win); | |
} | |
//check if human player has a winning possibility that needs to be blocked | |
else if (humans_last_spot_to_win){ | |
makeMove(humans_last_spot_to_win); | |
} | |
// check if center is available | |
else if (center){ | |
makeMove(5); | |
} | |
// check if a corner is available | |
else if (corner){ | |
makeMove(corner); | |
} | |
// choose a random position | |
else { | |
length = positions_left.length; | |
random_position_in_array = Math.floor(Math.random()*length); | |
random_position = positions_left[random_position_in_array]; | |
makeMove(random_position); | |
} | |
} | |
// declare a winner and ask for a rematch | |
function triggerConfirmBox(winner) { | |
if (winner == -1){ | |
if (confirm("Computer won! Want a rematch?") == true){ | |
location.reload(); | |
} | |
else { | |
gameIsOn= false; | |
} | |
} | |
else if (winner == 1){ | |
if (confirm("Congrats, you won! The computer wants a rematch. Are you down?") ){ | |
location.reload(); | |
} | |
else{ | |
gameIsOn= false; | |
} | |
} | |
} | |
</script> | |
</head> | |
<body> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment