Share your repls and programming experiences

← Back to all posts
[ CHALLENGE ] Flappy Bird
h
Coder100 (8404)

Flappy Bird Challenge

Can you make a flappy bird game in 10 minutes?

About

I created this in VSCODE in 10 minutes (9:46)! I polished it up later the day to make it better and have a high score. See if you can do better! The minimum requirements are to have a pipe and a bird, when you die it shows a death screen. I accomplished this with classes and a variable. By the way, this will become something bigger :D

btw, click and hold to fly ;)

How To Play

Mouse press to fly or else you fall.

Closing

Send repls! Language can be any.

Commentshotnewtop
firefish (510)

How on earth do you move the bird, tried click, space, up arrow... I DON'T KNOW

firefish (510)

@JosephSanthosh I tried clicking but nothing happens

potatojs (801)

yeah it's happening to me to :(
@firefish

firefish (510)

@potatojs I just realised, you click and it moves ever so slightly, not a jump like the original

potatojs (801)

lol i just discovered that a minute ago when i wa looking at the code XD
actually making it like that is way easier than making it jumb
@firefish

firefish (510)

@potatojs perfect timing then
(also it's jump not jumb)

potatojs (801)

jumb jump it's all the same
right?
@firefish

Coder100 (8404)

yes smooth flying, not like a bird more like a fish @firefish

firefish (510)

@Coder100 stop c y c l e s q u e e z i n g

firefish (510)

@Coder100 Does jumb rhyme with dumb? That is the question

potatojs (801)

lmao ik just my spelling is to bad
:P
@firefish

PolarisHD (0)

@firefish yes i took a look its more of a step than a leap

firefish (510)

you have to put a space between the text and the pungery @sojs

firefish (510)

@PolarisHD I know, I'm used to it going boing boing boing, not

crawl crawl crawl
firefish (510)

@Coder100 make the jump of the bird more noticable

PolarisHD (0)

@firefish rip, at least its not like one of those scam games where you dont jump at all. rip

firefish (510)

@PolarisHD The grilled cookie himself is a scam, I understand

PolarisHD (0)

@firefish haahaa. this was not a scam. err this was a not scam

firefish (510)

@PolarisHD Well the grilled cookie is a scam, donno about his projects though

mathiasaboye (66)

@firefish I think you are supposed to hold click that worked for me

ethanshaozz1928 (21)

@firefish you have to hold not click

ethanshaozz1928 (21)

@firefish you have to hole the mouse button

davidyu9 (3)

@firefish read the description click and hold

Axrevyn (220)

10 minutes? Huh. With my inexperience, it would take me 10 months to achieve the same result.

Coder100 (8404)

@Axrevyn oof
well, you'll get there someday!

HyperGamerStuds (61)

var keys = [];

var count = 0;
var tick = 0;

var score = 0;

var deathTicks = 0;

var buttons = [];
var gameState = 0; //0 = main-menu, 1 = game, (2 = game over)

var objects = [];

var started = false;

var keyPressed = function() {
keys[keyCode] = true;
};
var keyReleased = function() {
keys[keyCode] = false;
};

var addButton = function(id, state, x, y, width, height, text) {
var button = {};

button.id = id;
button.state = state;
button.x = x;
button.y = y;
button.width = width;
button.height = height;
button.text = text;
button.pressed = false;

buttons.push(button);

};

var FlappyBird = function() {
this.x = 100;
this.y = 150;

this.descentSpeed = 10;

this.height = 0;
this.heightIncrement = 0.25;

this.dead = false;

this.draw = function() {
    pushMatrix(); {
        var x = this.x + 16;
        var y = this.y + 12;
        
        var angle = max(-20, (this.descentSpeed - 10) * 4.1);
        if(angle <= 0) {
            
        }
        
        translate(x, y);
        rotate(angle);
        scale(0.80);
        translate(-x, -y);
        
        translate(this.x, this.y);
        this.drawSprite();
    } popMatrix();
};

this.drawSprite = function() {
    noStroke();
    
    fill(255, 255, 255);
    rect(2, 8, 10, 8);
    rect(8, 4, 4, 2);
    rect(12, 2, 6, 2);
    rect(16, 2, 10, 10);
    rect(26, 4, 4, 10);
    
    fill(23, 23, 23);
    rect(0, 8, 2, 2);
    rect(0, 10, 2, 2);
    rect(0, 12, 2, 2);
    rect(2, 6, 2, 2);
    rect(2, 14, 2, 2);
    rect(4, 6, 2, 2);
    rect(4, 16, 2, 2);
    rect(4, 18, 2, 2);
    rect(6, 4, 2, 2);
    rect(6, 6, 2, 2);
    rect(6, 16, 2, 2);
    rect(6, 20, 2, 2);
    rect(8, 2, 2, 2);
    rect(8, 6, 2, 2);
    rect(8, 16, 2, 2);
    rect(8, 20, 2, 2);
    rect(10, 2, 2, 2);
    rect(10, 8, 2, 2);
    rect(10, 14, 2, 2);
    rect(10, 22, 2, 2);
    rect(12, 0, 2, 2);
    rect(12, 10, 2, 2);
    rect(12, 12, 2, 2);
    rect(12, 22, 2, 2);
    rect(14, 0, 2, 2);
    rect(14, 22, 2, 2);
    rect(16, 0, 2, 2);
    rect(16, 4, 2, 2);
    rect(16, 6, 2, 2);
    rect(16, 8, 2, 2);
    rect(16, 16, 2, 2);
    rect(16, 22, 2, 2);
    rect(18, 0, 2, 2);
    rect(18, 2, 2, 2);
    rect(18, 10, 2, 2);
    rect(18, 14, 2, 2);
    rect(18, 18, 2, 2);
    rect(18, 22, 2, 2);
    rect(20, 0, 2, 2);
    rect(20, 12, 2, 2);
    rect(20, 16, 2, 2);
    rect(20, 20, 2, 2);
    rect(22, 0, 2, 2);
    rect(22, 12, 2, 2);
    rect(22, 16, 2, 2);
    rect(22, 20, 2, 2);
    rect(24, 0, 2, 2);
    rect(24, 12, 2, 2);
    rect(24, 16, 2, 2);
    rect(24, 20, 2, 2);
    rect(26, 2, 2, 2);
    rect(26, 6, 2, 2);
    rect(26, 8, 2, 2);
    rect(26, 12, 2, 2);
    rect(26, 16, 2, 2);
    rect(26, 20, 2, 2);
    rect(28, 4, 2, 2);
    rect(28, 12, 2, 2);
    rect(28, 16, 2, 2);
    rect(28, 20, 2, 2);
    rect(30, 6, 2, 2);
    rect(30, 8, 2, 2);
    rect(30, 10, 2, 2);
    rect(30, 12, 2, 2);
    rect(30, 16, 2, 2);
    rect(30, 20, 2, 2);
    rect(32, 12, 2, 2);
    rect(32, 16, 2, 2);
    rect(32, 18, 2, 2);
    rect(34, 14, 2, 2);
    
    fill(247, 255, 0);
    rect(2, 12, 2, 2);
    rect(4, 14, 2, 2);
    rect(6, 14, 2, 2);
    rect(8, 14, 2, 2);
    rect(10, 6, 2, 2);
    rect(10, 12, 2, 2);
    rect(12, 4, 2, 2);
    rect(12, 6, 2, 2);
    rect(12, 8, 2, 2);
    rect(12, 14, 2, 2);
    rect(14, 4, 2, 12);
    rect(16, 10, 2, 6);
    rect(18, 12, 2, 2);
    
    fill(244, 202, 22);
    rect(6, 18, 2, 2);
    rect(8, 18, 2, 2);
    rect(10, 16, 6, 6);
    rect(16, 18, 2, 4);
    rect(18, 20, 2, 2);
    
    fill(214, 43, 43);
    rect(18, 16, 2, 2);
    rect(20, 14, 14, 2);
    rect(20, 18, 12, 2);
};

this.update = function() {
    if(gameState === 1 && started) {
        this.controls();
    
        this.y += this.descentSpeed;
        
        this.descentSpeed += 1.25;
    } else if(gameState === 1) {
        this.y += this.height;
        
        this.height += this.heightIncrement;
        if(abs(this.height) >= 1.25) {
            this.heightIncrement *= -1;
        }
    }
    
    if(this.dead) {
        this.descentSpeed = min(32, this.descentSpeed + 2.0);
        
        this.y += 12;
        
        deathTicks++;
        
        if(this.y >= 332) {
            this.y = 332;
        }
        
        if(deathTicks === 15) {
            addButton(0, 2, 135, 310, 130, 38, "PLAY AGAIN");
        }
    }
};

this.controls = function() {
    if((mouseIsPressed || keys[32]) && !this.dead) {
        this.descentSpeed = -7;
    }
};

};
var FlappiestBird = new FlappyBird();

var initProgram = function() {
buttons = [];

addButton(0, 0, 50, 290, 130, 38, "START");
addButton(1, 0, 220, 290, 130, 38, "SCORES");

score = 0;
deathTicks = 0;

count = 0;
tick = 0;

gameState = 0;
objects = [];
started = false;

FlappiestBird = new FlappyBird();

};
initProgram();

var buttonPressed = function(button) {
switch(button.state) {
case 0:
switch(button.id) {
case 0:
gameState = 1;
score = 0;
started = false;
break;
default:
break;
}
break;
case 2:
switch(button.id) {
case 0:
initProgram();
break;
default:
break;
}
break;
default:
break;
}
};

var addObject = function() {
var lastY = random(20) + 150;

if(objects.length > 0) {
    var lastObject = objects[objects.length - 1];
    lastY = lastObject.y;
}

var object = {};

object.y = max(90, min(260, lastY + random(200) - 100));
object.x = 450;

objects.push(object);

};

var drawPixelatedEllipse = function(x, y, width, height, colour) {
fill(colour);
ellipse(x, y, width, height);

noStroke();
fill(red(colour) + 10, green(colour) + 10, blue(colour) + 10);
for(var i = 0; i <= 360; i += 7) {
    var xx = x + cos(i) * (width / 2);
    var yy = y + sin(i) * (height / 2);
    
    rect(xx - 3, yy - 3, 6, 6);
}

};

var mousePressed = function() {
if(gameState === 1) {
if(!started) {
started = true;
}
}

for(var i = 0; i < buttons.length; i++) {
    var button = buttons[i];
    
    if(button.state === gameState) {
        if(mouseX >= button.x - 1 && mouseX <= button.x + button.width + 1 && 
            mouseY >= button.y - 1 && mouseY <= button.y + button.height + 1) {
            buttonPressed(button);
        }
    }
}

};

var die = function() {
FlappiestBird.dead = true;
gameState = 2;
deathTicks = 0;
};

var intersects = function(r1, r2) {
return !(r2.left >= r1.right ||
r2.right <= r1.left ||
r2.top >= r1.bottom ||
r2.bottom <= r1.top);
};

draw = function() {
background(91, 199, 199);

if(gameState !== 2) {
    count += 3;
    if(count >= 15) {
        count = 0;
    }
}

pushMatrix();

translate(200, 200);
scale((deathTicks > 0 && deathTicks <= 10)? 1.01 : 1.0);
translate(-200, -200);

if(deathTicks > 0 && deathTicks <= 10) {
    translate(random(4) - 2, random(4) - 2);
}
//Draw background
noStroke();

fill(255, 255, 255);
drawPixelatedEllipse(20, 320, 80, 80, color(255, 255, 255));
drawPixelatedEllipse(70, 340, 80, 80, color(255, 255, 255));
drawPixelatedEllipse(115, 325, 80, 75, color(255, 255, 255));
drawPixelatedEllipse(160, 330, 50, 60, color(255, 255, 255));
drawPixelatedEllipse(200, 320, 60, 60, color(255, 255, 255));
drawPixelatedEllipse(240, 325, 60, 80, color(255, 255, 255));
drawPixelatedEllipse(270, 335, 60, 80, color(255, 255, 255));
drawPixelatedEllipse(310, 330, 60, 60, color(255, 255, 255));
drawPixelatedEllipse(350, 325, 50, 60, color(255, 255, 255));
drawPixelatedEllipse(390, 320, 70, 80, color(255, 255, 255));

drawPixelatedEllipse(112, 370, 76, 76, color(29, 196, 79));
drawPixelatedEllipse(251, 378, 83, 90, color(29, 196, 79));
drawPixelatedEllipse(0, 367, 74, 89, color(29, 196, 79));
drawPixelatedEllipse(350, 368, 73, 60, color(29, 196, 79));
drawPixelatedEllipse(140, 376, 72, 71, color(29, 196, 79));
drawPixelatedEllipse(434, 353, 70, 85, color(29, 196, 79));
drawPixelatedEllipse(207, 380, 77, 86, color(29, 196, 79));
drawPixelatedEllipse(320, 373, 73, 84, color(29, 196, 79));
drawPixelatedEllipse(82, 372, 75, 73, color(29, 196, 79));
drawPixelatedEllipse(221, 380, 77, 84, color(29, 196, 79));
drawPixelatedEllipse(388, 375, 77, 72, color(29, 196, 79));
drawPixelatedEllipse(273, 380, 90, 75, color(29, 196, 79));
drawPixelatedEllipse(404, 388, 88, 88, color(29, 196, 79));
drawPixelatedEllipse(176, 378, 85, 79, color(29, 196, 79));
drawPixelatedEllipse(86, 368, 81, 83, color(29, 196, 79));
drawPixelatedEllipse(293, 378, 88, 90, color(29, 196, 79));
drawPixelatedEllipse(52, 376, 84, 84, color(29, 196, 79));
drawPixelatedEllipse(24, 376, 74, 81, color(29, 196, 79));

if(gameState === 1 || gameState === 2) {
    if(!FlappiestBird.dead) {
        if(FlappiestBird.y >= 320) {
            die();
        }
    }
    var playerAABB = {};
    
    playerAABB.left = FlappiestBird.x;
    playerAABB.right = FlappiestBird.x + 34;
    playerAABB.top = FlappiestBird.y;
    playerAABB.bottom = FlappiestBird.y + 24;
    
    //Draw obstacles
    var index = objects.length;
    while(index--) {
        var object = objects[index];
        
        object.x -= FlappiestBird.dead? 0 : 3;
        
        var topAABB = {};
        
        topAABB.left = object.x - 5;
        topAABB.right = object.x + 45;
        topAABB.top = -5000;
        topAABB.bottom = object.y - 55;
        
        var bottomAABB = {};
        
        bottomAABB.left = object.x - 5;
        bottomAABB.right = object.x + 45;
        bottomAABB.top = object.y + 38;
        bottomAABB.bottom = 300;
        
        if(abs(object.x - FlappiestBird.x) <= 1) {
            score++;
        }
        
        if(intersects(playerAABB, topAABB) || intersects(playerAABB, bottomAABB)) {
            die();
        }
        
        pushMatrix(); {
            translate(0, -10);
            
            strokeWeight(2);
            stroke(0, 0, 0);
            
            fill(56, 207, 39);
            
            rect(object.x, -2, 40, object.y - 50);
            rect(object.x - 5, object.y - 70, 50, 25);
            
            noStroke();
            
            fill(255, 255, 255, 100);
            
            rect(object.x, 0, 11, object.y - 71);
            rect(object.x - 4, object.y - 66, 11, 20);
            rect(object.x + 9, object.y - 66, 2, 20);
            rect(object.x + 13, 0, 2, object.y - 71);
            
            fill(255, 255, 255, 150);
            
            rect(object.x + 2.5, 0, 3, object.y - 71);
            rect(object.x - 1.5, object.y - 66, 3, 20);
            
            fill(0, 0, 0, 100);
            
            rect(object.x + 40, 0, -5, object.y - 71);
            rect(object.x + 33, 0, -2, object.y - 71);
            rect(object.x - 4, object.y - 70, 50, 3);
            rect(object.x + 39, object.y - 67, 5, 22);
            rect(object.x + 35, object.y - 67, 2, 22);
            
            fill(0, 0, 0, 50);
            rect(object.x - 4, object.y - 67, 39, 1);
            rect(object.x + 37, object.y - 67, 3, 1);
        } popMatrix();
        
        pushMatrix(); {
            translate(0, 10);
            
            strokeWeight(2);
            stroke(0, 0, 0);
            
            fill(56, 207, 39);
            rect(object.x, object.y + 50, 40, 400);
            rect(object.x - 5, object.y + 30, 50, 25);
            
            noStroke();
            fill(255, 255, 255, 100);
            rect(object.x, object.y + 56, 11, 300);
            rect(object.x + 13, object.y + 56, 2, 300);
            rect(object.x - 4, object.y + 31, 11, 20);
            rect(object.x + 9, object.y + 31, 2, 20);
            
            fill(255, 255, 255, 150);
            rect(object.x + 2.5, object.y + 56, 3, 300);
            rect(object.x - 1.5, object.y + 31, 3, 20);
            
            fill(0, 0, 0, 100);
            rect(object.x + 40, object.y + 56, -5, 300);
            rect(object.x + 33, object.y + 56, -2, 300);
            rect(object.x - 4, object.y + 52, 50, 3);
            rect(object.x + 39, object.y + 30, 5, 22);
            rect(object.x + 35, object.y + 30, 2, 22);
            
            fill(0, 0, 0, 50);
            rect(object.x - 4, object.y + 51, 39, 1);
            rect(object.x + 37, object.y + 51, 3, 1);
        } popMatrix();
        
        if(object.x <= -50) {
            objects.splice(index, 1);
        }
    }
}
noStroke();


fill(250, 215, 73);
rect(0, 360, 400, 40);
fill(84, 222, 0);
rect(0, 350, 400, 12);
fill(255, 255, 255, 200);
rect(0, 350, 400, 2);
fill(0, 0, 0);
rect(0, 349, 400, 1);

fill(0, 0, 0, 40);
rect(0, 360, 400, 3);
rect(0, 361, 400, 3);
rect(0, 362, 400, 3);

fill(124, 242, 0);
for(var i = 0; i < 30; i++) {
    var x = i * 15 - count;
    quad(x, 352, x + 7, 352, x, 360, x - 7, 360);
}

tick++;
if(this.gameState !== 0) {
    FlappiestBird.update();
    FlappiestBird.draw();
}

popMatrix();

if(gameState === 1) {
    if(started) {
        if(tick % 50 === 0) {
            addObject();
        }
        
        fill(255, 255, 255);
        text(score, 200, 130);
    } else {
        fill(255, 0, 0);
        strokeWeight(2);
        stroke(255, 255, 255);
        
        beginShape();
        vertex(205, 227);
        vertex(213, 220);
        vertex(237, 220);
        vertex(237, 234);
        vertex(213, 234);
        vertex(205, 227);
        endShape();
        
        fill(255, 255, 255);
        textFont(createFont("Monospace", 10), 12);
        text("TAP", 223, 227);
        
        noStroke();
        
        pushMatrix(); {
            translate(-10, 28);
            
            fill(255, 255, 255);
            rect(202, 200, 2, 28);
            rect(200, 218, 2, 8);
            rect(198, 212, 2, 12);
            rect(200, 212, 16, 16);
            rect(206, 208, 6, 4);
            
            fill(0, 0, 0);
            rect(200, 200, 2, 18);
            rect(204, 200, 2, 14);
            rect(202, 198, 2, 2);
            rect(198, 210, 2, 2);
            rect(196, 212, 2, 12);
            rect(198, 224, 2, 2);
            rect(200, 226, 2, 2);
            rect(202, 228, 12, 2);
            rect(206, 206, 2, 2);
            rect(208, 208, 2, 6);
            rect(210, 208, 2, 2);
            rect(212, 210, 4, 2);
            rect(212, 212, 2, 4);
            rect(216, 212, 2, 12);
            rect(214, 224, 2, 4);
        } popMatrix();
        
        stroke(0, 0, 0);
        strokeWeight(1.5);
        
        line(189, 225, 183, 216);
        line(193, 223, 193, 213);
        line(197, 225, 203, 216);
    }
}

//Draw buttons
for(var i = 0; i < buttons.length; i++) {
    var button = buttons[i];
    
    if(button.state === gameState) {
        if(mouseX >= button.x - 1 && mouseX <= button.x + button.width + 1 && 
            mouseY >= button.y - 1 && mouseY <= button.y + button.height + 1) {
            button.pressed = true;
        } else {
            button.pressed = false;
        }
        
        //Draw
        stroke(112, 73, 14);
        strokeWeight(2);
        
        fill(255, 255, 255);
        rect(button.x, button.y + (button.pressed? 2 : 0), button.width, button.height);
        
        noStroke();
        fill(209, 101, 30);
        rect(button.x + 3, button.y + 3 + (button.pressed? 2 : 0), button.width - 6, button.height - 6);
        
        fill(255, 255, 255);
        textAlign(CENTER, CENTER);
        textFont("Monospace", 16);
        text(button.text, button.x + button.width / 2, button.y + button.height / 2 + (button.pressed? 2 : 0));
        
        fill(112, 73, 14);
        rect(button.x - 1, button.y + button.height + 1, button.width + 2, 2);
    }
}

if(gameState === 2) {
    if(deathTicks === 2) {
        noStroke();
        fill(255, 255, 255);
        rect(0, 0, 400, 400);
    }
    if(FlappiestBird.y >= 325 && deathTicks >= 15) {
        strokeWeight(2);
        stroke(0, 0, 0);
        
        fill(222, 213, 146);
        rect(75, 150, 250, 150);
        
        stroke(207, 172, 91);
        fill(222, 216, 151);
        rect(80, 155, 240, 140);
        
        stroke(217, 197, 126);
        rect(81, 156, 238, 138);
        
        fill(242, 232, 172);
        rect(76, 152, 248, 0.1);
        
        fill(196, 153, 72);
        textSize(15);
        
        textAlign(RIGHT, CENTER);
        text("SCORE", 305, 175);
        text("BEST", 305, 225);
        
        fill(255, 255, 255);
        textSize(20);
        
        text(score, 305, 200);
        text(score, 305, 250);
    }
}

};

HyperGamerStuds (61)

That should make a decent flappy bird game :) @HyperGamerStuds

poetaetoes (284)

too hard!!!

make it go faster!!!

Bigbodyboy21 (19)

good, but try a better bird

tankerguy1917 (20)

i cant get it to jump, maybe its because im on a laptop, but i dont know
looks good though

BobTheTomatoPie (1061)

damn this is amazing for 10 minutes

JSDRAGONCODER (7)

there is error says "unexpected token = expected ( before methods parameter list"

[deleted]

Nice game!

RahulChoubey1 (19)

The transition to the lose screen is too sudden. How about showing the bird on the pipe for the lose screen?

Spitfier720 (19)

my bird keeps falling and i keep dying pls help

jason37 (0)

Coder 100 join my group

Coder100 (8404)

try clicking and holding lmao @RohilPatel

Coder100 (8404)

Oh haha you don't have the latest JS get a better browser @RohilPatel

Kudos (30)

@coder100
Whoaaaaaaaaaaaa......
I need to reserve more time for learning P5js..
What do you want to do for your career?
Web Dev, Game dev, or what?
I would really like to see you transition into Three.js.
(Because the only popular 2d game nowadays is Among Us.)
But this is still VERY great for 10 min.

Coder100 (8404)

@Kudos lol thanks!!
three.js is cool, I've tried it before, but I'm going to use p5.js's primitive 3D :)

Leroy01010 (246)

my friends have talked about among us...

@Kudos

Gabby8C0des8 (24)

lol i keep dying in the beginning, also great game :) @Coder100

Jeydin21 (28)

No way you coded this in 10 minutes, look at game.js! But if you actually did, gg I guess.

jason37 (0)

lol u cant move

Coder100 (8404)

Click and hold, I'll fix that in a bit lol @jason37

Bookie0 (3918)

pretty cool!

just one thing, if this is flappy bird...where are the wings?! lmao

also maybe instead of having to click on trackpad/mouse, maybe change it to arrows or space bar as it would be a bit easier...

;)

ChungusFam (9)

I kept jitter-clicking it and it still doesn't go up after it does once.

Yashmit (0)

Actually CLICK AND HOLD

ridark (87)

I used to have a flappy bird project that I worked on for like a couple months ... let me see if i can find it ...

ridark (87)

here, i also had a couple of friends help so, thats why the source looks so professional --> Flappy! <-- @ridark

ridark (87)

ikr im thinking about adding a background to it so i might be able to, and im also thinking about adding modes (easy, hard, impossible) @Coder100

Coder100 (8404)

@ridark cool
the font should be fixed first lol

Coder100 (8404)

it really defeats the pixel art @ridark

carlsagan (0)

@ridark just an observation, but you can fly over the pipes. Just thought to let you know. :)

Coder100 (8404)

ahhh did my collisions go bad? Send screenshot @carlsagan

carlsagan (0)

no, i apologize, i meant to reply to ridark with his game. Yours is really impressive. @Coder100

ridark (87)

hmmm i will fix that... ill duplicate the floor to the ceiling @carlsagan

sojs (246)

That game is insanely hard to play. @ridark

ridark (87)

we made it like the real game, and like any retro game they are nearly impossible @sojs

RahulChoubey1 (19)

I figured out how to cheat and make it ultra easy

RahulChoubey1 (19)

@Coder100 Your code is based on screen height. If you make the screen short enough, you can just fly on a straight path. Then it's just a matter of patience.

RahulChoubey1 (19)

Sorry about posting it three times. I thought that it didn't work.

Coder100 (8404)

@RahulChoubey1 oh yeah repl.it got DDOSed

Coder100 (8404)

ok read your comment, yeah I'm aware of that, do you have any potential solutions? @RahulChoubey1

RahulChoubey1 (19)

@Coder100 Maybe if the screen height is too low, it should display a message saying "Please raise your screen height if possible"? Also, have you noticed that sometimes there's a super high pipe next to a super low pipe, causing certain loss? Maybe you should add a cap.

