Tick tack toe AI

Tick tack toe AI
0.0 0

#1

How can i build a response between computer and player to place x and o in grids i created…Any help is appreciated

<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>


.boks{
margin-top:5%;	
border:2px solid black;
width:19%;
}


#one{
	width:100px;
	height:100px;
	border-bottom:2px solid black;
	border-left:2px solid black;
	font-size:680%;
}

#two{
	width:100px;
	height:100px;
	border-bottom:none;
	border-left:2px solid black;
}

#three{
	width:100px;
	height:100px;
	border-bottom:2px solid black;
	font-size:680%;
}

#four{
	width:100px;
	height:100px;
}
</style>
<script>
$(document).ready(function(){
	var player;
	prompt("Which side do you choose x or o");
	/*if(player === x ){
		
	}*/
	$("#three").click(function(){
	$("#three").html("x");
	});
	$("#one").click(function(){
	$("#one").html("o");
	});
});
</script>
</head>
<body>
<div class="container-fluid boks" >
<div class="row">
<div class="col-xs-4" id="three">
</div>
<div class="col-xs-4" id="one" class="circle">
</div>
<div class="col-xs-4" id="one">
</div>
</div>
<div class="row">
<div class="col-xs-4" id="three">
</div>
<div class="col-xs-4" id="one">
</div>
<div class="col-xs-4" id="one">
</div>
</div>
<div class="row">
<div class="col-xs-4" id="four">
</div>
<div class="col-xs-4" id="two">
</div>
<div class="col-xs-4" id="two">
</div>
</div>
</div>
</body>```

#2

You would need to generate the trie of all the possible states of the game. Every cell on your table can have 3 different values (0, x, empty). So you can use 2 bits per cell to encode your table as an integer. Then you generate all the possible transitions and start marking the states with a depth-first graph traversal. A state that has a transition to a losing state is marked as a winning state (because the other player would find himself in a losing situation). If there is at least one transition to an indecisive state, then the current state is indecisive as well. Otherwise it’s a losing state. Now your AI can leverage this trie to always pick either a winning state if available or push the game into a draw.


#3

I have tried writing function which checks if div is empty but i have no idea as to how to get specific character in div for AI. When computer makes it’s move in tic tac toe.Here is my current code which checks if block(div) is empty and then makes an x or o.

<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="tictest.css" type="text/css">
<script src="tictest.js">
</script>
</head>
<body>
<div>
<p class="btn btn-primary" id="Xbutton"> I Choose X</p>
<p class="btn btn-primary" id="Obutton"> I Choose O</p>

</div>
<div class="container-fluid boks" >
<div class="row">
<div class="col-xs-4 O1" id="three">
</div>
<div class="col-xs-4 O2" id="one" class="circle">
</div>
<div class="col-xs-4 X O3" id="one">
</div>
</div>
<div class="row">
<div class="col-xs-4 O4" id="three">
</div>
<div class="col-xs-4 O5" id="one">
</div>
<div class="col-xs-4 O6" id="one">
</div>
</div>
<div class="row">
<div class="col-xs-4 O7" id="four">
</div>
<div class="col-xs-4 O8" id="two">
</div>
<div class="col-xs-4 O9" id="two">
</div>
</div>
</div>
<div>
<p class="btn btn-primary text-center" id="reset">Reset</p>
<div>
</body>

body{
	background-image:url("https://images.unsplash.com/photo-1464639351491-a172c2aa2911?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=0952e4798d3b4000081e0e3f4f5c5a1a");
	background-size:100%;
}

div{
	text-align:center;
}

.boks{
margin-top:5%;	
border:2px solid black;
width:19%;
}


#one{
	width:100px;
	height:100px;
	border-bottom:2px solid black;
	border-left:2px solid black;
	font-size:680%;
}

#two{
	width:100px;
	height:100px;
	border-bottom:none;
	border-left:2px solid black;
}

#three{
	width:100px;
	height:100px;
	border-bottom:2px solid black;
	font-size:680%;
}

#four{
	width:100px;
	height:100px;
}

$(document).ready(function(){
	var player;
	var AI = "O";
	var random = Math.floor(Math.random() *10);
	
	
	
	function computersChoice(){
		while($(".O:empty")){
			randome = Math.floor(Math.random() *10);
		}
	}
	
	$("#Xbutton").one("click",function(){
	player = "X";
    AI = "O";
	$("#Xbutton").css("opacity",0.23);
			alert("You have chosen X");
	});
	
	$(".X").click(function(){
		if ($(".X:empty")){
			$(".X").html("X");
		}
	});
	
	$(".O4").click(function(){
	if($(".O4:empty")||$("player") ==="X"){
		$(".O4").html("X");
	}
	});
	
	
	$(".O4").click(function(){
	if($(".O4:empty")||$(player) ==="O"){
		$(".O4").html("O");
	}
	});
	
$("#X").click(function(){
 if($("#X:empty")){
 $("#test").html("X");
}
});
	
	$("#Obutton").one("click",function(){
	player = "O";
    AI = "X";
	$("#Obutton").css("opacity",0.23);
			alert("You have chosen O");
	});
	

	$("#three").click(function(){

	$("#three").text("X");
	
	});
	$("#one").click(function(){
	$("#one").html("O");
	});;
	
	$("#reset").click(function(){
	//$("#Xbutton").css("opacity",1);
	//$("#Obutton").css("opacity",1);
	location.reload();
	});
	
	
});


#4

You have many html syntax errors going on in your code.

First, you have the same id on multiple divs. You should only use the same id on only one element. For example, you have:

<div class="col-xs-4 O1" id="three">

and then later in your code you have:

<div class="col-xs-4 O4" id="three">

Only one div can have an id=“three”. One possible suggestion is to create a different id for each square on the board (9 squares and 9 different ids). You are currently using class names such as 01, 02, 03 to accomplish this, but since ids are unique, I think it would be easier to work with ids instead of classes. Use classes for formatting purposes and ids for identifying specific divs.

Also, you have id=“one” attached to multiple divs.

Another syntax error is in the following line :

<div class="col-xs-4 O2" id="one" class="circle">

Always put multiple classes into a single class="". The above should be written as:

<div class="col-xs-4 O2 circle">

Before I explain how to get the values from the board, please redo your html code. Also, it would be much easier if you put your code in Codepen or JSFiddle anywhere online where you can post a link to the actual code you are using. I had to copy and paste your code above into an editor, but it was not organized correctly, so I had to spend some time to get it to properly display anything.


#5

Thank you for replying i have fixed my code and have saved it at codepen link https://codepen.io/Ajax-2031/pen/LjvwOY. I created similar id’s for borders(css) of my div’s which form’s the square’s of tic tac toe game inside my div with class name boks.The circle class i removed which i wanted to use as my click function which will draw an O in that particular div if it’s the computer’s turn(if player has selected X) or player has chosen O. I have found empty() function on mdn to check if div is empty. Trying to use it to check if square is in use on board to draw an x or o for player or computer, depending on which character was chosen by computer or player ex computer is x and player chose O. I have marked my div as individual square in div class as O1 through to O9 as to reverence a click function for each square i f player click’s on div ex O1 it will draw an X if player chose X or O if player chose O. I am not sure how to accomplish the computers choice in movements. I googled a solution which uses Math.floor(Math.round()*10); to randomly choose a square (in my case a div class no ex O2 as it’s square). I tried fading buttons and a alert pop box with my choose x or choose O buttons.


#6

I have a couple of suggestions for you now.

  1. Check out this wki for tic tac toe strategy you can use to make your computer player “smarter”.

  2. You need to rethink how to display the board, because if the screen width is smaller, you see something like the following:

  1. Your buttons at the top (I Choose X and I Choose O) do the opposite of what they should do. For example, if I click X, I get an alert that say’s I clicked X, but when I click the board, it put’s an O.

#7

I have fixed the buttons to only to display O when clicking I choose O or X when choosing i choose X. Could not figure how to get computer to use Math.floor(Math.round()*10). In a while loop(check if classes .O1 -.O9 are empty when its is computers move) or other loops to choose a random number and .square to mark a x if player is x or o if player is o. Here is my latest attempt at tic tac toe https://codepen.io/Ajax-2031/pen/LjvwOY reseized to fit in small screen.