• 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

    • Black Myth: Wukong hits Xbox this August, exactly a year after PlayStation launch by Pulasthi Ariyasinghe Developer Game Science delivered one of the biggest action games of all time last year, with Black Myth: Wukong going on to sell tens of millions in its launch month and winning a multitude of awards. However, the title skipped out on a platform it was originally announced to launch in: Xbox. Following a long string of reasons and delays, it seems the port is finally coming to the platform. Today, Game Science announced that the Xbox Series X|S version of Black Myth: Wukong now has a release date, with it landing on August 20, 2025. Pre-orders for the title will become available starting June 18. Interestingly, this Xbox release date is set exactly one year after the original release on PlayStation 5 and PC. Game Science originally stated that the delay was due to technical issues with Xbox consoles. However, Microsoft refuted that claim quickly and alluded that the delay was due to some sort of console exclusivity deal between Game Science and Sony. In today's announcement, Game Science once again says that the delay was due to its work on porting the game to Xbox and meeting its quality standards. "Bringing Black Myth: Wukong to Xbox Series X|S—and ensuring the experience met our internal quality standards—was no easy feat," said the studio today regarding the long delay on Xbox platforms. "Fortunately, we were able to complete this challenging task smoothly within the first year of the game's official release." "If you're an Xbox player who hasn't yet experienced the game on another platform, we're confident it will stand among the finest ARPGs available on Xbox," added Game Science. For those looking to jump into the game a little cheaper than usual, Game Science will be hosting Black Myth: Wukong's first-ever sale on June 18. The 20% off discount will be available across PC, PlayStation, and even the Microsoft Store for the Xbox Series X|S pre-order.
    • And where is "don't be evil"? Oh, yeah, they removed it, too.
    • YouTube isn't a monopoly, it's just the most popular video platform, but other options and competitors do exist. And I'm not defending YouTube here, I'm a subscriber to Geerling's channel and I like his content and YouTube clearly went too far with this, but they can't be considered a monopoly, IMO. https://www.captions.ai/blog-post/youtube-alternatives
    • Harmful to them because it affects their business. *Sigh*
    • TCL 75" 4K Smart TV hits lowest price, now less than £500 by Paul Hill Are you in the UK and looking for a massive 75-inch Ultra HD 4K HDR TV at a relatively affordable price? If so, check out this TCL (75P755K) 75-inch TV now because it’s at its lowest price of just £499.00, down 15% from £589.00. The model in question is slightly older, from 2024, but it’s still an excellent home entertainment upgrade given its feature set and aggressive price point. What you get: Features for the price The feature set of this model is definitely pretty impressive. It supports 4K HDR, wide colour gamut, and multiple HDR formats including HDR10+ and Dolby Vision. It also leverages MEMC (Motion Estimation & Motion Compensation), a proprietary algorithm from TCL that helps to reduce motion display blur and keep motion trails to a minimum. While MEMC will do heavy lifting to ensure the best picture, the TV only has a 60Hz refresh rate, but an effective rate of 120Hz thanks to efforts by TCL. This TCL model features Dolby Atmos 2.0 that immerses you more in whatever you’re watching on the TV. In terms of software, this TV comes with Google TV (based on Android) which is well-known and widely supported, ensuring you can use all the apps you depend on. It also supports Google Assistant, Chromecast, and voice control. The Chromecast support allows you to easily stream from your computer or phone to the TV to share what you’re watching to the people around you. The Google Assistant support can also be good if you have smart home devices around the house that can connect to it. The audio features for this TV are also good and mean you don’t need to buy a separate sound bar immediately. User experience and potential considerations According to What Hi-Fi, which reviewed the smaller 65-inch version of this TV, TCL’s TV delivers when it comes to HDR; gaming features such as low input lag, VRR, and Game Bar; wide colour gamut, and the operating system. What it didn’t like about the TV was the limited brightness, which degraded the HDR in bright rooms; the average motion handling; the lack of bass; the lack of local dimming; and the budget-oriented build quality. Making the smart buy decision If you can overlook its limitations, this TV could be a good pick if you need a new TV in the living room on a budget. If you are a serious gamer looking for a high refresh rate, or someone in a very bright room, then you will probably want to look elsewhere. Amazon is also offering free add-on services including wall mounting and unpack. If you do decide to pick up this TCL TV and find a fault with it, you have 30-days from getting the receipt to return it. TCL 75P755K 75-inch 4K TV: £499 (Amazon UK) - MSRP £589 / 15% off This Amazon deal is U.K. 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 UK deals page here. Get Prime, Prime Video, Music Unlimited, Audible or Kindle Unlimited, free for the first 30 days As an Amazon Associate we earn from qualifying purchases.
  • Recent Achievements

    • Week One Done
      theevergreentree earned a badge
      Week One Done
    • Dedicated
      Fryer Tuck earned a badge
      Dedicated
    • Week One Done
      luxoxfurniture earned a badge
      Week One Done
    • First Post
      Uranus_enjoyer earned a badge
      First Post
    • Week One Done
      Uranus_enjoyer earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      439
    2. 2
      +FloatingFatMan
      247
    3. 3
      snowy owl
      226
    4. 4
      ATLien_0
      212
    5. 5
      Xenon
      152
  • Tell a friend

    Love Neowin? Tell a friend!