During the creation of a grid layout, I encountered an issue with shuffling the xposArray after correctly laying out the tiles.
populateXPosArray:function(){
var i = arr.length;
for(j=0;j<i;j++){
if((j % cols) === 0){
ypos += 70;//height of the tile
xpos = 0;
}
xposArray.push(xpos);
xpos += 70;//width of the tile
}
//tryApp.shuffleArray(xposArray);
console.log("xPosArray : " + xposArray);//returns 0,70,140,210, 280,0,70,140,210,280,0,70,140,210,280,0,70,140,210,280,0,70,140,210, 280
},
shuffleArray:function(array){
//Fisher–Yates shuffle
var m = array.length, t, i;
// While there remain elements to shuffle…
while (m) {
// Pick a remaining element…
i = Math.floor(Math.random() * m--);
// And swap it with the current element.
t = array[m];
array[m] = array[i];
array[i] = t;
}
return array;
},
Initially, the tiles are laid out perfectly in a 5 column 5 row grid. However, when using the shuffleArray function, the shuffled array is returned as shown below, which is not the desired outcome due to duplicated values within each group of 5.
(280,140,140,140,210),(70,70,280,280,210),(0,140,210,0,140),(210,210,70,70,0),(70,0,0,280,280)
To avoid duplicate values within each group of 5, is it possible to shuffle only the first 5 elements and then proceed to the next 5, ensuring uniqueness within each set? An example of the desired output would be:
(0,280,140,70,210),(70,0,210,140,280),(280,210,140,70,0),(210,70,140,280,0),(140,210,280,0,70);