Question

我决定开发一款非常基本的多人游戏。目前，我已成功设法让状态检测工作，当新用户登录时，他的div出现在初始屏幕上，但就是这样。我想知道每次移动时我是否需要更新每个div的位置并在Firebase中存储该存储？以下是用户登录时我必须附加div的内容：

 presence.on('value', function(snapshot) {
        var online = snapshot.numChildren();
        $('#online').html(online + ' online.');
        $('#game').append('<div class="'+ uid +'" id="character"></div>');
    })

我决定给每个div一个特定的uid来区分它们。如果你看看我下面的代码，我还包括一个基本的移动系统。

这是小提琴：http://jsfiddle.net/gk9cm6t9/2/

我希望有人可以帮我解决这个问题，提前谢谢！

Answer 1

你小提琴中的代码目前有两件事：

倾听聊天室中的用户/玩家
使用光标键时在屏幕上移动一个框

但这两段代码目前似乎完全不相关。要使这成为多人游戏，您必须将每个用户的框所在的坐标发送给其他玩家。幸运的是，这是Firebase擅长的。

假设您有这样的数据结构：

positions
   uid1: { x: 100, y: 150 }
   uid2: { x:  25, y: 200 }

每个玩家可以简单地听取所有位置并在正确的位置绘制框。每个玩家还可以处理键盘并更新其在Firebase中的位置。然后这将循环并通知所有玩家。

所以这些是您需要采取的步骤：

在键盘处理中更新玩家在Firebase中的位置
在发生变化时绘制所有玩家框

您已经拥有键盘处理代码，因此您只需添加代码即可在Firebase中存储新位置。

var myPositionRef = firebaseRef.child('positions').child(uid);

$(document).keydown(function(e) {
  switch (e.which) {
    case 37:
      $('#character').stop().animate({
        left: '-=10'
      }); //left arrow key
      myPositionRef.transaction(function(currentPosition) {
        if (currentPosition) {
          currentPosition.x -= 10;
        }
        else {
          currentPosition = { x: 0, y: 0 };
        }
        return currentPosition;
      });
      break;
    ...
  }

可能有很多其他/更简单的方法可以做到这一点，但这应该足以让你开始。

看不到其他div动作

1 个答案: