• 0

PHP, JQUERY Tic Tac Toe


Question

23 answers to this question

Recommended Posts

  • 0

Er, you wouldn't need php or jquery for that, you could write it all in javascript, unless you had some desire to log win/loss results. Hell, you could even do that for one player locally.

 

Figure out how to store the data (hint: arrays), then figure out the test cases. It's not hard, since there's no such thing as winning in tic-tac-toe, only not losing.

  • 0

So is this a game of Tic Tac Toe played over the Internet between two computers?

I guess you'd need to POST the moves of Player 1 using AJAX to a PHP script (adding this to a DB), then Player 2's browser would be polling the server using another PHP script (querying the DB) and an AJAX GET request to update the game on their end, and vice-versa?

  • 0
  On 25/07/2013 at 05:46, xScence said:

Well when i click somewhere AI to click too after my move. Me click -> AI click -> Me Click -> AI click and so on till some one wins or its ties. I just need some logic and examples thats all.

ok well personally I would store all the moves in a PHP array ..but as for the "AI" ...its a loose term its actually simulated AI ....it gives the impression of intelligence and while you may or may have not known that is irrelevant what you have to remember is not matter what... you are going to have to program all its moves.. whether you right a mathmatical algorithm or if you simply write a database full of possible outcomes 

 

I would have to sit down and think about it but personal I would go with a lengthy algo ...you can write a list of functions but the main thing you need to do is make it play one move ahead then return the previous step. its hard to explain but not hard to program lol

  • 0
  On 25/07/2013 at 14:21, xScence said:

i don't know how i can make the clicks. Which is better to have 9 divs and when to click them to send some ajax or buttons ?

its what ever you are more comfortable with coding ? with this there is no standard and with code there normally is not just one way... do the way you think you can or atleast prefer the sounds of.... or ...do both ? either way you are going to have to link to ajax for real time :L 

  • 0

Sounds quite a fun piece of homework haha.

 

How about doing a simple 3x3 table, with numerical id's. Use JQuery to add an event listener to look out for a click of a TD, grab the ID of the table and change the background image of that to one of the symbols. Once that's done, call an AI function which looks out for which images are in the grid, and where it could make a line using the numerical ID's?

 

If you need that logic doing in PHP, store the results in a DB once called to make a move and do the logic that way. Or, if you want something simple. just fire off the state of the full table every move so you can work out the AI's move without needed a DB.

  • 0
<table>
	<tr>
		<td id='1-1'></td>
		<td id='1-2'></td>
		<td id='1-3'></td>
	</tr>
	<tr>
		<td id='2-1'></td>
		<td id='2-2'></td>
		<td id='2-3'></td>
	</tr>
	<tr>
		<td id='3-1'></td>
		<td id='3-2'></td>
		<td id='3-3'></td>
	</tr>
</table>
$('td').click(function(e) {
	makeMove(e.target.id);
});

function makeMove(square) {
	$.ajax("?square="+square function(data){
		//Set table background
		aiMove();
	});
}

function aiMove() {
	//AI Calculations
	//AJAX or 
}

That's very simple, but does that help? Just don't want to do your homework for you ;)

  • 0

Seems kinda pointless involving PHP to be honest, makes much more sense for it all to be done in the browser (unless you want to add multi-player (node would be better here) or just save scores server side).

 

Only reason i can see to involve php would be if its some badly spec'ed out homework "/

  • 0
  On 25/07/2013 at 14:39, Bag said:

Seems kinda pointless involving PHP to be honest, makes much more sense for it all to be done in the browser (unless you want to add multi-player (node would be better here) or just save scores server side).

 

Only reason i can see to involve php would be if its some badly spec'ed out homework "/

If its homework, may just be to show how to hide game logic from the user so it isn't exploited as easily. Harder to force the AI to let you win if you don't have direct access to it the way you would with JavaScript. Just a guess though.

  • 0

I got this:

 

<script>
$(document).ready(function(){


$('td').click(function(e) {
makeMove(e.target.id);
});


function makeMove(square){
$.ajax({
type: "POST",
url: "tictactoeAjax.php",
data: 'test=' + square,
success: function(data){
alert(data);
}
});
}
});


</script>


<table border="1" width="300" height="300" id="tictactoe" name="table">
<tr>
<td align="center" id='0'></td>
<td align="center" id='1'></td>
<td align="center" id='2'></td>
</tr>
<tr>
<td align="center" id='3'></td>
<td align="center" id='4'></td>
<td align="center" id='5'></td>
</tr>
<tr>
<td align="center" id='6'></td>
<td align="center" id='7'></td>
<td align="center" id='8'></td>
</tr>
</table>

But how can i set X and O backgrounds?, thanks.
  • 0
  On 25/07/2013 at 20:24, xScence said:

 

I got this:

 

<script>
$(document).ready(function(){


$('td').click(function(e) {
makeMove(e.target.id);
});


function makeMove(square){
$.ajax({
type: "POST",
url: "tictactoeAjax.php",
data: 'test=' + square,
success: function(data){
alert(data);
}
});
}
});


</script>


<table border="1" width="300" height="300" id="tictactoe" name="table">
<tr>
<td align="center" id='0'></td>
<td align="center" id='1'></td>
<td align="center" id='2'></td>
</tr>
<tr>
<td align="center" id='3'></td>
<td align="center" id='4'></td>
<td align="center" id='5'></td>
</tr>
<tr>
<td align="center" id='6'></td>
<td align="center" id='7'></td>
<td align="center" id='8'></td>
</tr>
</table>

But how can i set X and O backgrounds?, thanks.

 

 

Either with images, or just use jQuery's .html() to push X and O characters to the divs.

 

I really hope this isn't homework, at this point. :laugh:

  • 0
  On 25/07/2013 at 21:10, neohelp said:

Absolutly makes no sense to do this with PHP.

You are 100% right. Being able to hide the source code from the player so they don't manipulate it is 100% useless. :rolleyes: Since you clearly have no real input for this discussion, I look forward to not seeing anymore posts from you so we can continue to see how xScence tackles this task.

  • 0

I have this html:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Tic-Tac-Toe</title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){


var turn = 0;
var tic = '';






$('td').click(function(e) {
turn = 1;
if(turn == 1){
tic = 'O';
}
makeMove(e.target.id);
});


function makeMove(square){


$.ajax({
type: "POST",
url: "tictactoeAjax.php",
data: { clicked: square, symbol: tic, bot: 0 }
}).done(function(ret){
$("#"+square).html('O');
turn = 2;
aiTurn(square);
});


}


function aiTurn(square){


turn = 2;


if(turn == 2){
tic = 'X';
}


$.ajax({
type: "POST",
url: "tictactoeAjax.php",
data: { clicked: square, symbol: tic, bot: 1 }
}).done(function(ret){
alert(ret);
$("#" + ret).html('X');
});


}
});
</script>
<body>


<table border="1" width="300" height="300" id="tictactoe" name="table">
<tr>
<td align="center" id='1'></td>
<td align="center" id='2'></td>
<td align="center" id='3'></td>
</tr>
<tr>
<td align="center" id='4'></td>
<td align="center" id='5'></td>
<td align="center" id='6'></td>
</tr>
<tr>
<td align="center" id='7'></td>
<td align="center" id='8'></td>
<td align="center" id='9'></td>
</tr>
</table>


</body>
</html>

The ajax:

<?php
require('conf.php');
session_start();
$clicked = $_POST['clicked'];
$symbol = $_POST['symbol'];
$bot = $_POST['bot'];


if($bot == 0){
//Human
$sql = mysql_query("UPDATE movies SET symbol = '".$symbol."' WHERE field='".$clicked."'") or die (mysql_error());
if($sql){
echo $symbol;
}
}elseif($bot == 1){
//AI
function ai_think(){
$sql = mysql_query("SELECT * FROM movies WHERE symbol = 'O'") or die (mysql_error());


while($rows = mysql_fetch_object($sql)){


//$rows->field returns 17

/*



*/

}


}
echo ai_think();
//$sql = mysql_query("UPDATE movies SET symbol = '".$symbol."' WHERE field='".ai_think()."'") or die (mysql_error());
}


