jQuery spawning div and collision detection

Question

So im almost at the end of my school homework project im just missing two major things i can\'t seem to figure out:

1.How to spawn the pipe obstacles with a random posit

Answer 1

How to spawn the pipe obstacles

The pipes happen at a regular interval or distance. You can either check the time elapsed or you can check the distance traveled by existing pipes.

Second i need a help with the collision detection

Pipes have width and height, as well as position. Essentially, your pipes are boxes. This also means the same for the bird. I believe it's called a "bounding box". You can check if any of the edges of the bird if it intersects with the edges of the box.

Answer 2

first of all i've changed your CSS little bit to arrange the code and set the different width groups classes ('.zero', '.one', etc.) for the pipes, you can add more width groups or edit it later but notice the ratio between the pipes sides width and the bird width.

#bird
{
    position:absolute;
    width:4%;
    height: auto;
    right:0;
}

#fullPipe
{
    position:absolute;
    width:100%;
    left:0%;
    height: 10%;
}

#leftPipe, #rightPipe
{
    position:absolute;
    top:0;
    width:48%;
    height: 100%;
}

#leftPipe
{
    left:0%;
}

#rightPipe
{
    right:0%;
}

.zero #leftPipe, .zero #rightPipe
{
    width:48%;
}

.one #leftPipe
{
    width:8%;
}

.one #rightPipe
{
    width:88%;
}

.two #leftPipe
{
    width:28%;
}

.two #rightPipe
{
    width:68%;
}

.three #leftPipe
{
    width:58%;
}

.three #rightPipe
{
    width:38%;
}

.four #leftPipe
{
    width:88%;
}

.four #rightPipe
{
    width:8%;
}

#leftPipe img, #rightPipe img
{
    width:100%;
    height: 100%;
}

in The JS, notice the condition inside the setInterval(), i set it for now to '700' for the demo but after you will set the collision ready, you can replace it with condition of if the pipes and the body not in collision (out of the frame) then reset the pipes and set new width group class.

    var PipesRandom;
    var PipesWidth = ['zero', 'one', 'two', 'three', 'four'];  
    function spawnPipe(astY){ //spawn asteroids
        $('#fullPipe').css("top", astY);  
    }  
    setInterval(function(){
        astY += 1;
        if(astY < 700){
            spawnPipe(astY);
        } 
        else {
            astY = -100;
            PipesRandom = PipesWidth[Math.floor(Math.random() * PipesWidth.length)];
            $('#fullPipe').removeClass('zero one two three four');
            $('#fullPipe').addClass(PipesRandom);
            spawnPipe(astY);
        }
    } ,10);

example: http://jsfiddle.net/u38ratk9/8/

about the collision, there are a lot of options, you can check this question for example: Please recommend a JQuery plugin that handles collision detection for draggable elements

or: Basic 2d collision detection

there are a lot, just search.