Server and Client Communications (Sort Of)

In a typical gaming environment there is a "game server" which is responsible for tracking all the communications between players (clients) within the game. Communications can be considered anything from the chat function, to the location of bullets within the game. Pretty much any piece of data that one player needs to send to another goes through the game server.

(That was in its simplest form, it is more complicated than that...go google it)

With a PBBG it gets a little tricky because there is no game server in play, its all cron jobs and reactions to players. (This is due to web development being "stateless"....again go google it, its why web programming is "different")

I use the following code to send interactions between two or more players. Pretty much you have a table that translates the game commands to each player...however the client code (javascript) has to be a bit smarter to handle the "statelessness" of the content)

See it in Action (note, you will have to enable popups)

If you want to implement it, you will need to create the following two tables.

User Table: Hopefully you allready have one of these, if so just add lastCommID to it.

CREATE TABLE `lab_user` (
`userID` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`userName` VARCHAR( 20 ) NOT NULL ,
`lastCommID` INT NOT NULL
) ENGINE = MYISAM ;

Command Table: "Meat of the code"

CREATE TABLE `lab_command` (
`commID` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`userID` INT NOT NULL ,
`command` VARCHAR( 20 ) NOT NULL ,
`commandOptions` VARCHAR( 255 ) NOT NULL
) ENGINE = MYISAM ;

You can download the source here.

Please keep in mind...USER IDs are HARD CODED in the source...you will need to config/play with that yourself.


For those that just like to "look". Here is some javascript....

var xmlHttpDivID = "";
var ajaxInUse = false;
var readyToSend = true;

function getXmlHttpObject(handler)
{
var objXMLHttp=null;
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}

if(objXMLHttp == null)
{
alert("Your browser is not AJAX/Web 2.0 enabled");
}

return objXMLHttp;
}

//////////////////////////////////////////////////////////////////////////
//
//
// Sending the commands to the server
//
//
//
//////////////////////////////////////////////////////////////////////////
function mouseClicked(e)
{
if(readyToSend)
{
pos = getMousePos(e);
sendCommand("move", "player_|" + pos[0] + "," + pos[1]);
}
else
{
log("Waiting for a listener!");
}
}

function sendCommand(command, options)
{
if(!ajaxInUse)
{
ajaxInUse = true;

xmlHttp=getXmlHttpObject();
xmlHttp.onreadystatechange=commandSent;

url="commandHandler.php?action=sendComm";
url+="&userID="; //very bad, change this for testing...
url+="&command=" + command;
url+="&options=" + options;
url+="&cache_killer=" + Math.random();
xmlHttp.open("GET",url,true)
xmlHttp.send(null);
log("Command Sent");
}
else
{
log("Ajax is in use...try later");
}
}

function commandSent()
{
if (xmlHttp.readyState==4)
{
log("Command Sent and Done");
ajaxInUse = false;
}
}



//////////////////////////////////////////////////////////////////////////
//
//
// Reading Commands from the server
//
//
//
//////////////////////////////////////////////////////////////////////////
var commTimerID = "";

function startListening()
{
requestNextHttp=getXmlHttpObject();

url="commandHandler.php?action=start";
url+="&userID="; //very bad, change this for testing...
url+="&cache_killer=" + Math.random();
requestNextHttp.open("GET",url,true)
requestNextHttp.send(null);
//log("Ask for next command");
requestNextCommand();

}



function requestNextCommand()
{
requestNextHttp=getXmlHttpObject();
requestNextHttp.onreadystatechange=processCommand;

url="commandHandler.php?action=getComm";
url+="&userID="; //very bad, change this for testing...
url+="&cache_killer=" + Math.random();
requestNextHttp.open("GET",url,true)
requestNextHttp.send(null);
//log("Ask for next command");
clearTimeout(commTimerID);
}

function processCommand()
{
if (requestNextHttp.readyState==4)
{
str = requestNextHttp.responseText;

if(str != "")
{
log2(requestNextHttp.responseText);
performCommand(str);
}

commTimerID = setTimeout("requestNextCommand()", 3000);
}
}

