• 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

    • Sounds like a tool is needed to backup drivers from Win Update for older devices. Anyone got a rough idea besides doing a manual backup of driverstore?
    • Stylish Samsung Galaxy S25 Edge gets 20% discount sending it to lowest price by Paul Hill If you’re in the market for a powerful, stylish phone, then you may be interested in the Galaxy S25 Edge, which is now reduced to $969.99, down 20% from the $1,219.99 list price. This is the lowest price that the device has been at on Amazon. You can get the device at this price if you go for the Titanium Icyblue or Titanium Silver editions. These models are the top-end S25 Edge variants with 512GB of storage. While this Samsung device may be about as thick as a pencil, it’s constructed from titanium and uses Corning Gorilla Glass Ceramic 2 on the display. This should ensure durability, despite its thin design. The thickness of this phone is just 5.8mm, and it weighs 163g. Camera capabilities and AI enhancements The Galaxy S25 Edge's camera system is impressive. It has a 200MP main camera with optical image stabilization and a 2x optical quality zoom. This feature magnifies the image using optical mechanisms in the camera lens so that the zoomed image retains its original clarity, detail, and resolution of the scene. On the back, there is also a 12MP ultrawide camera with autofocus and on the front, there’s a 12MP camera. Like many phones coming out now, there are AI-powered camera features such as Night Video, Best Face for group shots, Portrait Selfie, and Gallery Search by description. Notably, there is no dedicated telephoto lens like in the S25+ and S25 Ultra. This is a tradeoff that the company decided to make to achieve its ultrathin design. Telephoto lenses are camera lenses that are designed to make distant objects appear closer and larger in your photos and videos. The absence of this telephoto lens may be a deal breaker for those looking to use this camera for professional shots; otherwise, it’s still very impressive, especially with that 200MP main camera. Performance, display, and integrated AI features The S25 Edge is powered by the Snapdragon 8 Elite chipset, specifically the 3-nanometer Qualcomm SM8750-AB. It has an octa-core CPU (2x4.47 GHz Oryon V Phoenix L + 6x3.53 GHz Oryon V2 Phoenix M) and an Adreno 830 GPU. This model's display is a 6.7-inch QHD+ Dynamic AMOLED 2X with a 120Hz adaptive refresh rate and high brightness. This device has plenty of other AI features too, outside of the camera, including Cross App Action, Audio Eraser for videos, Now Brief/Now Bar for personalized information, and of course, Google Gemini. With 12GB of RAM, the specs on this phone are really very good. It should be capable of doing most tasks you throw at it, including gaming. You may wonder if it will handle games well, given that the thin design means it could overheat. Samsung has already thought about this and included a reconfigured vapor chamber that helps to keep the phone cool. Battery life and charging speed: The main compromise Aside from the removal of the telephoto lens, this phone also has a drawback in terms of battery life. Its 3,900 mAh battery capacity means it’s smaller than many other devices, even compared to budget phones. Another disappointing aspect is the charging, where the wired charging speed is limited to 25W—that’s lower than what you find on very affordable Xiaomi POCO devices. This battery limitation might make this device a bad choice if you’re away from a charger for long periods. One affordable way to mitigate this downside is by carrying a portable charger, but still, it’s ironic that you buy a thin phone to be lighter and then end up carrying a brick-sized charger around with you. You could also just bring your charger and plug it into an outlet. Is the Galaxy S25 Edge the smart buy for you? If you’re someone who wants a sleek, lightweight phone that has a premium build and can easily slice through tasks you throw at it, then the Galaxy S25 Edge is very likely for you. It’s also great for anyone looking for a standout camera that doesn’t need a telephoto lens. However, if you need a device with all-day battery life because you’re going camping or to the middle of nowhere, then you could probably find a better fit with a longer battery life. If this device is for you, check out the links below. Samsung Galaxy S25 Edge (Titanium Icyblue): $969.99 (Amazon US) / MSRP $1,219.99 Samsung Galaxy S25 Edge (Titanium Silver): $969.99 (Amazon US) / MSRP $1,219.99 This Amazon deal is US-specific and not available in other regions unless specified. If you don't like it or want to look at more options, check out the Amazon US deals page here. Get Prime (SNAP), Prime Video, Audible Plus or Kindle / Music Unlimited. Free for 30 days. As an Amazon Associate, we earn from qualifying purchases.
    • I got too many apps I use actively. Theres been too often I completely blank on the name of the application and had to manually look through the list for it. Now I'm using Start11 and got my apps sorted in the Start menu by categories so that if I'm looking for Krita i can find it under "Art editors". If MS are going to change it, they should consider making automated categories. Seen some Linux distros do that. But if they do, theres probably gonna be a lot of wrongly categorized apps though, unfortunately.
  • Recent Achievements

    • emptyother earned a badge
      First Post
    • Crunchy6 earned a badge
      Week One Done
    • KynanSEIT earned a badge
      One Month Later
    • gowtham07 earned a badge
      One Month Later
    • lethalman went up a rank
      Collaborator
  • Popular Contributors

    1. 1
      +primortal
      675
    2. 2
      ATLien_0
      277
    3. 3
      Michael Scrip
      220
    4. 4
      +FloatingFatMan
      168
    5. 5
      Steven P.
      161
  • Tell a friend

    Love Neowin? Tell a friend!