fuzzyastrocat (649)

@Coder100 I would suggest scaling the game based on the screen height — ie, make all the images sizes something like scale(some_factor * height) and adjust the positions too. That way, a tiny screen will display everything really small, while a big screen will display everything really big. This makes it so that it's not unfair either way. (And it will work nicely on mobile)

Coder100 (8404)

@fuzzyastrocat any ideas how I should make the jump up?

I am thinking:

let jumping = 0;
let vel = 0;

function draw() {
  // ...
  if (jumping >= 0) {
    vel += 2;
    jumping --;
  } else {
    vel -= 0.02;
  }

  // insert constraints and stuff
}

function mouseClicked () { if (!jumping) jumping = true; }

of course, I am hoping there will be an easier way :)

fuzzyastrocat (649)

@Coder100 You can do it much simpler:

// ...
function draw() {
  // ...
  vel -= 0.02;
  // ...
}

function mouseClicked () { vel = 2; }

I'm assuming negative vel moves the bird down based on what you just put there, if not then flip the signs on my answer. (And obviously you can tweak the numbers to your liking)

Coder100 (8404)

@fuzzyastrocat ah, but will the jump be smooth?
hmm ill test it out

fuzzyastrocat (649)

@Coder100 What do you mean? If you mean, "will it trace a smooth arc?", then yes. If you mean "will it smoothly transition from doing down to going up?" then no, but neither does your solution or standard flappy bird.

