Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Location
    Vilnius, Lithuania
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

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

    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".

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,618
    Thanks
    0
    Thanked 645 Times in 635 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    futbolinis (12-13-2012)

  • #3
    New to the CF scene
    Join Date
    Dec 2012
    Location
    Vilnius, Lithuania
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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...

  • #4
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,248
    Thanks
    12
    Thanked 340 Times in 336 Posts
    Quote Originally Posted by futbolinis View Post
    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/
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • Users who have thanked Dormilich for this post:

    futbolinis (12-13-2012)

  • #5
    New to the CF scene
    Join Date
    Dec 2012
    Location
    Vilnius, Lithuania
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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>

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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!
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Quote Originally Posted by felgall View Post
    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.
    Last edited by Old Pedant; 12-13-2012 at 10:20 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    224
    Thanks
    0
    Thanked 32 Times in 30 Posts
    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).

  • #9
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    349
    Thanks
    9
    Thanked 51 Times in 50 Posts
    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.

  • #10
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    cf "noughts and crosses"
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #11
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,618
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Quote Originally Posted by hdewantara View Post
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #12
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    224
    Thanks
    0
    Thanked 32 Times in 30 Posts
    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.

  • #13
    New to the CF scene
    Join Date
    Dec 2012
    Location
    Vilnius, Lithuania
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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?

  • #14
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,248
    Thanks
    12
    Thanked 340 Times in 336 Posts
    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.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #15
    New to the CF scene
    Join Date
    Dec 2012
    Location
    Vilnius, Lithuania
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Ok, let it be, Player1 vs Player2. So, can anyone help with code and make these changes?


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •