# Flappy Bird game

**URL:** <https://discourse.processing.org/t/flappy-bird-game/1955>\
**Category:** Coding Questions\
**Created:** [July 21, 2018, 3:54am UTC](https://discourse.processing.org/t/flappy-bird-game/1955 "2018-07-21T03:54:49Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![justdredre](https://avatars.discourse-cdn.com/v4/letter/j/d07c76/32.png) [@justdredre](https://discourse.processing.org/u/justdredre)\
**Post date:** [July 21, 2018, 3:54am UTC](https://discourse.processing.org/t/flappy-bird-game/1955/1 "2018-07-21T03:54:49Z")

</div>

New to java scrip and need some help please 🙂  
Can someone tell me why my obstacles arent showing up when i live preview? I have used the console log to see if its registering the obstacles every 2 seconds (which it is) but its not displaying them for some reason?

var bird ={};  
var obstacles = [];

function Obstacle(I){  
I.active = true;  
I.x = width;  
I.width = 40;  
I.slitheight = 150;  
I.slit = random(0, height - I.slitheight);  
I.xVelocity = -2;  
I.draw = function(){  
rect(I.x, 0, I.width, I.slit);  
rect(I.x, I.slit + I.slitheight, I.width, height - I.slitheight - I.slit);  
}  
I.update = function(){  
I.active = I.active && (I.x + I.width \> 0);  
I.x += I.xVelocity;  
}  
return I;  
}

function keyPressed(){  
if(keyCode ==32){  
bird.yVelocity = 10;  
}  
}

function setup() {  
// put setup code here  
createCanvas (600, 400);  
bird.x = 100;  
bird.y = 200;  
bird.width = 20;  
bird.height = 20;  
bird.yVelocity = 0;  
bird.yAcceleration = -1.7;

```
bird.draw = function(){
    rect(bird.x, bird.y, bird.width, bird.height);
};

bird.update = function(){
    bird.yVelocity = bird.yVelocity + 0.6 * bird.yAcceleration;
    bird.y = constrain(bird.y - bird.yVelocity, 0, height - bird.height);
};

setInterval(function(){
    obstacles.push(Obstacle({}));
    console.log(obstacles.length);
},2000);

```

}

function draw(){  
// put drawing code here  
background(45);  
bird.draw();  
bird.update();

```
obstacles = obstacles.filter(function(obstacle){
    return obstacle.active;
});

obstacles.forEach(function(obstacle){
    obstacle.update;
    obstacle.draw;
    
})

```

}

---

<div class="post-metadata">

**Author:** ![Grimtin10](https://avatars.discourse-cdn.com/v4/letter/g/e47c2d/32.png) [@Grimtin10](https://discourse.processing.org/u/Grimtin10)\
**Post date:** [July 21, 2018, 4:15am UTC](https://discourse.processing.org/t/flappy-bird-game/1955/2 "2018-07-21T04:15:18Z")

</div>

you forgot the parenthesis on obstacles.forEach(function(obstacle){  
obstacle.update;  
obstacle.draw;

})

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [July 22, 2018, 6:32am UTC](https://discourse.processing.org/t/flappy-bird-game/1955/4 "2018-07-22T06:32:35Z")

</div>

What IDE are you using to write your code? If you are using Processing in p5.js mode, you can press `ctrl+t` to nicely tabulate/indent your code before you paste it here. Then, you can format the code here in the forum by selecting it and hitting the \</\> button before finishing posting your question.

Kf

---

<div class="post-metadata">

**Author:** ![justdredre](https://avatars.discourse-cdn.com/v4/letter/j/d07c76/32.png) [@justdredre](https://discourse.processing.org/u/justdredre)\
**Post date:** [July 22, 2018, 7:13am UTC](https://discourse.processing.org/t/flappy-bird-game/1955/5 "2018-07-22T07:13:23Z")

</div>

Ok thanks. Im using brackets. Ill try and copy it again and format it.

---

<div class="post-metadata">

**Author:** ![justdredre](https://avatars.discourse-cdn.com/v4/letter/j/d07c76/32.png) [@justdredre](https://discourse.processing.org/u/justdredre)\
**Post date:** [July 22, 2018, 7:16am UTC](https://discourse.processing.org/t/flappy-bird-game/1955/6 "2018-07-22T07:16:52Z")

</div>

```auto
var bird ={};
var obstacles = [];

function Obstacle(I){
    I.active = true;
    I.x = width;
    I.width = 40;
    I.slitheight = 150;
    I.slit = random(0, height - I.slitheight);
    I.xVelocity = -2;
    I.draw = function(){
        rect(I.x, 0, I.width, I.slit);
        rect(I.x, I.slit + I.slitheight, I.width,height - I.slitheight - I.slit);
    }
    I.update = function(){
        I.active = I.active && (I.x + I.width > 0);
        I.x += I.xVelocity;
    }
    return I;
}

function keyPressed(){
    if(keyCode ==32){
        bird.yVelocity = 10;
    }
}

function collision(obstacle, bird){
    return (bird.y <= obstacle.slit || bird.y + bird.width >= obstacle.slit + obstacle.slitHeight) && bird.x + bird.width >= obstacle.x && bird.x <= obstacle.x + obstacle.width;
}

function setup() {
  // put setup code here
    createCanvas (600, 400);
    bird.x = 100;
    bird.y = 200;
    bird.width = 20;
    bird.height = 20;
    bird.yVelocity = 0;
    bird.yAcceleration = -1.7;
    
    bird.draw = function(){
        rect(bird.x, bird.y, bird.width, bird.height);
    };
    
    bird.update = function(){
        bird.yVelocity = bird.yVelocity + 0.6 * bird.yAcceleration;
        bird.y = constrain(bird.y - bird.yVelocity, 0, height - bird.height);
    };
    
    setInterval(function(){
        obstacles.push(Obstacle({}));
        console.log(obstacles.length);
    },2000);
}

function draw(){
    background(45);
    bird.draw();
    bird.update();
    
    obstacles = obstacles.filter(function(obstacle){
        return obstacle.active;
    });
    
    obstacles.forEach(function(obstacle){
        obstacle.draw();
        obstacle.update();
        if(collision(obstacle, bird)){
            noLoop();
            textSize(40);
			text("GAME OVER", 180, 200);
        }

    })
}

```