다른 div 이동을 볼 수 없습니다

Question

아주 기본적인 멀티 플레이어 게임을하기로 결정했습니다. 현재, 존재 탐지가 작동하도록 성공적으로 관리했습니다. 새 사용자가 로그인하면 그의 div가 초기 화면에 표시되지만 그게 전부입니다. 이동시킬 때마다 각 div의 위치를 ​​업데이트해야하고 Firebase에 저장해야하는지 알고 싶습니까?

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

나는 또한 각각을 구분하기 위해 특정 UID를 div에 제공하기로 결정 : 여기에 사용자가 로그인 사업부를 추가하는 무슨 현재입니다. 아래의 코드를 살펴보면 기본적인 이동 시스템도 포함되어 있습니다. 나는 사람이 함께 감사합니다 사전에 나를 도울 수 있기를 바랍니다 http://jsfiddle.net/gk9cm6t9/2/

:

여기에 바이올린입니다!

Answer 1

당신의 바이올린의 코드는 현재 두 가지 않습니다 : 커서 키를 사용할 때

1. 가 채팅방
2. 이동 화면 주위에 상자에 존재하는 사용자/플레이어를 청취을

하지만 두 개의 코드는 현재 완전히 관련이없는 것처럼 보입니다. 이것을 멀티 플레이어 게임으로 만들려면 각 사용자의 상자가있는 좌표를 다른 플레이어에게 보내야합니다. 다행히도 이것은 파이어베이스가 탁월한 것입니다.

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

각 플레이어는 단순히 모든 위치를 수신하고 올바른 위치에 상자를 그릴 수 :

는이 같은 데이터 구조를 가지고 있다고 말한다. 각 플레이어는 키보드를 조작하고 Firebase에서 키보드의 위치를 ​​업데이트 할 수 있습니다. 그러면 루프백되어 모든 플레이어에게 알립니다. 뭔가가 이미

당신을 변경할 때마다

모든 플레이어 상자를 그릴 처리 키보드에서 중포 기지에서 플레이어의 위치를 ​​

1. 갱신 :

   그래서 이들은 당신이 걸릴하는 데 필요한 단계는 키보드 처리 코드를 가지고 있으므로, 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; 
       ... 
       } 
   

   이 작업을 수행하는 데 수십 가지의 다른 방법이 있지만이 방법을 사용하면 시작할 수 있습니다.