• 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

    • Fan Control V227 by Razvan Serea Fan Control is a powerful and versatile portable utility that allows you to monitor, control and customize the fans of your GPU and CPU to keep your machine cool and running smoothly. Fan Control supports a wide range of devices and hardware configurations, giving you complete control over your computer's cooling system. Fan Control backend is mainly based on LibreHardwareMonitor, an open source fork of the original OpenHardwareMonitor. This means that hardware compatiblity is entirely open for anyone to contribute, and doesn't rely on a single developer who may stop caring at some point. Combined with the plugin system, Fan Control is unlocked for many generations of hardware to come. Main features Guided setup process on first launch Save, edit and load multiple profiles Change the theme and color of the application. Multiple temperature sources ( CPU, GPU, motherboard, hard drives... ) Multiple fan curve functions, including a custom graph Mix fan curves or sensor togethers (max, min, average) Low resource usage Advanced tuning with steps, start %, stop %, response time and hysteresis FanControl V227 changelog: Allow decimal with hysteresis values Radeon Pro support through ADLX Fix a bug when cancelling the graph editing dialog Update LibreHardwareMonitorLib Download: FanControl V227 | Installer ~15.0 MB (Open Source) View: Fan Control Homepage | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Lol tf you are talking about. People are PAYING by using this app exclusively, just indirectly. Do you have any idea how much facebook charges for api access to WhatsApp which has become more or less a monopoly in e-commerce.
    • My kid tried, so I took her to Microcenter and showed her the differences in price as well as storage and specs. We bought a Windows machine. She loves it, and is off to college this fall with her gaming level windows laptop at the price of a Mac that came with a 512GB SSD, and half the RAM.
    • Hasleo Backup Suite Free 5.4.2.1 by Razvan Serea Hasleo Backup Suite Free is a free Windows backup and restore software, which embeds backup, restore and cloning features, it is designed for Windows operating system users and can be used on both Windows PCs and Servers. The backup and restore feature of Hasleo Backup Suite can help you back up and restore the Windows operating systems, disks, partitions and files (folders) to protect the security of your Windows operating system and personal data. The cloning feature of Hasleo Backup Suite can help you migrate Windows to another disk, or easily upgrade a disk to an SSD or a larger capacity disk. System Backup & Restore / Disk/Partition Backup & Restore Backup Windows operating system and boot-related partitions, including user settings, drivers and applications installed in these partitions, which ensures that you can quickly restore your Windows operating system once it crashes. Viruses, power failure, or other unknown reasons may cause data loss, so it is a good habit to regularly back up the drive that stores important files, you can at least recover lost files from the backup image files in the event of a disaster. System Clone / Disk Clone / Partition Clone Migrate the Windows operating system from one disk to another SSD or larger disk without reinstalling Windows, applications and drivers. Clone entire disk to another disk and ensure that the contents of the source disk and the destination disk are exactly the same. Clone a partition completely to the specified location on the current disk or another disk and ensure that the data will not be changed. File Backup & Restore Back up specified files(folders) instead of the entire drive to another location to protect your data, so you can quickly restore files(folders) from the backup image files when needed. Incremental/Differential/Full Backup Different backup modes are supported, you can flexibly choose data protection schemes, which can improve backup performance and save storage space while ensuring data security. Delta Restore Delta restore uses advanced delta detection technology to check the changed blocks on the destination drive and restore only the changed blocks, so it has a faster restore speed than the traditional full restore. Universal Restore This feature can help us restore the Windows operating system to computers with different hardware and ensure that Windows can work normally without any hardware compatibility issues. Hasleo Backup Suite 5.4.2.1 changelog: The program crashes when sending emails Application notifications cannot be displayed in the Windows Notification Center Updated Italian and German translations Fixed other minor bugs Download: Hasleo Backup Suite 5.4.2.1 | 33.9 MB (Freeware) Links: Hasleo Backup Suite Website | Hasleo Backup Suite Guide | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • 99% of Control Panel will be moved to Settings. Then by 2050, 20% of settings will have been moved to the Configuration Menu. I have no issues with Settings as it exists now in Windows 11. Bring everything over and be done with it.
  • Recent Achievements

    • Contributor
      GravityDead went up a rank
      Contributor
    • Week One Done
      BlakeBringer earned a badge
      Week One Done
    • Week One Done
      Helen Shafer earned a badge
      Week One Done
    • First Post
      emptyother earned a badge
      First Post
    • Week One Done
      Crunchy6 earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      660
    2. 2
      ATLien_0
      266
    3. 3
      Michael Scrip
      235
    4. 4
      Steven P.
      164
    5. 5
      +FloatingFatMan
      150
  • Tell a friend

    Love Neowin? Tell a friend!