fuzzyastrocat (649)

@Coder100 Oh also, use mousePressed. mouseClicked only triggers after a mouse has been clicked and released, which might lead to confusing behavior.

Coder100 (8404)

@fuzzyastrocat that was for example, anyways I think the movement is pretty good here

fuzzyastrocat (649)

@Coder100 Regardless, you should use mousePressed for this (I actually got confused on the example because of mouseClicked)

Why do you constrain the velocity? Aside from terminal velocity (which is huge), in real life there is no constraint on velocity so it looks really weird when the bird stops speeding up.

I'd suggest something like this [repl removed].

Coder100 (8404)

that works too, the constraints are arbitrary choice ig @fuzzyastrocat

Jeydin21 (28)

What kind of tube randomizer are you using? There's always this one impossible tube set I can't get past, there would be a low opening at the floor and a super high one at the top. It makes this game impossible to beat. So this technically isn't Flappy Bird.

Coder100 (8404)

@Jeydin21 the randomizer is literally random lol
do you have any other algorithms?

Jeydin21 (28)

@Coder100 Why are you asking me? You coded this, not me.

Jeydin21 (28)

@Coder100 Are you even going to fix this?

Coder100 (8404)

@Jeydin21 so no algorithms either? aw

Jeydin21 (28)

@Coder100 Why are you asking me for help?

