Firebase发送和检索坐标-javascript_Javascript_Firebase

Firebase发送和检索坐标-javascript

javascript firebase

Firebase发送和检索坐标-javascript,javascript,firebase,Javascript,Firebase,总而言之，我的问题是正确地发送和检索玩家坐标我正在尝试用Firebase制作一个多人游戏。因此，我首先通过按箭头键让玩家在html画布上移动。然后，当玩家移动时，它会将玩家坐标更新到数据库中。以下是我的代码： if (keys[37]) player.x -= player.speed; userRef.set({Coordinates: { x: player.x, y: player.y }}); if (keys[39]) player.x += player.

总而言之，我的问题是正确地发送和检索玩家坐标

我正在尝试用Firebase制作一个多人游戏。因此，我首先通过按箭头键让玩家在html画布上移动。然后，当玩家移动时，它会将玩家坐标更新到数据库中。以下是我的代码：

if (keys[37])
    player.x -= player.speed;
    userRef.set({Coordinates: { x: player.x, y: player.y }});
if (keys[39])
    player.x += player.speed;
    userRef.set({Coordinates: { x: player.x, y: player.y }});
if (keys[38])
    player.y -= player.speed;
    userRef.set({Coordinates: { x: player.x, y: player.y }});
if (keys[40])
    player.y += player.speed;
    userRef.set({Coordinates: { x: player.x, y: player.y }});

由于我打开了数据库，我可以看到当我移动我的玩家时，它会更新到数据库中（我打开了两个选项卡来测试游戏）。现在，为了检索它，我有一个简单的测试。以下是我的检索代码：

ref.on('child_changed', function(snapshot) {
    console.log(snapshot.val());
});

然后，我重新加载两个选项卡，然后在其中一个选项卡上，我不移动，但我打开了控制台。然后我转到另一个选项卡，移动播放器。但是，在控制台的标签上（滞后非常严重），它正在打印

Object {Coordinates: Object}

只是想说明一下，这是我的完整代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Game</title>
        <script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    </head>
    <body>
        <canvas id="c"></canvas>
        <script type="text/javascript">
            // Refrence the database
            var ref = new Firebase("https://(I don't want you to know this url).firebaseIO.com/Users/Names");
            // Pre-defines user refrence
            var userRef;
            // Ask for username
            var userId = prompt("Username?");

            // Canvas and context
            var canvas = document.getElementById("c");
            var context = canvas.getContext("2d");
            canvas.width = 300, canvas.height = 300;
            var width = canvas.width, height = canvas.height;

            // Player
            var player = {
                width: 30,
                height: 30,
                x: 10,
                y: 10,
                speed: 4,
                color: "green"
            };

            // Key listeners
            var keys = [];
            window.addEventListener("keydown", function(e) {
                keys[e.keyCode] = true;
            }, false);
            window.addEventListener("keyup", function(e) {
                keys[e.keyCode] = false;
            }, false);

            // Game Loop
            function game() {   
                // Moves the player when certain key pressed
                if (keys[37])
                    player.x -= player.speed;
                    userRef.set({Coordinates: { x: player.x, y: player.y }});
                if (keys[39])
                    player.x += player.speed;
                    userRef.set({Coordinates: { x: player.x, y: player.y }});
                if (keys[38])
                    player.y -= player.speed;
                    userRef.set({Coordinates: { x: player.x, y: player.y }});
                if (keys[40])
                    player.y += player.speed;
                    userRef.set({Coordinates: { x: player.x, y: player.y }});
                // Renders the background
                context.fillStyle = "black";
                context.fillRect(0, 0, width, height);
                // Renders the player
                context.fillStyle = player.color;
                context.fillRect(player.x, player.y, player.width, player.height);
                // Renders other players
                ref.on('child_changed', function(snapshot) {
                    console.log(snapshot.val());
                });
                // Removes player data on disconnect
                userRef.onDisconnect().remove();
                // Game loop 
                requestAnimationFrame(game);
            }
            // Game loop
            requestAnimationFrame(game);

            // Checkes if username is taken
            ref.child(userId).once('value', function(snapshot) {
                var exists = (snapshot.val() !== null);
                if (exists === false) {
                    // Continue if the username is not taken

                    // Makes user refrence
                    userRef = ref.child(userId);
                    userRef.set({Coordinates: { x: player.x, y: player.y }});

                    // Plays game function
                    game();
                } else {
                    // Reload page if the desired username is taken
                    location.reload();
                }
            });

        </script>
    </body>
