Question

我有以下问题。我正在开发一款基于浏览器的小游戏，我用键盘键添加了动作。它正在工作，但现在我想添加一个代码，它将播放器的当前位置发送到MySQL数据库。问题是，当我按下按钮时，例如W，我的角色继续向上移动，每一步他都会向MySQL发送数据，从而创建一个looooong的PHP请求列表。我怎样才能加快这个过程？以下是我使用的代码部分：

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

在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

首先，这是一个整洁的代码版本，没有任何功能变化：

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

现在，减少ajax调用次数：

//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的memcache理念听起来不错，可以独立于上面的代码实现。

Answer 2

以下是两个请求之间间隔为20秒的实现：

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

加快与MySQL的连接？

2 个答案: