Flappy Bird - Laptop Version

{"name":"Flappy Bird Clone","description":"Dive into the world of Flappy Bird with your very own clone! Build your skills in programming while creating this addictive game. You'll learn to implement character controls, scoring systems, and collision detection, all while having loads of fun!","photo":null,"view_count":0,"fork_count":0,"expires_at":null,"created_at":"2024-12-02T14:08:39.609993Z","updated_at":"2024-12-02T14:08:39.609996Z","user_id":257,"status":"PRIVATE","parent_id":4819,"id":4820,"user":{"username":"mustafayamin","id":257,"password_hash":"$2b$12$OtTvu8fk3N/WedeVn5FKZ.VYt9V7.QBjXz6xq6Dp1nrVJzPjMWuTi","updated_at":"2024-12-02T09:12:18.311323Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":"mustafayamin5@gmail.com","recess_id":null,"created_at":"2024-12-02T09:12:18.311319Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"script.js":"const canvas = document.getElementById(\"gameCanvas\");\nconst ctx = canvas.getContext(\"2d\");\nconst scoreElement = document.getElementById(\"score\");\nconst countdownElement = document.getElementById(\"countdown\");\n\ncanvas.width = window.innerWidth; // Fullscreen for mobile\ncanvas.height = window.innerHeight;\n\n// Game variables\nlet bird = {\n x: 100,\n y: canvas.height / 2,\n size: 20,\n velocity: 0,\n gravity: 0.5,\n};\nconst pipes = [];\nconst pipeWidth = 50;\nconst gapHeight = 120;\nconst pipeSpeed = 2;\nlet score = 0;\nlet gameOver = false;\nlet gameStarted = false; // Tracks if the game has started\n\n// Event listeners for touch and keyboard\nwindow.addEventListener(\"keydown\", (e) => {\n if (e.code === \"Space\" && gameStarted && !gameOver) {\n bird.velocity = -8; // Jump upward\n }\n});\n\ncanvas.addEventListener(\"touchstart\", () => {\n if (gameStarted && !gameOver) {\n bird.velocity = -8; // Jump upward\n }\n});\n\n// Countdown timer logic\nlet countdown = 5;\nconst countdownInterval = setInterval(() => {\n countdown--;\n countdownElement.textContent = countdown > 0 ? countdown : \"Go!\";\n if (countdown === 0) {\n clearInterval(countdownInterval);\n countdownElement.style.display = \"none\";\n gameStarted = true; // Allow the game to start\n createPipe();\n setInterval(createPipe, 2000); // Generate pipes every 2 seconds\n gameLoop();\n }\n}, 1000);\n\n// Create a new pipe pair\nfunction createPipe() {\n const pipeTopHeight = Math.random() * (canvas.height - gapHeight - 100) + 50;\n pipes.push({\n x: canvas.width,\n top: pipeTopHeight,\n bottom: canvas.height - (pipeTopHeight + gapHeight),\n });\n}\n\n// Draw the bird\nfunction drawBird() {\n ctx.fillStyle = \"orange\";\n ctx.beginPath();\n ctx.arc(bird.x, bird.y, bird.size, 0, Math.PI * 2);\n ctx.fill();\n}\n\n// Draw the pipes\nfunction drawPipes() {\n ctx.fillStyle = \"green\";\n pipes.forEach((pipe) => {\n // Top pipe\n ctx.fillRect(pipe.x, 0, pipeWidth, pipe.top);\n // Bottom pipe\n ctx.fillRect(pipe.x, canvas.height - pipe.bottom, pipeWidth, pipe.bottom);\n });\n}\n\n// Update the bird's position\nfunction updateBird() {\n bird.velocity += bird.gravity;\n bird.y += bird.velocity;\n\n // Check for collisions with the ground or top\n if (bird.y + bird.size > canvas.height || bird.y - bird.size < 0) {\n endGame();\n }\n}\n\n// Update pipes' positions and handle scoring\nfunction updatePipes() {\n pipes.forEach((pipe, index) => {\n pipe.x -= pipeSpeed;\n\n // Check for collision with the bird\n if (\n bird.x + bird.size > pipe.x &&\n bird.x - bird.size < pipe.x + pipeWidth &&\n (bird.y - bird.size < pipe.top ||\n bird.y + bird.size > canvas.height - pipe.bottom)\n ) {\n endGame();\n }\n\n // Remove off-screen pipes and update score\n if (pipe.x + pipeWidth < 0) {\n pipes.splice(index, 1);\n score++;\n scoreElement.textContent = `Score: ${score}`;\n }\n });\n}\n\n// End the game\nfunction endGame() {\n gameOver = true;\n alert(\"Game Over! Your Score: \" + score);\n document.location.reload();\n}\n\n// Main game loop\nfunction gameLoop() {\n if (gameOver || !gameStarted) return;\n\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n drawBird();\n drawPipes();\n\n updateBird();\n updatePipes();\n\n requestAnimationFrame(gameLoop);\n}\n","style.css":"body {\r\n margin: 0;\r\n padding: 0;\r\n overflow: hidden;\r\n font-family: Arial, sans-serif;\r\n}\r\n\r\ncanvas {\r\n width: 100svw;\r\n height: 100svh;\r\n display: block;\r\n background: linear-gradient(to bottom, rgb(36, 168, 221), #fff);\r\n}\r\n\r\n#score,\r\n#countdown {\r\n position: absolute;\r\n top: 10px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n color: #333;\r\n font-size: 24px;\r\n font-weight: bold;\r\n background: rgba(255, 255, 255, 0.7);\r\n padding: 5px 10px;\r\n border-radius: 5px;\r\n}\r\n\r\n#countdown {\r\n top: 50%;\r\n transform: translate(-50%, -50%);\r\n font-size: 48px;\r\n}","index.html":"\n\n \n \n \n Flappy Bird - Laptop Version\n \n \n\n \n

Score: 0

\n \n \n\n"},"chat_history":[],"assets":[{"project_id":4820,"created_at":"2024-12-02T14:08:39.615213Z","resource_type":"image","id":50538,"cloudinary_id":"gwqmp7fd919wx1igpvsv","name":"tank3","deleted":false}],"messages_sent":0,"comments":[],"steps":[]}