javascript - What is the proper design pattern for keeping a list of coordinates on a responsive page? -

i'm beginning make game can preview here. when it's done, classic snake game. i'm trying figure out right how retain list of coordinates positions on board in pixels of upper-left corner of boxes.

the coordinates generated on page load function

this.setcoords = function ( ) {     // sets array of coordinates of upper-left corner of blocks on grid      var boardheightwidth = $('#snake-board-holder > svg').height(); // need better way ...      var blockheightwidth = boardheightwidth / this.numblocks;      (var = 0; < numblocks; ++i)         (var j = 0; j < numblocks; ++j)             this.allcoords.push([i * blockheightwidth, j * blockheightwidth]);  } 

for example, if board 588x588 pixels 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]] 

since board constructed png image of 256 square blocks, that's 256 iterations through nested loop, plus operations inside loop. problem stems fact want game have responsive design. size of board dynamic, means have recalculate coordinates every time window resized. i'll have

$(window).resize(function () {     sg.setcoords(); } 

which imagine lead huge performance bottleneck when window resized. i'm not sure how how $(window).resize function fired, if me resizing window smoothly full second makes fire 1000 times we're talking hundreds of thousands of operations.

plus, not have reset coordinates, location of objects on board well.

do of have suggestion how can this? feasible? or should give on idea of having responsively-sized game?