window.onload = () => { // Bird | Plane... const plane = new Image(); plane.src = "https://www.dropbox.com/s/eozghbxep40tv3e/plane.png?dl=1"; class Bird { constructor() { this.x = 150; this.y = 200; this.vy = 0; this.originalWidth = 430; this.originalHeight = 276; this.width = this.originalWidth / 10; this.height = this.originalHeight / 10; this.weight = 1; } update() { let curve = Math.sin(angle) * 20; if (this.y > canvas.height - this.height * 3 + curve) { this.y = canvas.height - this.height * 3 + curve; this.vy = 0; } else { this.vy += this.weight; this.vy *= 0.9; this.y += this.vy; } if (this.y < 0 + this.height) { this.y = 0 + this.height; this.vy = 0; } if (spacePressed && this.y > this.height * 3) this.flap(); } draw() { ctx.fillStyle = "blue"; // ctx.fillRect(this.x, this.y, this.width, this.height) ctx.drawImage( plane, 0, 0, this.originalWidth, this.originalHeight, this.x - 20, this.y - 20, this.width * 1.6, this.height * 1.6 ); } flap() { this.vy -= 2; } } const bird = new Bird(); // Particles | Smoke... const particlesArray = []; class Particle { constructor() { this.x = bird.x - 27; this.y = bird.y + 10; this.size = Math.random() * 7 + 3; this.speedY = Math.random() * 1 - 0.5; this.color = `hsla(${hue}, 100%, 50%, 0.8)`; } update() { this.x -= gameSpeed; this.y += this.speedY; } draw() { ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); } } function handleParticles() { particlesArray.unshift(new Particle()); for (let i = 0; i < particlesArray.length; i++) { particlesArray[i].update(); particlesArray[i].draw(); } if (particlesArray.length > 200) { for (let i = 0; i < 20; i++) { particlesArray.pop(particlesArray[i]); } } } // Obstacle | Pipes const obstaclesArray = []; class Obstacle { constructor() { this.top = (Math.random() * canvas.height) / 3 + 20; this.bottom = (Math.random() * canvas.height) / 3 + 20; this.x = canvas.width; this.width = 20; this.color = `hsla(${hue}, 100%, 50%, 0.8)`; this.counted = false; } draw() { ctx.fillStyle = this.color; ctx.fillRect(this.x, 0, this.width, this.top); ctx.fillRect( this.x, canvas.height - this.bottom, this.width, this.bottom ); } update() { this.x -= gameSpeed; if (!this.counted && this.x < bird.x) { score++; this.counted = true; } this.draw(); } } function handleObstacles() { if (frame % 50 === 0) { obstaclesArray.unshift(new Obstacle()); } for (let i = 0; i < obstaclesArray.length; i++) { obstaclesArray[i].update(); } if (obstaclesArray.length > 20) { obstaclesArray.pop(obstaclesArray[0]); } } // Main... const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); canvas.width = 500; canvas.height = 400; let spacePressed = false, angle = 0, hue = 0, frame = 0, score = 0, gameSpeed = 2, gameOver = false; const background = new Image(); background.src = "https://www.dropbox.com/s/gsipt6tavffhg8i/BG.png?dl=1"; const BG = { x1: 0, x2: canvas.width, y: 0, width: canvas.width, height: canvas.height, }; function handleBackground() { if (BG.x1 <= -BG.width + gameSpeed) BG.x1 = BG.width; else BG.x1 -= gameSpeed; if (BG.x2 <= -BG.width + gameSpeed) BG.x2 = BG.width; else BG.x2 -= gameSpeed; ctx.drawImage(background, BG.x1, BG.y, BG.width, BG.height); ctx.drawImage(background, BG.x2, BG.y, BG.width, BG.height); } function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); handleBackground(); handleParticles(); handleObstacles(); bird.update(); bird.draw(); ctx.fillStyle = "red"; ctx.font = "90px Georgia"; ctx.strokeText(score, 350, 70); ctx.fillText(score, 350, 70); if (handleCollisions()) return; requestAnimationFrame(animate); angle += 0.12; hue++; frame++; } setTimeout(() => { animate(); }, 2000); let clickTimer = null; function doubleTab() { if (clickTimer == null) { clickTimer = setTimeout(function () { clickTimer = null; }, 300); } else { clearTimeout(clickTimer); clickTimer = null; if (gameOver) window.location.reload(); } } window.addEventListener("touchstart", doubleTab); window.addEventListener("touchstart", function (e) { spacePressed = true; }); window.addEventListener("touchend", function (e) { spacePressed = false; }); const bang = new Image(); bang.src = "https://www.dropbox.com/s/lmbthfzs45elrh0/bang.png?dl=1"; function handleCollisions() { for (let i = 0; i < obstaclesArray.length; i++) { if ( bird.x < obstaclesArray[i].x + obstaclesArray[i].width && bird.x + bird.width > obstaclesArray[i].x && ((bird.y < 0 + obstaclesArray[i].top && bird.y + bird.height > 0) || (bird.y > canvas.height - obstaclesArray[i].bottom && bird.y + bird.height < canvas.height)) ) { ctx.drawImage(bang, bird.x + 8, bird.y - 12, 50, 50); ctx.font = "25px Georgia"; ctx.fillStyle = "white"; ctx.fillText( "Game Over, Your Score is: " + score, 100, canvas.height / 2 + 20 ); ctx.fillText("Double Tab To Restart", 130, canvas.height / 2 + 50); gameOver = true; return true; } } } };

🛩️ Flappy Plane Game 🚀🎮