?>

DB:

sql.jpg

So now if player (me) clicked on 1 and 7 position the AI must place in position 4 so he will stop me to make 3 same symbols.
but if i use this code:

if($rows->field == 1 && $rows->field == 7){
//nothing happens
}
if($rows->field == 17){
//its stays in this if so if i make other operations they wont be checked because this returns allways true
}

I need some logic here: to check (most) strategy and stop them. Thanks alot.

while($rows = mysql_fetch_object($sql)){


//$rows->field returns 17


}
This topic is now closed to further replies.
  • Posts

    • Lets assume that we are capitalists and right wing people for a sec. - The individual should be able to accrue wealth and no government should limit that wealth growth. - That same individual should not be taxed any higher than the average person. Tax is a socialist construct to help those in that country who are less fortunate, and it limits wealth growth. - This individual should be able to do whatever they want to do with their money and have no restrictions, as it would otherwise limit wealth growth. So having said all that with the mindset of a capitalist and small government political leaning, he can do what he want with it. Some billionaires have little pet projects to inflate their self worth like rocket ships and stuff, this is just a bit different is al, and probably the more compassionate of choices. I think he's seen a need, and that need isn't in the USA.
    • I'm concerned about this, too. How can he make sure that the money is actually used for good instead of ending up in the pockets of crooked politics and warlords? I think that's a problem.
    • Sony unveils its first fight stick 'Project Defiant', supports PC and PS5 by Pulasthi Ariyasinghe In a surprise twist, Sony announced a new piece of hardware at its State of Play presentation today. Currently going by the codename Project Defiant, it is Sony's first attempt at making a fight stick. Considering the company is currently partnered with Marvel to make a first-party fighting game featuring heroes and villains from the popular comic universe, this seems to be the right time to unveil the project. As seen in the teaser trailer above, the wireless fight stick follows the modern black and white PlayStation hardware style of the consoles and standard gamepad controllers. The controller will ship with a toolless design for changing the restrictor gates, with square, circle, and octagon options incoming for the stick. Meanwhile, the buttons are confirmed to have mechanical switches. Plus, a dedicated touchpad, much like on the DualSense controller, is available on the top of the fight stick. "It’s built in a sturdy, ergonomic design for a comfortable feel during intense fight sessions," adds the company. Sony is leveraging its PlayStation Link technology in the device. With it, the company is promising ultra-low latency wireless connectivity, making sure it provides players "precise in-game response to each button press and digital stick movement." Interestingly, PlayStation Link is Sony's proprietary wireless connectivity standard designed for PlayStation 5's audio transmissions, which is now being used a little differently for this piece of hardware. The controller has built-in storage for holding both the restrictor gates and the PS Link USB adapter. As expected, a wired connection is also possible, with a USB-C port available on the device for connecting to a PlayStation 5 or PC. To make sure the device remains in good condition during travel, Sony is throwing in a sturdy sling carry case with each Project Defiant fight stick. More details, like the official name, internal hardware, release date, and most importantly, price, will be revealed later. The hardware has a 2026 launch window right now.
  • Recent Achievements

    • First Post
      James courage Tabla earned a badge
      First Post
    • Reacting Well
      James courage Tabla earned a badge
      Reacting Well
    • Apprentice
      DarkShrunken went up a rank
      Apprentice
    • Dedicated
      CHUNWEI earned a badge
      Dedicated
    • Collaborator
      DarkShrunken earned a badge
      Collaborator
  • Popular Contributors

    1. 1
      +primortal
      351
    2. 2
      snowy owl
      167
    3. 3
      +FloatingFatMan
      164
    4. 4
      ATLien_0
      162
    5. 5
      Xenon
      128
  • Tell a friend

    Love Neowin? Tell a friend!