Hey guys. Ive been working on an online game and Im attempting to code the attack arena. Bascialy what i want is people to be able to "sit down" at some sort of "table" (kinda like online poker) then they would battle it out at that "table" or arena etc. Is there a way to do that using PHP or would I have to pick up something like ajax? Thanks.

Hey guys. Ive been working on an online game and Im attempting to code the attack arena. Bascialy what i want is people to be able to "sit down" at some sort of "table" (kinda like online poker) then they would battle it out at that "table" or arena etc. Is there a way to do that using PHP or would I have to pick up something like ajax? Thanks.

You can definitely create something like that with JavaScript (AJAX) on the browser end and PHP on the server end.

You can definitely create something like that with JavaScript (AJAX) on the browser end and PHP on the server end.

Are there any resources out there that would point me in the right direction? Thanks.

You could do it in PHP, but I think using ajax would be a better choice for keeping all the different users synced at the table. Just google for 'ajax tutorial' and you'll get tons of results.

Are there any resources out there that would point me in the right direction? Thanks.

Here's an example:

Client (Browser) End.

The JS function getXHRObject() find the XMLHTTPRequest Object implemented by the users browser. If the browser is IE6- then we need to retrieve this from an ActiveX Object.
Firefox, Safari, IE7 etc. implement the native XMLHTTPRequest Object.

sendXHR() is teh JS function that actually makes the XMLHTTPRequest.

xmlhttp.onreadystatechange = function() { handleXHRstateChange(); };

xmlhttp is the XMLHTTPRequest Object. "onreadystatechange" is method of the XMLHTTPRequest that is triggered on state changes. This is where you attach your function that monitors the state change and does stuff...

Here is the HTML page with the JavaScript that will make an XMLHTTPRequest to the PHP Script. This implementation uses a Global XMLHTTPRequest Object. You can also use a closure, but that is a bit complicated if you've never noticed closures before...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example of simple AJAX request</title>
</head>

<body>


<script>

/** global XMLHTTPRequest Object */
var xmlhttp = false;

/**
* Retrieve the XMLHTTPRequest Object
*/
function getXHRObject() {
	var xmlhttp = false;
	if (window.XMLHttpRequest) {
		// FF, IE7+, Opera, Safari
		xmlhttp = (new XMLHttpRequest());
    } else if (window.ActiveXObject) {
		// find latest XMLHTTP implementation for IE 6-
		var versions = [
		"Msxml2.XMLHTTP.7.0", 
		"Msxml2.XMLHTTP.6.0", 
		"Msxml2.XMLHTTP.5.0", 
		"Msxml2.XMLHTTP.4.0", 
		"MSXML2.XMLHTTP.3.0", 
		"MSXML2.XMLHTTP",
		"Microsoft.XMLHTTP"];
		var n = versions.length;
		for (var i = 0; i <  n; i++) {
			try {
				if (xmlhttp = (new ActiveXObject(versions[i]))) {
					alert(versions[1]);
					break;
				}
			} catch (e) { /* try next */ }
		}
	}
	return xmlhttp;
}

/**
* Send an HTTP Request via XMLHTTPRequest
*/
function sendXHR(url, method, data, user, pw) {

	// validate the params
	url = url || window.location;
	method = method || 'GET';
	data = data || '';
	user = user || null;
	pw = pw || null;

	// create an execute xmlHTTPRequest
	xmlhttp = getXHRObject();
	if (!xmlhttp) {
		alert('Your browser does not support XMLHTTPRequest. Please upgrade.');
		return false;
	}
	// set the request handler. 
	// note: xmlhttp will be available in the handler since it is a global (another method is using a JS closure)
	xmlhttp.onreadystatechange = function() { handleXHRstateChange(); };
	xmlhttp.open(method, url, true, user, pw);
	xmlhttp.send(data);
}

/**
* Handle the state changes triggered by the XMLHTTPRequest
*/
function handleXHRstateChange() {
	if (xmlhttp.readyState == 4) {
		if (xmlhttp.status == 200) {
			//alert('The XMLHTTPRequest was completed successfully.');
			alert(xmlhttp.responseText);
		} else if (xmlhttp.status == 401) {
			alert('Page needs Authorization or the username and password supplied are incorrect.');
		} else {
			alert('An unexpected HTTP Status was returned. HTTP Status: '+xmlhttp.status);
		}
	}
}

// test
function sendQuery() {
	sendXHR('server.php?task='+document.getElementById('task').value+'&r='+(new Date()).getTime());
}

</script>

<form id="ajax_form" onsubmit="sendQuery();return false;" action="server.php">
<fieldset>
	<legend>Simple Example of XMLHTTPRequest (AJAX) with PHP Server Script</legend>
	Query: <input type="text" id="task" name="task" />
	<input type="submit" value="Send" /> (examples: day, month, year)
</fieldset>
</form>

</body>
</html>

Heres the PHP Script: (server.php)

<?php

/**
* Example of a server end for an AJAX client
*/

// get the HTTP GET param named "task"
$task = isset($_GET['task']) ? trim($_GET['task']) : false;

// choose which PHP code to run based on $task
if ($task == 'day') {
	echo date('l', time());
	
} elseif ($task == 'month') {
	echo date('F', time());
	
} elseif ($task == 'year') {
	echo date('Y', time());
	
} else {
	echo 'Usage: task=day, task=month, task=year';
}


?>

Thanks for the help. I understand the basics, like creating a simple form you posted above, but I have scoured the net for advanced topics and found nothing. For example what I would like to do, create some sort of "table" system where people can "sit down" or enter the arena, and there is nothing. I don't really know where to go from here. My main problem is having many different "areas" that can support just two people to have a turn based battle. I think I can create the battle system no problem but its the "table/arena" system that is giving me the trouble. How can I make it so that when someone "sits in" that no one else can sit in that seat and only one other person could "sit in" or join the arena at the opposing side?

Thansk for all the help again and I hope you can point me in the right direction:)

Are you thinking of using a database to store the data you need for this? Its the easiest way to achieve this as PHP can only persist states across HTTP requests using either a database or the disk unless you have a special setup such as memcached etc.

You will just need to create a single battle by entering it as a row in the database. Then you can assign users to that battle via their username, or session id.
You can keep track of who's turn it is via a column on the same table.

BTW: The AJAX bit is just for making your webpage more application like, so it doesn't have to reload on each challengers turn. But its not necessary. I think it would be easier for you to go with just PHP if you aren't used to developing with AJAX as it requires more coding than the traditional model..

Are you thinking of using a database to store the data you need for this? Its the easiest way to achieve this as PHP can only persist states across HTTP requests using either a database or the disk unless you have a special setup such as memcached etc.

You will just need to create a single battle by entering it as a row in the database. Then you can assign users to that battle via their username, or session id.
You can keep track of who's turn it is via a column on the same table.

BTW: The AJAX bit is just for making your webpage more application like, so it doesn't have to reload on each challengers turn. But its not necessary. I think it would be easier for you to go with just PHP if you aren't used to developing with AJAX as it requires more coding than the traditional model..

I have thought about how to code it with just PHP, which I agree would be easier, but I don't know how to implement the turn based element into the PHP code. Would I just have to have an auto refresh script or something like that? Thanks.

I have thought about how to code it with just PHP, which I agree would be easier, but I don't know how to implement the turn based element into the PHP code. Would I just have to have an auto refresh script or something like that? Thanks.

Oh I see what you mean.
You could auto refresh and Iframe or hidden frame, but AJAX is probably simpler.

Just make periodic AJAX requests to the server in the background, to check if the other user has taken their turn. If they have, then update the current user with this information.

This is called HTTP Polling.

The other method's you can use are HTTP Binding (Comet), and HTTP BOSH defined in the XMPP/Jabber Specs: http://www.xmpp.org/extensions/xep-0124.html.
HTTP BOSH is the most efficient bandwidth wise and latency wise, but hardest to implement. (It requires a special server - Apache should have a module out soon for that though)

You can also use the "on-demand JavaScript" method. Its where you update the DOM with a <script> node each time you want to make a HTTP request. The external JS is then executed without loading the page.

Thanks!!! How about creating an "table" type system? I dont really know where to start w/ this topic.

Thanks!!! How about creating an "table" type system? I dont really know where to start w/ this topic.

I'm not sure I understand the "table" type system. Could you elaborate on that?

I'm assuming it is a table where a user can create an instance, like a battle, and other users viewing the table can view the open instances and the onces currently being played. A user can then choose to join an instance (2 players) or create a new instance and wait?

??

I'm not sure I understand the "table" type system. Could you elaborate on that?

I'm assuming it is a table where a user can create an instance, like a battle, and other users viewing the table can view the open instances and the onces currently being played. A user can then choose to join an instance (2 players) or create a new instance and wait?

??

Exactly. Id like to create the same type of system as online poker where a user can "sit in" but in this case you would be fighting and it would be limited to two users.

This article has been dead for over six months. Start a new discussion instead.