1

私はオンライン タイル ベースのゲームを作成しており、あなたが立っている場所の座標を取得し、あなたの周りに周囲 (タイル) を構築するコードのスクリプトを作成しました (ゲームは、保持する多くのセルを持つテーブルを使用して作成されます)。タイル)。

時々テーブルを更新できる AJAX を少し作成するのに助けが必要です (この質問のために 2 秒ごとに座ってみましょう)。私は AJAX の経験がなく、ゲームのこの小さな部分にのみ使用するだけでなく、時間がないため、すべてを学習する意味はありません (私も好きですが)。

これが私のゲームのセットアップ方法です。

php 文字に関する情報を取得するいくつかの php。* php

html データをグラフィック形式で表示する html。 html

だから私が必要とするのは、2秒ごとにphpを更新してからhtmlを更新するAJAXです。

4

2 に答える 2

1

AJAXのすべての複雑さを学ぶ時間を節約したい場合は、JavaScriptフレームワークを使用するのが良い近道です（一般的には時間の節約になります）。YUIのようなものを使用すると、わずか数行のコードでAJAX機能をアプリケーションに組み込むことができます。

具体的には、YUI接続マネージャーコンポーネントを使用する必要があります。YUIには優れたドキュメントがあるので、自分で理解するのは難しいことではありません。そうでない場合は、初心者向けの短いチュートリアルがあります。

HTMLフロントエンド内には、次のようなものがあります。

<!-- YUI source files --> 
<script src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js"></script> 
<script src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js"></script> 
<script src="http://yui.yahooapis.com/2.7.0/build/connection/connection-min.js"></script>
<script>
var tiles = new Array();
function refreshTable() {
    var sUrl = "ajax/table.php";
    var responseSuccess = function(o) {
        var root = o.responseXML.documentElement;
        var rows = root.getElementsByTagName('row');
        for (i=0; i<rows.length; i++) {
            tiles[i] = new Array();
            for (j=0; j<rows[i].childNodes.length; j++) {
                tiles[i][j] = rows[i].childNodes[j].firstChild.nodeValue;
            }
        }

        /*
         Update your table using the tiles[][] 2D array.
        /*
    }
    var responseFailure = function(o) {
        // Failure handler
        alert(o.statusText);
    }
    var callback = {
        success:responseSuccess,
        failure:responseFailure,
        timeout:3000
    }
    var transaction = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null);
}
setInterval(refreshTable(),2000);
</script>

PHPバックエンド内では、次のような形式でXMLデータを生成する必要があります。

<table>
    <row>
        <tile>dirt</tile>
        <tile>water</tile>
        <tile>water</tile>
        <tile>dirt</tile>
        <tile>dirt</tile>
    </row>
    <row>
        <tile>dirt</tile>
        <tile>dirt</tile>
        <tile>water</tile>
        <tile>water</tile>
        <tile>dirt</tile>
    </row>
    <row>
        <tile>dirt</tile>
        <tile>dirt</tile>
        <tile>water</tile>
        <tile>water</tile>
        <tile>dirt</tile>
    </row>
    <row>
        <tile>dirt</tile>
        <tile>dirt</tile>
        <tile>dirt</tile>
        <tile>water</tile>
        <tile>water</tile>
    </row>
    <row>
        <tile>dirt</tile>
        <tile>dirt</tile>
        <tile>dirt</tile>
        <tile>dirt</tile>
        <tile>water</tile>
    </row>
</table>

そしてそれがその要点です。サーバー側のPHPスクリプトに引数を渡す必要がある場合は、encodeURI（）を使用して引数をURLに追加し、 $ _GET[]スーパーグローバルを使用して引数にアクセスします。

于 2009-04-05T01:17:49.250 に答える
1

おそらくjQueryまたはPrototype JSを使用する必要があります。これらのライブラリはどちらも「いくつかの ajax」を実行できます。開発が初めてで、これが 1 回限りのプロジェクトである場合は、Prototype を使用することをお勧めします。

Prototype では、次の例のように、ajax 作業を行う関数と、作業を行う関数名をコールバック パラメータとして Prototype の periodicalExecuter を呼び出す関数を使用できます。x秒ごとに、いくつかのパラメーターをphpスクリプトに送信し、応答をページ上のいくつかの要素に入れる必要があります。これで始められるはずです：

    <script src="/js/Prototype.js">
    //calls renderResponse on completion of the AJAX post to the specified URL
    function sendRequest(parameters,URLEndpoint){
        var myAjax = new Ajax.Request
                     (
                         URLEndpoint,
                         {
                             method: 'post', 
                             postBody: parameters, 
                             onSuccess: renderResponse
                         }
                     );
    }

    //replace contents of 'character' div or whatever with output from PHP script
    function renderResponse(response){
       var el = $(characterTable); 
       elementId.innerHTML = resp.responseText;
    }

    //execute sendRequest every 2 seconds
    function periodicalUpdate() {
        new PeriodicalExecuter(sendRequest('monkeys=2&carrots=7','http://mywebsite.com/game.php'), 2);
    }

There's a jQuery plugin function that does the same job as PeriodicUpdate. I haven't tried it but it looks compelling:

http://groups.google.com/group/jquery-en/browse_thread/thread/e99f3bc0cfa12696?pli=1

于 2009-04-05T00:45:20.933 に答える