在响应式页面上保留坐标列表的正确设计模式是什么？

Question

我开始制作一款可以预览here的游戏。完成后，它将成为经典snake game。我现在想弄清楚的是如何保留一个坐标列表，这些坐标是棋盘上左上角像素的位置。

通过函数

在页面加载时生成坐标

this.setCoords = function ( )
{
    // sets the array of coordinates of the upper-left corner of blocks on the grid

    var boardHeightWidth = $('#snake-board-holder > svg').height(); // need a better way to get this ... 
    var blockHeightWidth = boardHeightWidth / this.numBlocks; 
    for (var i = 0; i < numBlocks; ++i)
        for (var j = 0; j < numBlocks; ++j)
            this.allCoords.push([i * blockHeightWidth, j * blockHeightWidth]);

}

例如，如果电路板最初为588x588像素，则allCoords为

[[0,0],[0,38.4375],[0,76.875],[0,115.3125],[0,153.75],[0,192.1875],[0,230.625],[0,269.0625],[0,307.5],[0,345.9375],[0,384.375],[0,422.8125],[0,461.25],[0,499.6875],[0,538.125],[0,576.5625],[38.4375,0],[38.4375,38.4375],[38.4375,76.875],[38.4375,115.3125],[38.4375,153.75],[38.4375,192.1875],[38.4375,230.625],[38.4375,269.0625],[38.4375,307.5],[38.4375,345.9375],[38.4375,384.375],[38.4375,422.8125],[38.4375,461.25],[38.4375,499.6875],[38.4375,538.125],[38.4375,576.5625],[76.875,0],[76.875,38.4375],[76.875,76.875],[76.875,115.3125],[76.875,153.75],[76.875,192.1875],[76.875,230.625],[76.875,269.0625],[76.875,307.5],[76.875,345.9375],[76.875,384.375],[76.875,422.8125],[76.875,461.25],[76.875,499.6875],[76.875,538.125],[76.875,576.5625],[115.3125,0],[115.3125,38.4375],[115.3125,76.875],[115.3125,115.3125],[115.3125,153.75],[115.3125,192.1875],[115.3125,230.625],[115.3125,269.0625],[115.3125,307.5],[115.3125,345.9375],[115.3125,384.375],[115.3125,422.8125],[115.3125,461.25],[115.3125,499.6875],[115.3125,538.125],[115.3125,576.5625],[153.75,0],[153.75,38.4375],[153.75,76.875],[153.75,115.3125],[153.75,153.75],[153.75,192.1875],[153.75,230.625],[153.75,269.0625],[153.75,307.5],[153.75,345.9375],[153.75,384.375],[153.75,422.8125],[153.75,461.25],[153.75,499.6875],[153.75,538.125],[153.75,576.5625],[192.1875,0],[192.1875,38.4375],[192.1875,76.875],[192.1875,115.3125],[192.1875,153.75],[192.1875,192.1875],[192.1875,230.625],[192.1875,269.0625],[192.1875,307.5],[192.1875,345.9375],[192.1875,384.375],[192.1875,422.8125],[192.1875,461.25],[192.1875,499.6875],[192.1875,538.125],[192.1875,576.5625],[230.625,0],[230.625,38.4375],[230.625,76.875],[230.625,115.3125],[230.625,153.75],[230.625,192.1875],[230.625,230.625],[230.625,269.0625],[230.625,307.5],[230.625,345.9375],[230.625,384.375],[230.625,422.8125],[230.625,461.25],[230.625,499.6875],[230.625,538.125],[230.625,576.5625],[269.0625,0],[269.0625,38.4375],[269.0625,76.875],[269.0625,115.3125],[269.0625,153.75],[269.0625,192.1875],[269.0625,230.625],[269.0625,269.0625],[269.0625,307.5],[269.0625,345.9375],[269.0625,384.375],[269.0625,422.8125],[269.0625,461.25],[269.0625,499.6875],[269.0625,538.125],[269.0625,576.5625],[307.5,0],[307.5,38.4375],[307.5,76.875],[307.5,115.3125],[307.5,153.75],[307.5,192.1875],[307.5,230.625],[307.5,269.0625],[307.5,307.5],[307.5,345.9375],[307.5,384.375],[307.5,422.8125],[307.5,461.25],[307.5,499.6875],[307.5,538.125],[307.5,576.5625],[345.9375,0],[345.9375,38.4375],[345.9375,76.875],[345.9375,115.3125],[345.9375,153.75],[345.9375,192.1875],[345.9375,230.625],[345.9375,269.0625],[345.9375,307.5],[345.9375,345.9375],[345.9375,384.375],[345.9375,422.8125],[345.9375,461.25],[345.9375,499.6875],[345.9375,538.125],[345.9375,576.5625],[384.375,0],[384.375,38.4375],[384.375,76.875],[384.375,115.3125],[384.375,153.75],[384.375,192.1875],[384.375,230.625],[384.375,269.0625],[384.375,307.5],[384.375,345.9375],[384.375,384.375],[384.375,422.8125],[384.375,461.25],[384.375,499.6875],[384.375,538.125],[384.375,576.5625],[422.8125,0],[422.8125,38.4375],[422.8125,76.875],[422.8125,115.3125],[422.8125,153.75],[422.8125,192.1875],[422.8125,230.625],[422.8125,269.0625],[422.8125,307.5],[422.8125,345.9375],[422.8125,384.375],[422.8125,422.8125],[422.8125,461.25],[422.8125,499.6875],[422.8125,538.125],[422.8125,576.5625],[461.25,0],[461.25,38.4375],[461.25,76.875],[461.25,115.3125],[461.25,153.75],[461.25,192.1875],[461.25,230.625],[461.25,269.0625],[461.25,307.5],[461.25,345.9375],[461.25,384.375],[461.25,422.8125],[461.25,461.25],[461.25,499.6875],[461.25,538.125],[461.25,576.5625],[499.6875,0],[499.6875,38.4375],[499.6875,76.875],[499.6875,115.3125],[499.6875,153.75],[499.6875,192.1875],[499.6875,230.625],[499.6875,269.0625],[499.6875,307.5],[499.6875,345.9375],[499.6875,384.375],[499.6875,422.8125],[499.6875,461.25],[499.6875,499.6875],[499.6875,538.125],[499.6875,576.5625],[538.125,0],[538.125,38.4375],[538.125,76.875],[538.125,115.3125],[538.125,153.75],[538.125,192.1875],[538.125,230.625],[538.125,269.0625],[538.125,307.5],[538.125,345.9375],[538.125,384.375],[538.125,422.8125],[538.125,461.25],[538.125,499.6875],[538.125,538.125],[538.125,576.5625],[576.5625,0],[576.5625,38.4375],[576.5625,76.875],[576.5625,115.3125],[576.5625,153.75],[576.5625,192.1875],[576.5625,230.625],[576.5625,269.0625],[576.5625,307.5],[576.5625,345.9375],[576.5625,384.375],[576.5625,422.8125],[576.5625,461.25],[576.5625,499.6875],[576.5625,538.125],[576.5625,576.5625]]

由于电路板是由256个方块的PNG图像构成的，因此通过嵌套循环进行256次迭代，再加上循环内的操作。问题源于我希望我的游戏具有响应式设计的事实。电路板的大小将是动态的，这意味着每次window调整大小时我都必须重新计算坐标。我必须做一些像

这样的事情

$(window).resize(function ()
{
    SG.setCoords();
}

我认为window调整大小会导致巨大的性能瓶颈。我不确定$(window).resize函数的触发频率是多少，但是如果我将window平滑地调整一整秒使其激发1000次，那么我们就会谈论成千上万的操作。

另外，我不仅需要重置坐标，还要重置棋盘上物体的位置。

你们有没有人建议如何做到这一点？这可行吗？或者我应该放弃拥有响应大小的游戏的想法？