Javascript 对.io客户端呈现的建议

我目前正在开发一款.io游戏，使用socket.io进行通信。所有的游戏逻辑都是面向对象的，并且都包含在GameLogic类的一个实例中。我正在努力决定发送图形信息并将其显示的最佳方式。我在客户端寻找最少的代码，比如

const canvas = document.getElementById(‘canvass’)
const ctx = canvas.getContext(‘2d’)


const socket = io();
socket.on(‘Graphics Package’, (data) => {
    ctx.clearRect(0, 0,        innerWidth, innerHeight)
    for(let i in data){
        data[i].display(ctx);
    }

});

这将是最佳选择

---

这是可能的，还是有更好的方法？如果是这样的话，那是什么？

自从发布这个问题以来，我已经确定了一个相对简单的面向对象方法来解决这个问题。我有一个很大的Sceen对象，它保存了关于将要显示的每个对象的所有信息。它被发送给客户，如果你愿意，每个客户如何拥有自己的“interpter”。这是服务器代码：

class Scene{
   constructor(){
       this.objs = new Object();
   }
   addCircle(id,x,y,r,col){
       this.objs[id]={
           type: 'circle',
           x: x,
           y: y,
           r: r,
           col: col
       };
   }
   addRect(id, x,y,w,h,col){
       this.objs[id] = {
           type: 'rect',
           x: x,
           y: y,
           w: w,
           h: h,
           col: col
       };
   }
   addPath(id, col, ...verts){
       this.objs[id] = {
           type: 'path',
           col: col,
           verts: verts
       };
   }
   render(socket){
       socket.emit('Scene Package',this.objs);
   }
}

scene = new Scene();
// Add a rectange
scene.addRect(socket.id, 50,50,50,50,"blue");
scene.render(socket);

（未完成的）客户端代码如下所示：

socket.on('Scene Package',(data) => {
    ctx.clearRect(0,0, innerWidth,innerHeight)
    for(let i in data){
        shape = data[i]
        if(shape){
            switch(shape.type){
                case 'circle':
                    ctx.beginPath();
                    ctx.fillStyle = shape.col;
                    ctx.arc(shape.x, shape.y, shape.r, 0, Math.PI*2, false);
                    ctx.fill();
                break;
                case 'rect':
                    ctx.beginPath();
                    ctx.fillStyle = shape.col;
                    ctx.fillRect(shape.x, shape.y, shape.w, shape.h);
                break;
                case 'path':
                    ctx.beginPath();
                    ctx.fillStyle = shape.col;
                    ctx.arc(shape.x, shape.y, shape.r, 0, Math.PI*2, false);
                break;
            }
        }
    }
})

---

这样我就可以在通用画布上绘制，并控制语法。这给了我很少（如果有的话）的bug，并且应该允许在形状和功能方面易于扩展。

我发现一个非常有用和渐进的教程是Rain Chain的多人JS教程，它教你多人游戏开发的基础知识，我认为这是本例中你应该开始的地方，因为从长远来看，直接从包中进行渲染将非常乏味，请相信我：）。这里是教程的链接