Coder100 (8404)

@Jeydin21 well you said the algorithm was bad

Jeydin21 (28)

@Coder100 It is bad. You have to code it in a way that makes the game fair.

fuzzyastrocat (649)

@Coder100 I have a suggestion:

Rather than making each tube truly random, make each tube a random offset away from the previous tube. The offset should be constrained to some number like 300px (ie Math.random() * 300). That way, you'll never have a tube that is, say, more than 300px away from the previous one. This also lends well to increasing difficulty — just allow the tubes to be farther and farther from the previous ones.

You'll obviously have to handle the edge case where a tube gets placed off the screen (like, if a tube gets placed 300px down from a tube that was 100px away from the bottom), if that happens I'd just negate the number and it should work (for non-tiny screens). Alternatively you could just constrain it (Math.max(0, Math.min(<screen height>, <new tube position>))), while this solves the tiny screens problem it could also lead to a bunch of tubes at the bottom/top of the screen.

Coder100 (8404)

@fuzzyastrocat ok, so make it relative to the previous pipe?
I could add a method to the class:

genNext(difficulty) {
  return this.holey + random(-difficulty, difficulty);
}
fuzzyastrocat (649)

@Coder100 Blech, p5js random... use (Math.random() - 0.5) * 2 * difficulty, it will be faster performance-wise (not insanely important here, but good practice).

