Flappy Bird game

New to java scrip and need some help please :slight_smile:
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;
    
})

}

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

})

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

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

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);
        }

    })
}