Question

I am coding a web based game in which the player moves around on a 7×7 grid.
Currently, the move buttons call a ../action/move/up style PHP url that updates the database and then reloads the game page to reflect the new player position.

I want to be able to have the player click move and use JQuery tweens to move the player token without a page refresh. The part I’m unsure about is, I want this to update the server and then lock the move buttons. The JS would then call a URL or two that would return new values for a few variables on the page, as well as a flag checking if the move was successful. If it was, the move buttons would then unlock and allow the player to move again.

The pseudocode I’m imagining:

On Click (Move Up)  
{  
if(ReadyToMove)
    {
    Tween(ship, old position, new position)
    ReadyToMove = 0
    Call MoveDone
    }
}

MoveDone
{
ReadyToMove = Url('../movecheck/movement/' . current position .)
/* this url would return either 1 or 0 depending on if db xy matches given xy */    

if(!ReadyToMove)
{ current position = old position; display error(movefail) }

}

How do I actually do this?

Answer 1

Have a look at $.ajax():

$.ajax({
    method: 'POST',
    url: ':./movecheck/movement/'
    data: /* an object containing data key/value pairs */,
    dataType: 'json',
    success: function(resp) {
        /* do stuff after the response from the server has been received */
    }
});

To get a proper resp object, simply echo json_encode(...); with ... being an associative array or stdClass object containing your data, e.g. array('canMove' => true)