• 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

    • I set out to take a few of his quotes and change them fit this article. The hilarious thing is that other than subbing in "movable volume indicator," I didn't have to change anything at all. His words were just fancy sounding gibberish that could literally apply to anything :-)
    • If you are lucky enough that the grey market key works more than once.
    • how big is your HDD that only has 100gb left? I take it this the main drive.  Is this a pc or laptop? I ask because changing hdd in pcs are much easier. You sure a good clean/purge of data wouldn't clear up space - have you ran disk cleanup? Which is part of windows..  You can for sure move data to your external drive, install programs to it, etc - but using it to store updates?   
    • How to record screen as GIF in Windows 11 by Taras Buria The Snipping Tool app is already quite a capable program for screenshots and screen recordings. Still, there is always room for improvement, and many users agree that the app needs the ability to save screen recordings as GIFs. Microsoft heard those users, and recent updates introduced the long-requested feature, allowing you to record your screen as a GIF. Here is how to do it. Record screen as a GIF in Windows 11 Note: By the time of publishing this article, GIF support in Snipping Tool is only available to Windows Insiders. However, you can enable that feature on stable Windows 11 releases as well; here is how: Go to store.rg-adguard.net, select ProductID in the first drop-down, paste 9MZ95KL8MR0L into the search box, and select Fast in the last drop-down. Press the checkmark button. Find and download Microsoft.ScreenSketch_2022.2505.21.0_neutral_~_8wekyb3d8bbwe.msixbundle in the list of apps. The version number could be newer, just make sure you are downloading an msixbundle file. Note that the browser will warn you about downloading a potentially harmful file. Open the file and click Update. Download ViveTool from GitHub and unpack the files in a convenient and easy-to-find folder. Run Command Prompt as Administrator and navigate to the folder containing the ViveTool files with the CD command. For example, if you have placed ViveTool in C:\Vive, type CD C:\Vive. Type vivetool /enable /id:47081492 and press Enter. The steps above might seem a bit tedious, but that is the only way to get GIF support in Snipping Tool without enrolling your device in the Windows Insider program. We will update the article once the feature is publicly available, so there is no need to jump through all the hoops just to make it work. Tip: You can always roll back Snippint Tool to the latest version from the Microsoft Store by uninstalling it and downloading it again. Now, with GIF support enabled in Snipping Tool, here is how to save a screen recording as a GIF in Windows 11: Press Win + Shift + S, select screen recording mode and record whatever you want. After the recording is over, Snipping Tool will open your video so that you can view, trim, or save it. At this point, all you have to do is click the GIF button in the upper-right corner. On the next screen, select your GIF quality and click Export to save as a file or Copy to copy it to the clipboard. And that is how you save screen recordings as GIFs in Windows 11. Note that Snipping Tool can only save GIFs for up to 30 seconds. Anything beyond that will be cut off. You might think that Clipchamp, Windows 11's built-in video editor, is a good option when you want to save a screen recording as a GIF. However, it really sucks at that. The video duration is capped at just 15 seconds, which is even worse than the Snipping Tool, and the output resolution is hilariously low. The latter makes it impossible to distinguish any details, and all you get is a blurry, pixelated mess. No, Clipchamp is not a good option for that. If you want to create GIFs that are longer than 30 seconds, a good option is to go with apps like ShareX, which is extremely flexible and customizable (and also free, which makes it one of our favorite must-have apps for Windows 11). Alternatively, you can record a video using the Snipping Tool and then convert it to a GIF using web-based services like Ezgif, another great free utility. Keep in mind that the larger your video resolution and the longer its duration, the bigger the final GIF size. Depending on the settings, GIFs could reach hundreds of megabytes, so you have to set your expectations correctly (and so do the settings, too).
  • Recent Achievements

    • Week One Done
      habso earned a badge
      Week One Done
    • Week One Done
      DXB APPS earned a badge
      Week One Done
    • One Month Later
      DecaffKnight94 earned a badge
      One Month Later
    • Dedicated
      S.P earned a badge
      Dedicated
    • One Month Later
      adxnksd42031 earned a badge
      One Month Later
  • Popular Contributors

    1. 1
      +primortal
      661
    2. 2
      ATLien_0
      252
    3. 3
      Michael Scrip
      235
    4. 4
      Steven P.
      150
    5. 5
      +FloatingFatMan
      146
  • Tell a friend

    Love Neowin? Tell a friend!