javascript - randomly mapping divs - Stack Overflow

admin 管理员组

文章数量: 1086019

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, count the right and wrong answers and when the game is started I have a number of divs called "characters" that appear in the container randomly at set times.

The problem I am having is that because it is pletely random, sometimes the "characters" appear overlapped with one another. Is there a way to organize them so that they appear in set places in the container and don't overlap when they appear.

Here I have the code that maps the divs to the container..

    function randomFromTo(from, to) {
        return Math.floor(Math.random() * (to - from + 1) + from);
}

function scramble() {
    var children = $('#container').children();
    var randomId = randomFromTo(1, children.length);
    moveRandom('char' + randomId);
}

function moveRandom(id) {
    var cPos = $('#container').offset();
    var cHeight = $('#container').height();
    var cWidth = $('#container').width();
    var pad = parseInt($('#container').css('padding-top').replace('px', ''));
    var bHeight = $('#' + id).height();
    var bWidth = $('#' + id).width();
    maxY = cPos.top + cHeight - bHeight - pad;
    maxX = cPos.left + cWidth - bWidth - pad;
    minY = cPos.top + pad;
    minX = cPos.left + pad;
    newY = randomFromTo(minY, maxY);
    newX = randomFromTo(minX, maxX);
    $('#' + id).css({
        top: newY,
        left: newX
    }).fadeIn(100, function () {
        setTimeout(function () {
            $('#' + id).fadeOut(100);
            window.cont++;
        }, 1000);
    });

I have a fiddle if it helps.. /

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, count the right and wrong answers and when the game is started I have a number of divs called "characters" that appear in the container randomly at set times.

The problem I am having is that because it is pletely random, sometimes the "characters" appear overlapped with one another. Is there a way to organize them so that they appear in set places in the container and don't overlap when they appear.

Here I have the code that maps the divs to the container..

    function randomFromTo(from, to) {
        return Math.floor(Math.random() * (to - from + 1) + from);
}

function scramble() {
    var children = $('#container').children();
    var randomId = randomFromTo(1, children.length);
    moveRandom('char' + randomId);
}

function moveRandom(id) {
    var cPos = $('#container').offset();
    var cHeight = $('#container').height();
    var cWidth = $('#container').width();
    var pad = parseInt($('#container').css('padding-top').replace('px', ''));
    var bHeight = $('#' + id).height();
    var bWidth = $('#' + id).width();
    maxY = cPos.top + cHeight - bHeight - pad;
    maxX = cPos.left + cWidth - bWidth - pad;
    minY = cPos.top + pad;
    minX = cPos.left + pad;
    newY = randomFromTo(minY, maxY);
    newX = randomFromTo(minX, maxX);
    $('#' + id).css({
        top: newY,
        left: newX
    }).fadeIn(100, function () {
        setTimeout(function () {
            $('#' + id).fadeOut(100);
            window.cont++;
        }, 1000);
    });

I have a fiddle if it helps.. http://jsfiddle/pUwKb/8/

• javascript
• jquery
• math

Share Improve this question Follow asked Dec 21, 2012 at 10:49 Milo-JMilo-J 1,10822 gold badges1313 silver badges2626 bronze badges 26

• you can create an array of objects where you can store positions, i.e. [{top: 300, left: 200}, {top: 100, left: 400}] and get the coordinates randomly from the array. You could also add a flag when position is in use so they won't overlap. I think this is one of the fastest ways – Eru Commented Dec 21, 2012 at 11:09
• All you have to do retain a living list of what areas are currently being covered, and check for overlap. This would be particularly easy if you created a checkerboard-style grid such that there could never be partial overlaps. – john_science Commented Jan 7, 2013 at 23:38
• That's a pretty cool game. I think I may have encountered a bug, though - I was given the problem 2 + 6, and clicking 8s registered as an incorrect answer. Also, a suggestion: I'd make a rule that the correct answer will always appear within X loops. It can be a bit frustrating to sit and wait for the right answer to pop up if the program goes through 10 or 20 iterations without it showing up. – AmericanUmlaut Commented Jan 8, 2013 at 13:11
• I haven't e across the bug yet but I agree pletely about waiting for the right answer to appear. How would you suggest I do this? I was going to double the amount of divs appearing at one time, but your way sounds much better @AmericanUmlaut – Milo-J Commented Jan 8, 2013 at 13:17
• I would generate a random number between 1 and N, where N starts at 9 and is incremented every loop. If N<10, you display N, otherwise you generate the correct answer and reset N to 9. That avoids always having the right answer appear after a fixed number of loops, but the correct answer will show up significantly more often than wrong answers, and the odds you'd ever have to wait more than a few loops to get the right answer offered to you would be very low. – AmericanUmlaut Commented Jan 8, 2013 at 13:39

 |  Show 21 more ments

4 Answers 4

Sorted by: Reset to default 5

As @aug suggests, you should know where you cannot place things at draw-time, and only place them at valid positions. The easiest way to do this is to keep currently-occupied positions handy to check them against proposed locations.

I suggest something like

// locations of current divs; elements like {x: 10, y: 40}
var boxes = [];

// p point; b box top-left corner; w and h width and height
function inside(p, w, h, b) {
     return (p.x >= b.x) && (p.y >= b.y) && (p.x < b.x + w) && (p.y < b.y + h);
}

// a and b box top-left corners; w and h width and height; m is margin
function overlaps(a, b, w, h, m) {
     var corners = [a, {x:a.x+w, y:a.y}, {x:a.x, y:a.y+h}, {x:a.x+w, y:a.y+h}];
     var bWithMargins = {x:b.x-m, y:b.y-m};
     for (var i=0; i<corners.length; i++) {
         if (inside(corners[i], bWithMargins, w+2*m, h+2*m) return true;
     }
     return false;
}

// when placing a new piece
var box;
while (box === undefined) {
   box = createRandomPosition(); // returns something like {x: 15, y: 92}
   for (var i=0; i<boxes.length; i++) {
      if (overlaps(box, boxes[i], boxwidth, boxheight, margin)) {
         box = undefined;
         break;
      }
   }
}
boxes.push(box);

Warning: untested code, beware the typos.

The basic idea you will have to implement is that when a random coordinate is chosen, theoretically you SHOULD know the boundaries of what is not permissible and your program should know not to choose those places (whether you find an algorithm or way of simply disregarding those ranges or your program constantly checks to make sure that the number chosen isn't within the boundary is up to you. the latter is easier to implement but is a bad way of going about it simply because you are entirely relying on chance).

Let's say for example coordinate 50, 70 is selected. If the picture is 50x50 in size, the range of what is allowed would exclude not only the dimensions of the picture, but also 50px in all directions of the picture so that no overlap may occur.

Hope this helps. If I have time, I might try to code an example but I hope this answers the conceptual aspect of the question if that is what you were having trouble with.

Oh and btw forgot to say really great job on this program. It looks awesome :)

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/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.

Just use a random number which is based on the width of your board and then modulo with the height...

You get a cell which is where you can put the mole.

For the positions the x and y should never change as you have 9 spots lets say where the mole could pop up.

x x x
x x x 
x x x

Each cell would be sized based on % rather then pixels and would allow re sizing the screen

1%3 = 1 (x) 3%3 = 0 (y)

Then no overlap is possible.

Once the mole is positioned it can be show or hidden or moved etc based on some extended logic if required.

If want to keep things your way and you just need a quick re-position algorithm... just set the NE to the SW if the X + width >= x of the character you want to check by setting the x = y+height of the item which overlaps. You could also enforce that logic in the drawing routine by caching the last x and ensuring the random number was not < last + width of the item.

newY = randomFromTo(minY, maxY); newX = randomFromTo(minX, maxX); if(newX > lastX + characterWidth){ /*needful*/}

There could still however be overlap...

If you wanted to totally eliminate it you would need to keep track of state such as where each x was and then iterate that list to find a new position or position them first and then all them to move about randomly without intersecting which would would be able to control with just padding from that point.

Overall I think it would be easier to just keep X starting at 0 and then and then increment until you are at a X + character width > greater then the width of the board. Then just increase Y by character height and Set X = 0 or character width or some other offset.

newX = 0; newX += characterWidth; if(newX + chracterWidth > boardWidth) newX=0; newY+= characterHeight;

That results in no overlap and having nothing to iterate or keep track of additional to what you do now, the only downside is the pattern of the displayed characters being 'checker board style' or right next to each other (with possible random spacing in between horizontal and vertical placement e.g. you could adjust the padding randomly if you wanted too)

It's the whole random thing in the first place that adds the plexity.

AND I updated your fiddle to prove I eliminated the random and stopped the overlap :)

http://jsfiddle/pUwKb/51/

本文标签： javascriptrandomly mapping divsStack Overflow