总结一下,我的问题是正确发送和检索玩家坐标。
我正在尝试使用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方面做了一切?感谢。