jeudi 23 juillet 2015

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

I'm beginning to make a game which you can preview here. When it's done, it will be the classic snake game. What I'm trying to figure out right now is how to retain a list of coordinates that are the positions on the board in pixels of the upper-left corner of the boxes.

enter image description here

The coordinates are generated on page load by the function

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]);

}

For example, if the board is initially 588x588 pixels then allCoords is

[[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 the board is constructed from an PNG image of 256 square blocks, that's 256 iterations through the nested loop, plus the operations inside the loop. The problem stems from the fact that I want my game to have responsive design. The size of the board will be dynamic, which means I have to recalculate the coordinates every time the window is resized. I'll have to do something like

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

which I imagine will lead to a huge performance bottleneck when the window is resized. I'm not sure how how often the $(window).resize function is fired, but if me resizing the window smoothly for a full second makes it fire 1000 times then we're talking about hundreds of thousands of operations.

Plus, I not only have to reset the coordinates, but the location of the objects on the board as well.

Do any of you have a suggestion for how I can do this? Is it feasible? Or should I give up on the idea of having a responsively-sized game?

Aucun commentaire:

Enregistrer un commentaire