Faster connection with MySQL? - php

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);
}