我做了一些东西来缩小我的 socket.on() 代码。

在这种情况下，我已经获得了客户端套接字

...
var io = require('socket.io').listen(...);
io.sockets.on('connection', function(socket) {
    // my code for this client
    ...
});

在我拥有这个之前

socket.on('event1', function(args1) {callback1(args1);});
socket.on('event2', function(args2) {callback2(args2);});
...
socket.on('eventN', function(argsN) {callbackN(argsN);});

我现在有

    var events = {
        event1: 'callback1',
        event2: 'callback2',
        ...
        eventN: 'callbackN'
    };
    for(var event in events) {
        var callback = events[event];
        socket.on(event, function() {
            this[callback].apply(this, arguments);
        });
    }

看来callbackN函数总是被调用。当 event1 被 args1 触发时，callbackN 被 args1 调用，当 event2 被 args2 触发时，callbackN 被 args2 调用。

怎么了 ？

我正在尝试创建一款多人拼图游戏。

我的第一个方法是使用<canvas>2D 渲染上下文，但我尝试得越多，我就越认为不切换到 WebGL 是不可能的。

这是我得到的一个例子：

在本例中，我要渲染一个 1900x1200 像素的图像，并将其切割成 228 个部分，但我希望游戏能够以更高分辨率渲染数千个部分。

每一块都是使用具有随机变化的贝塞尔曲线和直线按程序生成的，这给了我这样的结果：

我需要独立渲染每个部分，因为玩家可以拖放它们来重建拼图。

使用剪辑()

起初，我只有一个<canvas>，我使用了该clip()方法，然后drawImage()对每个部分进行调用。

但当尝试以 60fps 渲染数百个片段时，很快就遇到了性能问题（我在一台旧笔记本电脑上运行它，但我觉得这不是问题）。

这是我正在使用的代码的缩短版本：

class PuzzleGenerator {
  public static generatePieces(
    puzzleWidth: number,
    puzzleHeight: number,
    horizontalPieceCount: number,
    verticalPieceCount: number,
  ): Array<Piece> {
    const pieceWidth = puzzleWidth / horizontalPieceCount;
    const pieceHeight = puzzleHeight / verticalPieceCount;
    const pieces: Array<Piece> = [];
    for (let x = 0; x < horizontalPieceCount; x++) {
      for (let y = 0; y < verticalPieceCount; y++) …