randomly mapping divs

Question

I am creating a new \"whack-a-mole\" style game where the children have to hit the correct numbers in accordance to the question. So far it is going really well, I have a timer,

Answer 1

You can approach this problem in at least two ways (these two are popped up in my head).

1. How about to create a 2 dimensional grid segmentation based on the number of questions, the sizes of the question panel and an array holding the position of each question coordinates and then on each time frame to position randomly these panels on one of the allowed coordinates.

Note: read this article for further information: http://eloquentjavascript.net/chapter8.html

1. The second approach follow the same principle, but this time to check if the panel overlap the existing panel before you place it on the canvas.

var _grids;
var GRID_SIZE = 20 //a constant holding the panel size; 
function createGrids() {
    _grids = new Array();
    for (var i = 0; i< stage.stageWidth / GRID_SIZE; i++) {
        _grids[i] = new Array();
        for (var j = 0; j< stage.stageHeight / GRID_SIZE; j++) {
            _grids[i][j] = new Array();
        }
    }
}

Then on a separate function to create the collision check. I've created a gist for collision check in Actionscript, but you can use the same principle in Javascript too. I've created this gist for inspirational purposes.