• 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

    • Firefox, for privacy, wide range of plugins without having to suffer the latest Google manifest restrictions and when used on Android for the mobile browser plugins like an ad-blocker, sadly that option isn't available to me now I've swapped to iOS as outside of the EU Firefox mobile is just a reskin of Safari
    • Ok will give that a shot soon as wake up in morning.     Hopefully does restore it working right  
    • Try doing a reset/repair on the Windows store: To reset the Microsoft Store on Windows 11, press the Windows key + I to open Settings, go to Apps & features, find Microsoft Store, click on it, select Advanced options, and then click the Reset button. This will clear the cache and restore the app to its default state, which can help resolve issues.
    • Microsoft's new Exchange Message Trace: What admins need to know before September by Paul Hill Microsoft has just announced the general availability of the new Message Trace in the Exchange admin center (EAC) in Exchange Online for its worldwide (WW) customers. The Redmond giant said that it’ll begin rolling it out in mid-June and complete the rollout in July. Message Trace in the Exchange Admin Center for Exchange Online is a tool that lets admins trace which path emails took as they traveled through the Microsoft 365 organization. It lets admins see if emails were received, rejected, or deferred. It is helpful for troubleshooting mail flow issues and validating policy changes. To get started with the new Message Trace, admins can access it by going to the Exchange admin center > Mail flow > Message Trace. While the Windows-maker has received positive feedback during the Public Preview, you can still provide your thoughts through Exchange admin center > Give Feedback. In addition, Microsoft will continue to maintain the old Message Trace user experience in Exchange admin center and cmdlets for several months to ease the transition, however, they will be deprecated for WW customers starting from September 1. The Reporting Webservice support for Message Trace data will also begin deprecating on this date. A side note to mention here is that this timeline only applies to the WW environment and doesn’t affect GCC, GCC-High, DOD, or other sovereign clouds. More information about the switch over for those will be provided in the second half of the year. Who it affects, and how These changes need to be noted by Exchange Online administrators and IT professionals as those are the people who will be directly affected. Specifically, it will affect anyone managing mail flow and troubleshooting email delivery in Exchange Online. Those who are affected will have to get switched over to the new Message Trace before Microsoft starts deprecating features in several months time. Admins will want to act promptly to avoid any unforeseen issues that could arise. Another detail that admins should be aware of is that scripts that rely on the older “Get-MessageTrace” or “Get-MessageTraceDetail” cmdlets will break on September 1. To address this, admins will need to update their scripts to use the new “Get-MessageTraceV2” and the “Get-MessageTraceDetailV2” cmdlets. Finally, any admins out there using the Reporting Webservice for Message Trace data will also need to make a change. They will need to shift to the new Message Trace PowerShell cmdlets. Why it’s happening Microsoft has been working on a new Message Trace experience, incorporating feedback from the Public Preview phase, to improve its design and performance. The switch gives Microsoft the opportunity to standardize and modernize admin interfaces and the underlying technologies. What to watch for While September 1 may seem like a long way away, fixing any issues, such as scripts due to deprecations, could take some time. Any admins managing the affected items need to ensure they deal with affected components in a timely manner. In terms of documentation, Microsoft has so far only released the Public Preview document which highlights the changes between the old and new versions. Microsoft says that it will publish cmdlet documentation for the new Message Trace cmdlets by the time of the general availability, so admins should look out for that.
    • Microsoft PC Manager 3.17.2.0 (Offline Installer) by Razvan Serea With Microsoft PC Manager, users can easily perform basic computer maintenance and enhance the speed of their devices with just one click. This app offers a range of features, including disk cleanup, startup app management, virus scanning, Windows Update checks, process monitoring, and storage management. Microsoft PC Manager key features: Storage Manager- easily uninstall infrequently used apps, manage large files, perform a cleanup, and set up Storage Sense to automatically clear temporary files. Health Checkup feature -scans for potential problems, viruses, and startup programs to turn off. It helps you identify unnecessary items to remove, optimizing your system's performance. Pop-up Management - block pop-up windows from appearing in apps. Windows Update - scans your system for any pending updates. Startup Apps - enable or disable startup apps on your PC, allowing you to optimize your system's startup performance. Browser Protection - rest assured that harmful programs cannot alter your default browser. Also enables you to change your default browser. Process Management - allows you to conveniently terminate any active process, ensuring optimal system performance and resource utilization. Anti-virus protection - Fully integrated with Windows Security. Safeguard your PC anytime. Quick Steps: Download Microsoft PC Manager Offline Installer (APPX/MSIX) with Adguard Adguard serves as a third-party online service, offering a user-friendly method for directly downloading appx, appxbundle, and msixbundle files from the Microsoft Store. Official download links will be generated for both the app's various versions and its dependency packages. How to download Microsoft PC Manager Offline Installer (APPX/MSIX) 1. Initially, you must find the app URL within the Microsoft Store. Access the Microsoft Store via your browser and search for "Microsoft PC Manager". Once located, copy the app URL, which includes the product ID, either from the address bar or from the provided link below. https://apps.microsoft.com/detail/9PM860492SZD 2. Now paste the app URL into the designated area, then click the check mark button to produce a direct download link. 3. To download, right-click the relevant link and select “Save link as…” from your browser's menu. Occasionally, Microsoft Edge may flag the download as insecure. In such cases, consider utilizing alternative browsers such as Google Chrome or Firefox to successfully complete the download. Microsoft PC Manager is a completely free tool optimized exclusively for use on Windows 10 (version 1809 or newer) and Windows 11. Download: Microsoft PC Manager 3.17.2.0 | from Microsoft Store View: Microsoft PC Manager Home Page Get alerted to all of our Software updates on Twitter at @NeowinSoftware
  • Recent Achievements

    • Week One Done
      Leonard grant earned a badge
      Week One Done
    • One Month Later
      portacnb1 earned a badge
      One Month Later
    • Week One Done
      portacnb1 earned a badge
      Week One Done
    • First Post
      m10d earned a badge
      First Post
    • Conversation Starter
      DarkShrunken earned a badge
      Conversation Starter
  • Popular Contributors

    1. 1
      +primortal
      261
    2. 2
      snowy owl
      158
    3. 3
      +FloatingFatMan
      145
    4. 4
      ATLien_0
      140
    5. 5
      Xenon
      131
  • Tell a friend

    Love Neowin? Tell a friend!