Faster connection with MySQL?

Question

I have a following problem. I'm working on a small browser based game, and I added movement with keyboard keys. It is working, but now I want to add a code, which will send the current position of player to the MySQL database. The problem is, when I push the button, for example W, my character keeps moving upward, and every step he sends a data to MySQL, creating a looooong list of PHP requests. How can I speed up this process? Here is the part of code I use:

if (key == key_W) { // Player Up
if (parseFloat(wzr.style.top)-6 < 0)
{
 $('#wzro').stop().animate({
 top: 342
 }, 0, function() {
 $('#wzro').empty();
 });
YWalk();
}

else
{
 $('#wzro').stop().animate({
 top: '-=6'
 }, 0, function() {
 $('#wzro').empty();
 });
YWalk();
}
}

function YWalk(){
            var wzr = document.getElementById("wzro");
            var xmlHttp;
            if (window.XMLHttpRequest){
            xmlHttp=new XMLHttpRequest();
            }
            else{
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlHttp.open("GET","datachodzeniey.php?y="+ wzr.style.top);
            xmlHttp.send(null);
}

And in datachodzeniey.php:

<?php
session_start();
$username = $_SESSION['username'];
$y=$_GET['y'];

$connect = mysql_connect("localhost", "root", "");
$select_db = mysql_select_db("testdb", $connect);
$q=mysql_query("update players set y='$y' where dispname='$username'");
?>

Answer 1

First, here's a tidy version of your code, with no functional changes :

//in some outer scope
var $wzro = $("#wzro");

//in the key event handler
if (key == key_W) { //Player Up
    var top = parseInt($wzro.css('top')) - 6;
    top = (top < 0) ? 342 : top;
    $wzro.empty().css('top', top);
    $.ajax({ url: "datachodzeniey.php?y=" + top });
}

Now, to reduce the number of ajax calls :

//in some outer scope
var $wzro = $("#wzro");
var u = {//u for upload
    url: "datachodzeniey.php?y=",
    allow: true,
    reallow: function(){ u.allow = true; },
    delay: 100//(milliseconds) adjust as necessary
};

//in the key event handler
if (key == key_W) { //Player Up
    var top = parseInt($wzro.css('top')) - 6;
    top = (top < 0) ? 342 : top;
    $wzro.empty().css('top', top);
    if(u.allow) {
        $.ajax({ url: u.url + top });
        u.allow = false;
        setTimeout(u.reallow, u.delay);
    }
}

@JaspalSingh's memcache idea sounds good and can be implemented independently of the code above.

Answer 2

Here is the implementation with 20 seconds interval between two requests:

            var nowTime = new Date(); 
            var lastExecuted= new Date();

            if (key == key_W) { // Player Up
                nowTime = new Date();
                if (parseFloat(wzr.style.top)-6 < 0)
                {
                    $('#wzro').stop().animate({
                        top: 342
                    }, 0, function() {
                        $('#wzro').empty();
                    });

                } else {
                    $('#wzro').stop().animate({
                        top: '-=6'
                    }, 0, function() {
                        $('#wzro').empty();
                    });
                }
                //time interval in  milliseconds - here i have set it to 20seconds
                if (nowTime - lastExecuted >= 20000) {
                    YWalk();
                }
            }

            function YWalk(){
                lastExecuted = new Date();
                var wzr = document.getElementById("wzro");
                var xmlHttp;
                if (window.XMLHttpRequest){
                    xmlHttp=new XMLHttpRequest();
                }
                else{
                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlHttp.open("GET","datachodzeniey.php?y="+ wzr.style.top);
                xmlHttp.send(null);
            }