But yes, that method would work. Keep in mind the edge case though, if you use my second solution it would look like this:

genNext(difficulty) {
  return this.holey + Math.max(10, Math.min(height - 200, (Math.random() - 0.5) * 2 * difficulty));
}
Coder100 (8404)

@fuzzyastrocat oh right forgot to make the constraints
anyways I think I get the gist of what you are saying

fuzzyastrocat (649)

@Coder100 Great! That should make the game more fair and more fun!

fuzzyastrocat (649)

@Jeydin21 Indeed.

@Coder100 Still wondering why it it's hold-to-slowly-rise-up rather than click-to-flap...

Coder100 (8404)

maybe it's because I only had 10 minutes? who knows... @fuzzyastrocat

Coder100 (8404)

Anyways is that feature fine? @fuzzyastrocat

fuzzyastrocat (649)

@Coder100 My inclination is no. Most users expect a flappy bird to be "click and it flaps up", so it might just cause more confusion than it's worth. (Also, the click-to-flap makes it a tad more challenging, which is nice)

Jeydin21 (28)

@fuzzyastrocat @Coder100 Can you guys uh, move off of this comment thread please, my notifs are getting spammed and I have to sort through all of them, thank you.

fuzzyastrocat (649)

@Jeydin21 Oh whoops, I always forget repl does that... sorry about that

Jeydin21 (28)

@fuzzyastrocat All good, it's never been this spammy before lol

MatReiner (109)

bruh that game is trash it isnt even flappy bird

Coder100 (8404)

@Jeydin21 ok this is only for reaction:

PLEASE UPVOTE THIS PROGRAM KTHX BYE
Jeydin21 (28)

@Coder100 No thank you, this does not deserve an upvote. A toxic developer and a trash project both do not deserve an upvote. Thank you for your time, if you even gave any to read this.

Coder100 (8404)

@Jeydin21 lmao stop being so toxic

ok with all due respect I actually did skip this lmao

Jeydin21 (28)

@Coder100 I'm not the one begging for upvotes ok?

hello1964 (22)

It doesn’t work it just returns an error

Coder100 (8404)

oh yeah make sure you have the latest es6, or just fork this project and delete line 2 in game.js and add this.passed = false; on line 8 @hello1964

Coder100 (8404)

@hello1964 es6 = javascript
it has a lot of newer features (like the one I'm using)

almenon (0)

Do you have a video of the creation process? Creating this in 10 minutes is super impressive 0_o

Coder100 (8404)

@almenon oof
I don't have a screen recorder

almenon (0)

@Coder100 OBS Studio works well. You can set a noise gate & noise suppression filter to eliminate the keyboard/background noise if you want to talk. Example: https://www.youtube.com/watch?v=GxryBUukTyM

A lot of twitch streamers use OBS too.