Question

总结一下，我的问题是正确发送和检索玩家坐标。

我正在尝试使用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>

我只是在Firebase方面做了一切？感谢。

Firebase发送和检索坐标 - javascript

0 个答案: