Programming "tic-tac-toe" with <canvas><canvas/>

futbolinis · 12-13-2012, 07:46 AM

Hi everyone, is this a right place to get help with javascript code?

I'm a student from Lithuania and i need to make an artificial intelligence program. I selected a game "tic-tac-toe". I made it in a very simple way, game against friend, but professor doesn't like it, she says that user should be able to play against pc. Problem is that i am not a programmer, and my javascript programming skills is very low.

I'm joined here to get any help from JS masters

Folder of my files is attached below.
tic-tac-toe.zip
Just extract a folder and run index.html to view it in browser. Code to play against opponent is in file "code1.js" code to play against pc should be in file "code2.js".

felgall · 12-13-2012, 08:42 AM

What are you using <canvas> for with a simple script like that. I also wouldn't call it artificial intelligence when there are only eleven combinations possible in the entire game.

See http://www.felgall.com/jstip123.htm for a working script that you can examine to see one way to do it (the player wins code is commented out as it will never be run anyway as the best the player can get with that code is a draw). As you can see the script is not very long because there are not that many alternatives to check - most being rotations of one of the eleven positions.

I know there are only eleven possibilities in the game because thirty five years ago a friend and I set up a "matchbox" computer consisting of eleven matchboxes with positions drawn on to with the matchboxe's possible moves drawn in different colours and one or at most two coloured matches inside to select the "computer's" move. So perhaps my friend and I invented intelligent matchboxes since the best you could do against them was a draw - provided you wanted to play the one game they knew how to play.

futbolinis · 12-13-2012, 09:11 AM

Thank you for your quick reply. First of all, sorry for my incorrect english (i'm not good in this area). I have already saw this link. But my work was already sent to professor. She saw all style and canvas that i made and said me to make this game able to play against pc in the same style and also with canvas

Thats why i came here, hoping that anyone can help me with this...

Dormilich · 12-13-2012, 05:04 PM

Quote:

Originally Posted by futbolinis

She saw all style and canvas that i made and said me to make this game able to play against pc in the same style and also with canvas

well, that doesn’t invalidate the "game AI" in felgall’s programme. it merely changes how the programme and the user interact.

PS. if you need visual aid: http://xkcd.com/832/

futbolinis · 12-13-2012, 06:59 PM

Thank's for the link, Dormilich. Now it is more clearly for me. I paste'd my code below. Thank you for helping me

Code:

<!DOCTYPE html>
<html>
	<head>
		<style>
			#block {
				position:absolute;
				top: 50%;
				left: 50%;
				width: 30em;
				margin-top: -250px;
				margin-left: -15em; 
				background-color: #f3f3f3;
				    border: 1px solid #ccc;
				    text-align:center;
				    -webkit-border-radius: 10px;
				    -moz-border-radius: 10px;
				    border-radius: 10px;
			    }

			#content {
			 font-size:15px;
			 padding-top:10px;
			}
			
			canvas {
				position:relative;
				-webkit-animation:canvasAnimation 2s; 
			}
			
			#canvas1, #canvas2, #canvas3,
			#canvas4, #canvas5, #canvas6,
			#canvas7, #canvas8, #canvas9 {	
				border:1px solid black;
			}
			
			@-webkit-keyframes canvasAnimation {
				0%   {-webkit-transform:rotate(90deg);left:0px; top:0px;}
			}
		</style>
		<script language="javascript" type="text/javascript">
			//VAR's
			var painted;
			var content;
			var winningCombinations;
			var turn = 0;
			var theCanvas;
			var c;
			var cxt;
			var squaresFilled = 0;
			var w;
			var yes;
	
			//Arrays
			window.onload=function(){
				
				painted = new Array();
				content = new Array();
				winningCombinations = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];
	
				for(var l = 0; l <= 8; l++){
				painted[l] = false;
				content[l]='';
				}
			}
	
			//Game methods
			function canvasClicked(canvasNumber){
				theCanvas = "canvas"+canvasNumber;
				c = document.getElementById(theCanvas);
				cxt = c.getContext("2d");
	
				if(painted[canvasNumber-1] ==false){
					if(turn%2==0){
						cxt.beginPath();
						cxt.moveTo(10,10);
						cxt.lineTo(40,40);
						cxt.moveTo(40,10);
						cxt.lineTo(10,40);
						cxt.stroke();
						cxt.closePath();
						content[canvasNumber-1] = 'Opponent "X" wins. ';
					}
	
					else{
						cxt.beginPath();
						cxt.arc(25,25,20,0,Math.PI*2,true);
						cxt.stroke();
						cxt.closePath();
						content[canvasNumber-1] = 'Opponent "O" wins. ';
					}
	
					turn++;
					painted[canvasNumber-1] = true;
					squaresFilled++;
					checkForWinners(content[canvasNumber-1]);
	
					if(squaresFilled==9){
						alert("Draw. Game is over.");
						location.reload(true);
					}
				
				}
				else{
					alert("Column is filled !");
				}
	
			}
	
			function checkForWinners(symbol){
				
				for(var a = 0; a < winningCombinations.length; a++){
				if(content[winningCombinations[a][0]]==symbol&&content[winningCombinations[a][1]]==	symbol&&content[winningCombinations[a][2]]==symbol){
					alert(symbol+ "Congrats !");
					playAgain();
				}
				}
	
			}
	
			function playAgain(){
				yes=confirm("Play again?");
				if(yes==true){
					//alert("Click [OK], to play again");
					location.reload(true);
				}
				else{
					alert("Bye !");
					location.reload(true);
			}
	
			}
		</script>
	</head>
	<body>
		<div id="block">
			<h1>Game ,,tic-tac-toe“</h1>
			<h3>You are playing against your opponent</h3>
			<canvas id = "canvas1"  width="50px" height="50px" onclick="canvasClicked(1)"></canvas>
			<canvas id = "canvas2"  width="50px" height="50px" onclick="canvasClicked(2)"></canvas>
			<canvas id = "canvas3"  width="50px" height="50px" onclick="canvasClicked(3)"></canvas><br/>
			<canvas id = "canvas4"  width="50px" height="50px" onclick="canvasClicked(4)"></canvas>
			<canvas id = "canvas5"  width="50px" height="50px" onclick="canvasClicked(5)"></canvas>
			<canvas id = "canvas6"  width="50px" height="50px" onclick="canvasClicked(6)"></canvas><br/>
			<canvas id = "canvas7"  width="50px" height="50px" onclick="canvasClicked(7)"></canvas>
			<canvas id = "canvas8"  width="50px" height="50px" onclick="canvasClicked(8)"></canvas>
			<canvas id = "canvas9"  width="50px" height="50px" onclick="canvasClicked(9)"></canvas>
			<p id="content">
				<input type="button" value="New game" onClick="document.location.reload(true)">
				<input type="button" value="Home" onClick="javascript:location.href='index.html'">
				<br/>
				<br/>
				LECTURE: Artificial intelligence<br/>STUDENT: Vaidas Markauskas<br/>PROFESSOR: Regina Kulvietienė<br/>GROUP: IInt-12
			</p>
		</div>
	</body>
