Advice on these functions

[tazmith]

I've got these 2 functions, and I'm wondering if anyone could give me some advice on it, or help me with a better option. Basically i'm running into a problem with the page it glitches out a lot..

 

The functions are for an RPG game world (map) Basically a user can move north, south, east and west, however; after about 3 moves, the script glitches out, and freezes for a minute and than either you need to refresh the page, or just wait it out until it allows you to move again.

 

The movements are based off the "WASD" keys, thats how you navigate north, south, east and west.

 

If anyone could help me with this, that'd be awesome, thanks.

//function that moves the user on the map.
function move(direction)

{

    var ajaxRequest;



    try

    {

        //Opera 8.0+, Firefox, Safari

        ajaxRequest = new XMLHttpRequest();

    }

    catch (e)

    {

        //Internet Explorer Browsers

        try

        {

            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");

        }

        catch (e)

        {

            try

            {

                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");

            }

            catch (e)

            {

                alert("Your browser broke!");

                return false;

            }

        }

    }



    //function that will recieve data sent to the server.

    ajaxRequest.onreadystatechange = function()

    {

        if (ajaxRequest.readyState == 4)

        {

        }

    }

    ajaxRequest.open("GET", "move.php?direction=" + direction, true);

    ajaxRequest.send(null);

    setTimeout("clearatk()", 10);

    setTimeout("create()", 30);

    setTimeout("getmob()", 40);

    setTimeout("getname()", 50);

}


//function that creates the actual map.
function create()

{

    var ajaxRequest;



    try

    {

        //Opera 8.0+, Firefox, Safari

        ajaxRequest = new XMLHttpRequest();

    }

    catch (e)

    {

        //Internet Explorer Browsers

        try

        {

            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");

        }

        catch (e)

        {

            try

            {

                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");

            }

            catch (e)

            {

                alert("Your browser broke!");

                return false;

            }

        }

    }



    //function that will recieve data sent to the server.

    ajaxRequest.onreadystatechange = function()

    {

        if (ajaxRequest.readyState == 4)

        {

            document.getElementById("create").innerHTML = ajaxRequest.responseText;

        }

    }

    ajaxRequest.open("GET", "create.php?ajax=1", true);

    ajaxRequest.send(null);

}

[phpzer]

I don't think ajax is a good option for this, the user shouldn't wait for the server to load for moving and so on. The server should always be connected, wait for the user to send information and continue waiting for the next information so the user has technically no wait time (just like with online multiplayer games). How to do it? Easy: websockets! If you want you can read this it explains how to use sockets in javascript and for the server side you can use this php library.

 

If you REALLY need ajax this is an improved version of your script (a bit more organized):

function getRequest(page, callback) {
    if(!callback)
        callback = function() {};
    var ajaxRequest;
    try {
        ajaxRequest = new XMLHttpRequest();
    }catch(e) {
        try {
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e) {
            try {
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e) {
                alert("Your browser doesn't support ajax");
                return false;
            }
        }
    }
    ajaxRequest.onreadystatechange = function() {
        if(ajaxRequest.readyState == 4)
            return callback();
    }
    ajaxRequest.open("GET", page, true);
    ajaxRequest.send(null);
}

function move(direction) {
    getRequest("move.php?direction="+direction, function() {
        clearatk();
        create();
        getmob();
        getname();
    });
}

function create() {
    getRequest("create.php?ajax=1", function() {
        document.getElementById("create").innerHTML = "";
        document.getElementById("create").innerHTML = ajaxRequest.responseText;
    });
}

BTW: I think that the lag comes out on how you generate your map! PHP should return a json array containing the map and not the actual HTML, the HTML should be generated by the client. 

 

Edited February 20, 2014 by phpzer

[tazmith]

Thanks for the reply phpzer.

 

I think what's happening is there's constantly a request being opened, the move function and create function both send a request at the same time. AJAX seems to be the best option here. I used to run it just as php but letting the actual page load is a hell of a lot slower than using AJAX.

 

Someone was telling me about websockets, but i'm not familiar with it.

[tazmith]

oh woops, I forgot you mentioned websockets too.

[phpzer]

I think what's happening is there's constantly a request being opened, the move function and create function both send a request at the same time

Exactly, that's why it's bad to use ajax

Someone was telling me about websockets, but i'm not familiar with it.

oh woops, I forgot you mentioned websockets too.

Yes could you please post the php scripts here so I can help you rewrite them with a socket? (If you don't want to publish your scripts with the whole world send me a private message)