如何将Phaser游戏的JS全局分数通过AJAX传入PHP并存入MySQL?
我来帮你排查下问题,你的代码里有几个关键错误导致分数没法正确传递到后端,咱们一步步来修正:
问题诊断
- 请求方法不匹配:前端AJAX用的是
POST方法,但后端PHP却用$_GET['score']接收参数,两者不对应,自然拿不到数据。 - AJAX执行时机错误:你现在是页面一加载就发送请求,但这时候游戏还没开始,分数还是初始的0,应该在游戏结束的回调逻辑里触发分数提交。
- jQuery脚本写法错误:你把自定义的AJAX代码直接写在了加载jQuery的
<script>标签里,这个标签只能用来引入脚本,不能包含业务代码。 - HTML标签语法错误:
<h1>标签没闭合,会导致页面渲染异常。
修正后的代码示例
前端HTML/Phaser代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Star Runner</title> <script>window.score = 0;</script> <script src="phaser.js"></script> <!-- 先加载jQuery,再写自定义脚本 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <h1 style="color:white">Star Runner</h1> <script type="text/javascript"> // 你的Phaser游戏核心逻辑 var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { // 预加载游戏资源(比如图片、音效) } function create() { // 初始化游戏场景、角色等 } function update() { // 游戏循环逻辑(比如碰撞检测、分数更新) } // 游戏结束时触发的函数(根据你的游戏逻辑调整触发时机,比如玩家死亡、关卡结束) function gameOver() { // 调用AJAX提交最终分数 sendScoreToServer(window.score); } // 封装分数提交的AJAX函数 function sendScoreToServer(score) { $.ajax({ url: "inscore.php", type: 'POST', data: { score: score }, // 用对象传递参数,jQuery会自动处理编码 cache: false, success: function(data) { alert("分数提交成功:" + data); }, error: function(xhr, status, error) { // 增加错误处理,方便调试问题 alert("提交失败:" + error); } }); } </script> </body> </html>
后端inscore.php代码
<?php include 'login.php'; // 先判断是否接收到POST参数,避免报错 if(isset($_POST['score'])){ // 转成整数,防止非法输入,同时避免SQL注入 $score = intval($_POST['score']); echo "<p>". $score. "</p>"; // 示例:插入分数到MySQL(用预处理语句防止SQL注入!) // 假设你的数据库连接是$conn,且有一个scores表(字段比如id、score) $stmt = $conn->prepare("INSERT INTO scores (score) VALUES (?)"); $stmt->bind_param("i", $score); // "i"表示参数是整数类型 $stmt->execute(); // 关闭连接 $stmt->close(); $conn->close(); } else { echo "未接收到分数参数"; } ?>
额外注意事项
- 游戏结束时机绑定:你需要根据自己的Phaser逻辑,在合适的地方调用
gameOver(),比如玩家碰撞障碍物、生命值归零时。 - SQL注入防护:一定要用预处理语句,绝对不能直接把用户输入拼到SQL语句里,否则会有严重的安全风险。
- 跨域问题:如果你的前端和后端不在同一个域名/端口下,需要在PHP端配置跨域头(比如
header("Access-Control-Allow-Origin: *");),不过开发阶段尽量保持前后端在同一环境下。
内容的提问来源于stack exchange,提问作者Marc Machiavelli
相关产品推荐
相关产品推荐