</html>

AndrewGSW · 12-13-2012, 07:13 PM

You should remove all the px's from the canvas heights and widths, just "50".

Delete language="javascript" (deprecated) and add type="text/css" to your style tag

. Add a <title> and it will be complete!

Old Pedant · 12-13-2012, 10:18 PM

Quote:

Originally Posted by felgall

I know there are only eleven possibilities in the game because thirty five years ago a friend and I set up a "matchbox" computer consisting of eleven matchboxes ...

Well, abut 52 years ago, Popular Electronics showed how to create a TicTacToe playing machine using nothing but DPST switches and one rotary switch (driven by a stepping motor in the most sophisitcated version).

I didn't have a rotary switch, much less a stepping motor. But I did have a bunch of DPDT switches and some diodes and some Christmas tree lights. So I created a TicTacToe "computer" with those. The worst hack being that, if the computer failed to make a move, you had to then resort to flipping the next switch in a bank of switches that caused it to choose the best still-available square. (Basically, all it did was make sure it blocked the human player. So the computer's first move, for example, had to come from that fixed bank of moves. Needless to say, it chose center square and then corner squares first from that bank.) The other major "trick" to it was that it had (as I recall...that *was* a long time ago!) 4 DPDT switches in the center square and 3 in each of the corner squares. All that to keep the various circuits separated. And, yes, it worked. And of course never lost.

Isn't it amazing how what goes around comes around?

What ever happened to "Hunt the Wumpus"? That would be a better first computer game than TicTacToe.

007julien · 12-14-2012, 10:48 AM

Tic-Tac-Toe is a good simple game to try an artificial intelligence program. See an example of alpha-beta algorithm on this page.

Then it is to possible to write a «Puissance 4» or «Connect Four» program like this which is not a perfect player... The good players can again win (by watching the parity in the columns).

hdewantara · 12-14-2012, 04:30 PM

THis won't be easy. I would think that AI is all about learning.

So I guess it won't matter who shall win the most, but as long as you could show your professor that your javascript machine is capable to learn something then it's done.

As far as I know, the easiest AI to code is called "Genetic Algorithm", and is commonly used to solve "Travelling Salesman" problem and the like. I haven't heard though any implementations of it to "Tic Tac Toe" game.

AndrewGSW · 12-14-2012, 09:13 PM

cf "noughts and crosses"

felgall · 12-15-2012, 02:41 AM

Quote:

Originally Posted by hdewantara

THis won't be easy. I would think that AI is all about learning.

In which case tic-tac-toe (which a lot of people know as noughts and crosses) is definitely not an AI candidate as there is nothing for the script to learn. There are only 11 basic positions and rotations thereof in the entire game. To set the game up so the computer plays at random to start with and then learns which moves not to make would require hundreds of times as much code as the code needed to just get it to play the best move it can each time. In the amount of code you'd need to have it learn something you can get it to learn something far more complicated than those eleven positions.

007julien · 12-15-2012, 11:18 PM

Even if AI is not necessary for Tic-Tac-Toe (or Noughts and Crosses) , the small depth of this game allows to develop an algorithm, which explores only some branches of the tree of the positions, and gives the real values of the game.

With a deeper game, like Connect 4, it is moreover necessary to build a function for approximatively evaluate non terminal positions.

futbolinis · 12-17-2012, 09:21 AM

Guys, how about making this Noughts and Crosses to play not through 3x3 windows, but whatever player wants (for example 4x4, 6x6, 10x10)? What changes i need to do in my javascript code?

Any suggestions?

Dormilich · 12-17-2012, 10:56 AM

if you’re ok with never being able to win... if it is PvP then there is not much code to change, but for player vs computer you’ll need some kind of AI.

futbolinis · 12-17-2012, 10:59 AM

Ok, let it be, Player1 vs Player2. So, can anyone help with code and make these changes?