HTML5 画布游戏玩家限制

Question

我在画布上放置了 1000 名玩家，但他们的移动并不流畅。画布有没有办法处理这么多玩家？我有哪些选择？

玩家的位置使用套接字每秒发送 20 次。呵呵。当事件到达客户端时，它会在画布上吸引玩家。

var images = {};
images.spriteSheet = new Image();
images.spriteSheet.src = "/images/spriteSheet.png";
socket.on('drawing', function(data){
ctx.clearRect(0,0,1000,500);
for(var i = 0; i < data.length; i++){
ctx.drawImage(images['spriteSheet'], data[i].sx, data[i].sy, 100, 100, data[i].x, data[i].y, 70, 70);
}
});

Answer 1

我在画布上放置了 1000 名玩家，但他们的移动并不流畅。画布有没有办法处理这么多玩家？

我假设你的意思是你每秒在画布上绘制 1,000 个精灵 20 倍。 毫无疑问，这将是艰难的。

玩家的位置使用套接字在一秒钟内发送 20 次。呵呵。

当然，您可以发送位置和向量，并让客户端在本地预测性地更新每帧，直到下一次真正的更新。 这就是几乎所有其他游戏的工作方式，这是有原因的。 您甚至可以每秒获取 20 次数据的想法并不总是如此。

没有更多细节，很难给出具体的答案，但在一般情况下，我建议研究 SVG。 然后，您可以更新单个元素，让浏览器担心合成和其他不，这可能比您在画布中完成的速度更快。 不过，您必须针对您的特定用例进行试验。