Index.html #96
Description
psplus51214-dot
Issue body actions
<title>Flappy Bird Accurate</title>
<style>
body{
margin:0;
background:#222;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
canvas{
background:#70c5ce;
border-radius:10px;
}
</style>
<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
let frames = 0;
const DEGREE = Math.PI/180;
// Load Bird Image (optional square fallback)
const birdImg = new Image();
birdImg.src =
"https://i.ibb.co/58L7qdf/flappybird.png"; // small bird sprite
// GAME STATES
const state = {
current: 0,
getReady: 0,
game: 1,
over: 2
};
// CONTROL
document.addEventListener("keydown", control);
document.addEventListener("touchstart", control);
function control(){
switch(state.current){
case state.getReady:
state.current = state.game;
break;
case state.game:
bird.flap();
break;
case state.over:
pipes.reset();
bird.reset();
score.value = 0;
state.current = state.getReady;
break;
}
}
// BIRD
const bird = {
x: 50,
y: 150,
radius: 12,
gravity: 0.25,
jump: 4.8,
speed: 0,
rotation: 0,
draw(){
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.rotation);
ctx.drawImage(birdImg, -20, -20, 40, 40);
ctx.restore();
},
update(){
if(state.current === state.getReady){
this.y = 200;
this.rotation = 0;
} else {
this.speed += this.gravity;
this.y += this.speed;
if(this.y + this.radius >= canvas.height){
state.current = state.over;
}
if(this.speed >= this.jump){
this.rotation = 70 * DEGREE;
} else {
this.rotation = -25 * DEGREE;
}
}
},
flap(){
this.speed = -this.jump;
},
reset(){
this.speed = 0;
this.y = 200;
}
};
// PIPES
const pipes = {
position: [],
top: "#2ecc71",
bottom: "#27ae60",
width: 50,
gap: 120,
maxYPos: -150,
draw(){
for(let p of this.position){
ctx.fillStyle = this.top;
ctx.fillRect(p.x, p.y, this.width, canvas.height);
ctx.fillStyle = this.bottom;
ctx.fillRect(p.x, p.y + this.gap, this.width, canvas.height);
}
},
update(){
if(state.current !== state.game) return;
if(frames % 100 === 0){
this.position.push({
x: canvas.width,
y: this.maxYPos * (Math.random() + 1)
});
}
for(let i = 0; i < this.position.length; i++){
let p = this.position[i];
p.x -= 2;
// Collision
if(
bird.x + bird.radius > p.x &&
bird.x - bird.radius < p.x + this.width &&
(bird.y - bird.radius < p.y + canvas.height ||
bird.y + bird.radius > p.y + this.gap)
){
state.current = state.over;
}
// Remove pipe
if(p.x + this.width <= 0){
this.position.shift();
score.value++;
}
}
},
reset(){
this.position = [];
}
};
// SCORE
const score = {
value: 0,
draw(){
ctx.fillStyle = "#fff";
ctx.font = "30px Arial";
if(state.current === state.game){
ctx.fillText("Score: " + this.value, 10, 40);
}
if(state.current === state.over){
ctx.fillText("Game Over!", 110, 250);
ctx.fillText("Score: " + this.value, 140, 300);
ctx.font = "20px Arial";
ctx.fillText("Tap to Restart", 130, 340);
}
if(state.current === state.getReady){
ctx.font = "25px Arial";
ctx.fillText("Tap to Start", 125, 300);
}
}
};
// UPDATE + DRAW
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
pipes.draw();
bird.draw();
score.draw();
}
function update(){
bird.update();
pipes.update();
}
function loop(){
update();
draw();
frames++;
requestAnimationFrame(loop);
}
loop();
</script>
Reactions are currently unavailable