使用输入坐标移动精灵

Question

    /************ON RECEIVING MESSAGES VIA WEBSOCKET FROM THE SERVER********/
    ws.onmessage = function(event) {
     var mySpan = document.getElementById("messageGoesHere");
     var mySpan2 = document.getElementById("messageGoesHere2");
     var str = event.data;
     //var temp = new Array();
     //temp = str.split("\|");
     /***********SPLITS THE RECEIVED MESSAGE****************
      *********AND STORES THE VALUE IN THE VARIABLES*********/
      if((str.localeCompare('connected'))==0)
      {
       document.getElementById("connection").innerHTML='Connected'; 
      }
      else if((str.localeCompare('closed'))==0)
      {
       document.getElementById("connection").innerHTML='No connection';
      }
     else{
       var array = str.split('|');
       mySpan.innerHTML = parseInt(array[5])
       mySpan2.innerHTML = parseInt(array[6]);  
       draw(parseInt(array[5]), parseInt(array[6]));
     }
    };

我正在开发一款机器人游戏，我正在使用移相器 library.My 要求是将 x y 坐标传递给机器人（精灵），它应该根据该坐标移动，没有任何速度或速度。我正在使用以下代码来移动机器人。现在我想使用传入的坐标在地图上移动它。所以，请给我一些建议。

  // The following code is for the robot movement 
     
     // This is initial velocity
     player.body.velocity.x = 0;
        player.body.velocity.y = 0;

        if (cursors.left.isDown)
        {
            player.body.velocity.x = -200;
        }
        else if (cursors.right.isDown)
        {
            player.body.velocity.x = 200;
        }

        if (cursors.up.isDown)
        {
            player.body.velocity.y = -200;
        }
        else if (cursors.down.isDown)
        {
            player.body.velocity.y = 200;
        }

Answer 1

好的，看来您的问题与如何使用从外部源（通过网络）获取的坐标在游戏世界中定位 Sprite 有关。这是任何多人游戏中的问题。基本上，当您的服务器的位置与您的用户正在做的事情天生不合时宜时，您如何定位您的玩家？ Here is a really good article from Valve on the subject. You don't need to do all of that for a single player game that's just setting a position from a websocket. However, I would recommend saving the last 1 or 2 last_positions coordinates, and lerping 在等待下一个值坐标时它们之间。

如果您的问题与如何从外部脚本获取坐标到您的 Phaser 游戏更相关，那么看起来您目前正在将 WebSocket 数据存储到 HTML div？如果是这样，Phaser 仍然是 JS，并且具有与 DOM 交互的能力。在您的 update() 函数中，访问 DOM 中的元素并获取您的值。

虽然我不能说我会推荐这种方法。我敢打赌 DOM 中的 writing/retrieving 会招致 I/O（甚至可能是某种重新渲染）惩罚。相反，我会建议在您的 websocket 脚本之前加载您的游戏脚本，在您的游戏中公开一个全局 updateCoordinates(x,y) 函数，并使用来自您的 websocket 脚本的回调。然后您可以更新您的 1 或 2 last_positions，并在这些位置之间 update() 插入。

//game.js, load before webSocket
var game = ... //global variable
//state 'PlayGame' is where your robot moves

//webSocket.js
ws.onmessage = function(event) {
  ... 
  game.states.state.PlayGame.updateCoordinates(x,y);
}

使用输入坐标移动精灵

Sprite moving using input coordinates

javascript

sprite

tiled

phaser-framework