function performCommand(str)
{
data = str.split("|");

if(data.length > 2)
{
commID = data[0];
sentByUserID = data[1];
command = data[2];

if(command == "move")
{
objID = data[3];
pos = data[4].split(",");
destX = pos[0];
destY = pos[1];
log("Moving " + objID + " to " + destX + "," + destY);
setDest(objID, destX, destY);
}
}
}



//
//add the event to the document
//
document.onclick = mouseClicked;
document.onload = startListening();

Javascript - Move that Image

Another Code Report,

How to move an image to another place on the screen. The user picks the location by clicking the mouse somewhere within the window.

This builds on the last code base, which featured the mouse Position finder code.

Watch It In Action (View source to get the code)

A couple of notes to keep in mind:

• You can only click once, then you have to wait for it to get to it's destination
• log() - Puts a message in the div, a cheap debugging technique
• move() - The meat! What we call a re-cursive function, is called again and again until the object reaches its destination
• findPos() - returns the position of an object, this is actual a cheater function as it does not get the true position of an object. (see mobLib for the full function)

I purposely did not comment well, if you need to have comments for these simple functions, you may want to get something a bit easier to work with. (my 2 cents)

var speed = 1;
var moving = false;
function mouseClicked(e)
{
if(!moving)
{
pos = getMousePos(e); //from included js file
moving = true;
move("player", pos[0],pos[1]);
log("Clicked: " + pos[0] + "," + pos[1]);
}
else
{
log("Object is in the process of moving.");
log("Click refresh to start over.");
}
}

function log(msg)
{
document.getElementById("log").innerHTML = msg + "
" + document.getElementById("log").innerHTML;
}


function move(objID, destX, destY)
{
var obj = document.getElementById(objID);
var pos = findPos(objID);

currentX = pos[0];
currentY = pos[1];
newX = currentX;
newY = currentY;



if(destX > currentX)
{
//log("X:" + destX + " vs CurrentX: " + currentX);
newX+=speed;
}

if(destX <> currentY)
{
newY+=speed;
}

if(destY < top =" newY;" left =" newX;" t =" setTimeout(" moving =" false;" posx =" 0;" posy =" 0;" e =" window.event;" posx =" e.pageX;" posy =" e.pageY;" posx =" e.clientX" posy =" e.clientY" out =" new" obj =" document.getElementById(objectID);" curleft =" curtop" curleft =" obj.offsetLeft" curtop =" obj.offsetTop" onclick =" mouseClicked;">
Some things to try and play with:

• Can you speed up the movement to the destination?
• Can you add more images and allow the user to control more than 1?
• Can you make the image move so that it's center ends up on the destination point? (right now the top left corner ends up there)
  

Javascript - Finding that mouse position

I seem to constantly need this bit of code. Hope it helps someone else.

The following javascript code, finds the mouse position and returns it in an array.

function getMousePos(e) {
var posx = 0;
var posy = 0;
if (!e) var e = window.event;

if (e.pageX || e.pageY)
{
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY)
{
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
var out = new Array(2);
out[0] = posx;
out[1] = posy;
return out;
}

Demo - You can see it in action here.

Credits - I got the basics of this script from here.

Tool - Popup builder

An very old bit of code, written before popups were considered a curse.

This tool will allow a user to build their own popup screen and handler.

Again bit old, but I thought I'd put it out there.

View the Tool

Tool - Creating Drop Down Menus

Another experiment for the lab. I got a bit tired of creating those drop down menus by hand, so I built this page to help me create them.

Looking back, I could have built a code snippet or macro to do the same thing, but this was more fun to build.

All HTML and javascript.

Feel free to use and modify for your own use.

Right click and "View Source" to get code.

Drop Down Builder

Code - Javascript Animation

Many moons ago, I wrote this small library package. It handles a number of interactive functions that one might use on a Web 2.0 site.

It's not fully tested but I use parts and pieces of it quite often.

I figure that if anyone else finds it useful they might like to look at it. Especially those new to programming.

The most interesting is an animation function which allows you to set the velocity of a div tag and then watch it zoom around the screen.

Most functions are multi-browser compatible, I think one if IE only though.

Feel free to use for any of your projects. A link would be nice but not mandatory.

Source Available