Question

我想做什么：

我在我的网站上加入了现成的HTML5游戏 - Link to game
使用这个游戏，我想现在实现一个高分板并将其显示在同一页面上。
例如，如果我以Conor身份登录，Conor会转到游戏所在的snake_game.php。他得到三分，我需要三个值，当前被分配给一个JavaScript变量，成为一个PHP变量，以便我可以将它存储到我的数据库中名为high_scores的表中。
然后，一旦数据在我的数据库中，我就可以开始在高分变量上显示结果并在需要时更新数据。

问题（S）：

我知道我必须使用AJAX来实现这一点，但我之前从未使用过AJAX。

资源：

snake_game.php是容器所在位置，以及高分div：

<div id="wrapper">
     <div class="game_canvas">
         <canvas id="canvas" width="450" height="450"></canvas>  
         <script src="javascript/snake.js"></script>
     </div>
     <div class="high_scores" >
         High scores:             
     </div>  
</div>

snake.js是发现创建游戏的所有JavaScript的地方。所有JavaScript都可以在上面的链接中查看。

我尝试了什么：

从游戏的JS中，我相信得分保存在一个名为得分的变量中 - var score; - 了解这一点，我尝试了以下方法试图获得。我曾尝试在线观看一些教程并提出这个（位于snake_game.php）：

    <script type="text/javascript">
        function updateScore ()
        {
            var score = $('score').val();

            $.post('snake_game.php', {postscore: score}, 
            function () 
            {
                $('high_scores').html(data);
            });
        }
    </script>

然后是PHP代码：

<?php    
$new_highscore= $_POST['score'];    
echo json_encode($new_highscore);    
?>

我相信以下来自JS的数据？但我不确定，也不认为这是解决这个问题的正确方法。

任何/所有帮助将不胜感激：）

Answer 1

您无法在“就绪”功能之外访问“得分”。如果你想按照上面的方式实现事物，你必须添加一个全局的分数参考，但我会警告你，这通常是不赞成的。

// Make a global reference to score 
var score; 

$(document).ready(function(){
    //Canvas stuff
    var canvas = $("#canvas")[0];
    var ctx = canvas.getContext("2d");
    var w = $("#canvas").width();
    var h = $("#canvas").height();

    //Lets save the cell width in a variable for easy control
    var cw = 10;
    var d;
    var food;
    //var score; THIS NOT NEEDED ANYMORE.

最好在ready（）函数中使用Ajax调用添加函数，就像教程中的代码一样。游戏的工作方式是每当你遇到一堵墙，游戏通过调用“init”功能重置自己。为了做你想要的，在分数重置为零之前，你想把它发送到服务器。请参阅下面的想法：

function init()
    {
        d = "right"; //default direction
        create_snake();
        create_food(); //Now we can see the food particle

        // Before resetting the score below, send the user score
        // to the server
        sendScoreToServer(score);

        //finally lets display the score
        score = 0;

        ........

编辑：

弗雷迪，这是我能给你的最简单的Ajax演示。你需要研究这个并弄清楚它，直到你明白发生了什么。在您了解下面的这个演示之后，您应该能够弄清楚如何在上面做你想做的事情。您将需要编辑＆lt; SCRIPT＆gt;文件路径和AJAX URL到AJAXDEMO.PHP在我的示例文件中匹配您的系统。

在某些HTML文件中：

<!DOCTYPE html>
<html>
<head>
    <title>Ajax Demo</title>
</head>

<body>
    <input type="text" name="score" id="scoreBox"><button id="sendScore">Send Score to Server Running PHP</button>
    <div id="result">The result from the server will be placed here...</div>
    <script src="/resources/js/jquery-1.12.3.js"></script>
    <script src="/resources/js/ajaxDemo.js"></script>
</body>
</html>

ajaxDemo.js文件：

// This function uses AJAX to send the score from the HTML page running javascript to a web server running PHP.
function sendScoreToServer(theScore) {
    $.ajax({
        type: "POST",
        url: "http://localhost/ajaxDemo.php",
        data: { score: theScore },
        dataType: 'json',
        success: function(response){
            console.log(response);
            $('#result').html('The score returned by the server is: '+response.scoreDoubled);    
        }
    });   
}

// Once the HTML page finishes loading, this binds a 'onClick' event to the button that causes it to trigger the sendScoreToServer function.
$( document ).ready(function() {
    $('#sendScore').on('click', function() {
        var score = $('#scoreBox').val();
        sendScoreToServer(score);
    });
});

在服务器上的ajaxDemo.php文件中：

<?php
$result = [];
$result['scoreDoubled'] = $_POST['score'] * 2;
echo json_encode($result);

最终鼓励：
听起来对你来说，你可能会对前端代码与后端代码略有不同，以及它们之间的区别。请记住，前端代码在USER'S计算机上运行。因此，当您访问该游戏教程网站并加载Snake游戏时...该游戏正在您的计算机上运行。后端代码（PHP是一种后端语言）是在Web服务器上运行的代码...通常不在您的计算机上。通过使用“localhost”在您的计算机上运行Web服务器，您实际上是在让您的PC“假装”成为一个网站，以便您可以快速测试和开发您的应用程序。因此，对'localhost'的任何Ajax调用都不必离开你的机器。但是，在正常使用环境中，Ajax调用将通过Internet向某些远程服务器（如www.MySite.com）发送请求。然后，MySite.com将使用PHP或其他语言处理发送给它的信息，然后发回一个响应，该响应由附加到ajax请求的“success”函数处理。然后，“成功”功能（通常称为“回调”功能）根据服务器发回的内容更新HTML页面。

Answer 2

如果我是你，我不会在vanilla php中这样做，但你当然可以。

注意事项：

1）您未在jQuery帖子中将响应数据传递给回调方法

2）你没有用jquery

选择任何东西

flag

3）我真的不明白你对snake_game.php的解释。您似乎正在尝试将其用作模板和端点。如果你在vanilla php中做事，我强烈反对你这样做，你需要另一个php文件来处理你的帖子请求。例如snake_high_scores.php。

        $.post('snake_game.php', {postscore: score}, 
        function (data) // <-- pass data in here; 
        {
            $('high_scores').html(data); //<!-- you aren't selecting anything here. 
            //if I were you I would make data a json
            //I would have something like
            $('.high_scores').append(data.high_score);
            //actually I have no idea why you even have this callback here

        });

Answer 3

除了以上答案之外，我建议每当游戏加载使页面中的高分可用时（如果你不想向用户显示，则放在隐藏元素/输入字段中）然后一旦游戏结束然后比较如果用户得分高于当前用户得分，那么将Ajax调用php存储在数据库中。

这适用于每个用户（一旦用户登录就可以获得用户高分）或全局单个高分。

AJAX将JS变量发送到PHP文件（然后发送到DB）

3 个答案:

编辑：