index.html

// 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 * Math.PI / 180; } else { this.rotation = -25 * Math.PI / 180; } } }, 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++; } } }, …