1

成功せずに Google を調べた後、このサイトを使用して以前の質問に答えたので、ここに投稿するのは良い考えだと思います。

とにかく、私は現在 HTML5 キャンバス ゲームに取り組んでいます。

PHP, MYSQL, Html5, and JavaScript.

MYSQLデータベースのセットアップと、PHPプレイヤーのハイスコアとユーザー名を表示するページがあります。私の質問は、ゲームが終了したら、キャンバス内にハイスコアを表示するにはどうすればよいかということです。

ゲーム終了時にハイスコアを保存するだけでなく。AJAX について W3SCHOOLS サイトを調べましたが、JavaScript ファイル内でどのコードを使用すればよいかまだわかりません。これらは私のphp/scriptコードです。または少なくとも関連するもの:

// Here's the savescore.php file   
            <?php
                   include 'connect.php';

            $user_score = ($_POST['user_score']);
            $user_name = ($_POST['user_name']);

                if(mysql_query("INSERT INTO users VALUES('$user_name','$user_score')"))
                    echo "Score Successfully Saved";
                else
                    echo "Score Saving Failed";
            ?>
  // Here's some of the index.php file
            <link rel="stylesheet" href="css.css">
            </HEAD>
            <body>     
                <div id="menu">  
                    <a class="item" href="/index.php">Home</a>
              <?php 
            include 'connect.php';
            session_start();
                    if($_SESSION['signed_in'])  
                {  
                    echo 'Hello ' . $_SESSION['user_name'] . '. Not you? <a href="signout.php">Sign out</a>';  
                    include 'chat.php';
                }  
                else  
                {  
                    echo '<a href="signin.php">Sign in</a> or <a href="signup.php">create an account</a>.';  
                } 
                ?>
                </div>
            <BODY>
            <canvas id="canvasGAMEOVER" width="800" height="599"> </canvas> 
            <script src="game.js"> </script>

// here's whats inside inside game.js... well the part I want to be able to save score
            var score = 0;
            function drawGAMEOVER() {
                }

私はGoogleを使用し、AJAXのチュートリアルを見ました.AJAXを使用する方法に関するチュートリアルと回答を見つけました:

<form action="savescore.php">
  user_name: <input type="text" name="user_name"><br>
  user_score: <input type="text" name="user_score"><br>
  <input type="submit" value="Submit">
</form>

しかし、ログインに使用した「user_name」(index.php ページに表示される) と this.score (javascript ファイル内に表示される) を取得できるかどうかはわかりません。 ..そうでない場合、これを行うより良い方法はありますか？ヘルプ/返信をお待ちしております。

4

3 に答える 3

2

AJAX ( の略Asynchronous Javascript And XML) は、Web サーバーに要求を送信し、その応答を非同期的に取得できる JavaScript オブジェクトです。最近のブラウザのほとんどは、AJAX リクエストの初期化をサポートしています。

var xmlHttp = new XMLHttpRequest();

リクエストの送信方法はこちら

xmlHttp.open('GET' , 'file_in_server.php', false);

「GET」は他のタイプのリクエスト (「POST」、「PUT」など) であり、「file_in_server.php」はリクエストを送信するファイルであり、false同期的に実行していることを意味します。

その行の後に、次のように記述できます。

xmlHttp.send();

open()以前に編集したリクエストを送信します。

これで、サーバーはキャプチャできる応答を返します

var response = xmlHttp.responseText

今、応答はあなたによってエコーされたものですfile_in_server.php

AJAX の非同期性を利用できます。これがサンプルコードです。

var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
    if(xmlHttp.readyState==4 && xmlHttp.status == 200){
        var capturedText = xmlHttp.responseText;
    }
};
xmlHttp.open('GET','file.php?a=1&b=2', true); //sends GET requests, with querystring.
xmlHttp.send();

上記のコードは本質的に非同期です。他のスクリプトの実行をブロックしません。1 行目は XMLHttpRequest オブジェクトを作成します。2 行目では、xmlHttp オブジェクトの準備状態が変化したときに関数を実行する必要があることを示すイベント リスナを作成しています。. 実行は次のようになりますxmlHttp.openサーバーを要求するプロセスを初期化します。このステートメントは、要求が非同期であることを XMLHttpRequest に知らせます。その後、リクエストが送信されます。リクエストが送信されるとすぐに、オブジェクトの readystate が変更され、上記の関数が呼び出されます。この関数は、オブジェクトの readystate と返されたステータス コードの 2 つの条件をチェックし、readystate が 4 (準備完了を意味する) で、ステータスが 200 (OK を意味する) の場合、変数の応答をキャッチします。これで、その変数を使用して動機を実現できます。

あなたのfile.phpが現在ログインしているユーザー名をエコーする場合、それは変数capturedTextにキャッチされます

于 2013-07-19T18:33:46.747 に答える
0

jQueryは、やろうとしていることを大幅に簡素化する JavaScript ライブラリです。AJAX リクエストは、基本的には通常の Web リクエストと同じですが、ブラウザ内で JavaScript と非同期で実行される点が異なります。jQuery では、次のようにします。

$.ajax({
  url: "savescore.php",
  type: "post",
  data: {
    user_score: score,
    user_name: "fake_user"
  },
  success: function() {
    console.log("Finished uploading score");
  }
});
于 2013-07-19T18:14:12.553 に答える
0

jQuery なしで ajax を行うのは好きではないので、その例を示します。

好きなようにjQueryにリンクします...最も簡単ですが、私の好みの方法ではありません：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

ゲームオーバー機能から発砲できる機能を作成...

function drawHighScore(){
    $.post('gethighscores.php', function(data){
    r = JSON.parse(data);

    $.each(r, function(k, v){
        context.fillText(k+":"+v, x, y);
        context.stroke();
    });
});

あなたの gethighscores.php (簡略化)...

query for name and score and then

while ($r = mysql_fetch_assoc($query)){ //***
$response[$r['name']] = $r['score'];
}

echo json_encode($response);

***クエリ/フェッチ関数の PDO について検討します。

于 2013-07-19T18:20:05.410 に答える