</html>


游戏
//参考数据库
var ref=new Firebase（“https://（我不想让你知道这个url）。firebaseIO.com/Users/Names”）；
//预定义用户引用
var-userRef；
//询问用户名
var userId=提示（“用户名？”）；
//画布和上下文
var canvas=document.getElementById（“c”）；
var context=canvas.getContext（“2d”）；
canvas.width=300，canvas.height=300；
var width=canvas.width，height=canvas.height；
//玩家
变量播放器={
宽度：30，
身高：30，
x:10，
y:10，
速度：4，
颜色：“绿色”
};
//关键听众
var键=[]；
window.addEventListener（“向下键”，函数（e）{
键[e.keyCode]=真；
}，假）；
window.addEventListener（“键控”，函数（e）{
密钥[e.keyCode]=假；
}，假）；
//游戏循环
函数game（）{
//按某个键时移动播放机
如果（键[37]）
player.x-=player.speed；
userRef.set（{坐标：{x:player.x，y:player.y}）；
如果（键[39]）
player.x+=player.speed；
userRef.set（{坐标：{x:player.x，y:player.y}）；
如果（键[38]）
player.y-=player.speed；
userRef.set（{坐标：{x:player.x，y:player.y}）；
如果（键[40]）
player.y+=player.speed；
userRef.set（{坐标：{x:player.x，y:player.y}）；
//渲染背景
context.fillStyle=“黑色”；
fillRect（0，0，宽度，高度）；
//渲染播放器
context.fillStyle=player.color；
context.fillRect（player.x，player.y，player.width，player.height）；
//使其他玩家
参考on（'child_changed'，函数（快照）{
console.log（snapshot.val（））；
});
//删除断开连接时的播放器数据
userRef.onDisconnect（）.remove（）；
//游戏循环
请求动画帧（游戏）；
}
//游戏循环
请求动画帧（游戏）；
//检查是否使用用户名
ref.child（userId）.once（'value'，函数（快照）{
var exists=（snapshot.val（）！==null）；
如果（存在===false）{
//如果未使用用户名，则继续
//让用户参考
userRef=ref.child（userId）；
userRef.set（{坐标：{x:player.x，y:player.y}）；
//玩游戏功能
游戏（）；
}否则{
//如果使用了所需的用户名，请重新加载页面
location.reload（）；
}
});

我只是在做Firebase方面的所有事情？谢谢。

嗨，肖恩。我不确定我是否正确理解了你的问题，所以我现在只留下评论。我认为您可能希望像这样打印对象：

console.log（JSON.stringify（snapshot.val（））。这将打印对象的文本（JSON）表示。谢谢，这很有效。你能推荐一种获得坐标的方法吗？例如，我创建了一个名为coords的变量，它存储JSON.stringify（snapshot.val（））。然后我让它将坐标输出到一个段落，该段落输出类似于{coordinates:{“x”：15，“y”：20}
。但是，如果我试着让它通过输出段落coords.coords.x
来输出它，例如，它的滞后非常严重，并且没有输出x坐标。有什么想法吗？酷。现在您可以在日志输出中看到坐标。您可以通过snapshot.val（）.Coordinates.x
（当然还有.y
）访问这些值。我不确定你正在经历什么样的延迟。Firebase在上触发（…
当您在同一台机器上写入数据时，会立即发生事件。因此不会出现延迟。您可以在JSFIDLE/jsbin中设置问题，以便我可以查看它吗？给您：。我知道Firebase在这方面做得很好，我只知道我做错了一些事情。谢谢。感谢jsbin。对我来说，它工作得很好，绿色方框我一按键就移动。我对它做了一个小的更改，在画布上方的文本框中添加了客户端到服务器的延迟。对我来说，它显示了-30左右的值。你得到了什么值？