高效地跟踪客户端和服务器上的坐标

我正在尝试使用websockets，node和JavaScript来创build一个多人游戏。 什么是更新客户端和跟踪服务器上的客户端坐标的最佳方法？ 我目前的方法工作，但效率非常低。 （我可以听到我的笔记本电脑风扇旋转了很多哈哈！）。

那么发生了什么事情：

服务器正在等待客户端发送消息“startmove”，这也包含了方向。 一旦服务器收到这个消息，它将开始移动播放器并播放它的位置。 如果服务器收到消息“stopmoving”，这也是一个方向…它停止朝这个方向移动。

我的问题：

有什么调整，我可以用来提高性能？

服务器代码片段

var player = { x: 100, y: 200, left: false, right: false, down: false, up: false } var count = 0; io.sockets.on('connection', function(client){ ++count; io.sockets.emit('player_count', count); io.sockets.emit('connect', { "x" : player.x, "y" : player.y }); client.on('disconnect', function () { --count; io.sockets.emit('player_count', count); }); client.on('startmove', function(d){ var direction = dd; if (direction == 0) //Left { player.left = true; } else if (direction == 1) //Up { player.up = true; } else if (direction == 2) //Right { player.right = true; } else if (direction == 3) //Down { player.down = true; } }); client.on('stopmove', function(d){ var direction = dd; if (direction == 0) //Left { player.left = false; } else if (direction == 1) //Up { player.up = false; } else if (direction == 2) //Right { player.right = false; } else if (direction == 3) //Down { player.down = false; } }); setInterval(loop, 15); // 33 milliseconds = ~ 30 frames per sec function loop() { if(player.left) { player.x--; io.sockets.emit('position', {"x" : player.x, "y" : player.y }); } else if (player.right) { player.x++; io.sockets.emit('position', {"x" : player.x, "y" : player.y }); } if(player.up) { player.y--; io.sockets.emit('position', {"x" : player.x, "y" : player.y }); } else if (player.down) { player.y++; io.sockets.emit('position', {"x" : player.x, "y" : player.y }); } } }); 

客户端代码片段

 $(document).ready(function(){ var canvas = document.getElementById('game'), ctx = canvas.getContext('2d'), socket = io.connect('http://localhost'); //Only start the game upon receiving the connect message socket.on('connect', function(data){ var y = data.y; var x = data.x; //Constants var GAME_WIDTH = $('canvas').width(), GAME_HEIGHT = $('canvas').height(); var Player = function(x,y,w,h){ this.x = x; this.y = y; this.w = w; this.h = h; }; var Game = new function(){ var player = new Player(x, y, 100, 100), left = false, right = false, up = false, down = false; /* Gather player input */ $(document).keydown(function(event) { if ( event.keyCode == 37) //Left { socket.emit('startmove', {"d" : 0}); return false; } else if (event.keyCode == 38) //Up { socket.emit('startmove', {"d" : 1}); return false; } else if (event.keyCode == 39) //Right { socket.emit('startmove', {"d" : 2}); return false; } else if (event.keyCode == 40) //Down { socket.emit('startmove', {"d" : 3}); return false; } }); $(document).keyup(function(event) { if ( event.keyCode == 37) //Left { socket.emit('stopmove', {"d" : 0}); return false; } else if (event.keyCode == 38) //Up { socket.emit('stopmove', {"d" : 1}); return false; } else if (event.keyCode == 39) //Right { socket.emit('stopmove', {"d" : 2}); return false; } else if (event.keyCode == 40) //Down { socket.emit('stopmove', {"d" : 3}); return false; } }); socket.on('position', function(data){ console.log("x: " + data.x + "\ny: " + data.y); player.x = data.x; player.y = data.y; clear(); draw(); }); /* Clear the canvas */ function clear(){ ctx.clearRect(0,0,GAME_WIDTH, GAME_HEIGHT); } /* Draw to the canvas */ function draw(){ ctx.fillRect(player.x, player.y, player.w, player.h); } }(); }); }); 

在浏览器中：

View post on imgur.com

Answer 1

使用时间戳来跟踪玩家在服务器上移动了多久。

这是我如何做服务器端：

 var player = { x: 100, y: 200, direction: -1, moving_since: 0 } var count = 0; io.sockets.on('connection', function(client){ ++count; io.sockets.emit('player_count', count); io.sockets.emit('connect', { "x" : player.x, "y" : player.y }); client.on('disconnect', function () { --count; io.sockets.emit('player_count', count); }); client.on('startmove', function(d){ player.direction = dd; player.moving_since = Date.now(); }); function adjustCoord(){ player.direction = -1; var now = Date.now(); if( player.direction == 0){ player.x = player.x - ((now - player.moving_since) / 33); } else if( player.direction == 1){ player.y = player.y + ((now - player.moving_since) / 33); } else if( player.direction == 2){ player.x = player.x + ((now - player.moving_since) / 33); } else if( player.direction == 3){ player.y = player.y - ((now - player.moving_since) / 33); } } client.on('stopmove', adjustCoord); setInterval(loop, 15); // 33 milliseconds = ~ 30 frames per sec function loop() { if ( player.direction != -1){ var prevDir = player.direction; adjustCoord(); player.direction = prevDir; } io.sockets.emit('position', {"x" : player.x, "y" : player.y }); } });