Flappy Bird - Devs3.Pro

1a:I[4594,["1849","static/chunks/1849-0fc2bd73d6f2e163.js","6329","static/chunks/6329-deb7a466c19beaad.js","5687","static/chunks/5687-c1621349502ac098.js","7194","static/chunks/7194-92efb78e82eec78e.js","6384","static/chunks/app/t/%5Btag%5D/page-90992b381821f968.js"],"BrandMark"] 1b:I[1566,["1849","static/chunks/1849-0fc2bd73d6f2e163.js","6329","static/chunks/6329-deb7a466c19beaad.js","5687","static/chunks/5687-c1621349502ac098.js","7194","static/chunks/7194-92efb78e82eec78e.js","6384","static/chunks/app/t/%5Btag%5D/page-90992b381821f968.js"],"ThemeToggle"] 1c:I[9718,["1849","static/chunks/1849-0fc2bd73d6f2e163.js","6329","static/chunks/6329-deb7a466c19beaad.js","5687","static/chunks/5687-c1621349502ac098.js","7194","static/chunks/7194-92efb78e82eec78e.js","6384","static/chunks/app/t/%5Btag%5D/page-90992b381821f968.js"],"AccountMenu"] 1d:I[4113,["1849","static/chunks/1849-0fc2bd73d6f2e163.js","6329","static/chunks/6329-deb7a466c19beaad.js","5687","static/chunks/5687-c1621349502ac098.js","7194","static/chunks/7194-92efb78e82eec78e.js","6384","static/chunks/app/t/%5Btag%5D/page-90992b381821f968.js"],"LeftNavigation"] 1e:I[5608,["1849","static/chunks/1849-0fc2bd73d6f2e163.js","6329","static/chunks/6329-deb7a466c19beaad.js","5687","static/chunks/5687-c1621349502ac098.js","7194","static/chunks/7194-92efb78e82eec78e.js","6384","static/chunks/app/t/%5Btag%5D/page-90992b381821f968.js"],"ResponsiveBannerAd"] 1f:I[8424,["1849","static/chunks/1849-0fc2bd73d6f2e163.js","6329","static/chunks/6329-deb7a466c19beaad.js","5687","static/chunks/5687-c1621349502ac098.js","7194","static/chunks/7194-92efb78e82eec78e.js","6384","static/chunks/app/t/%5Btag%5D/page-90992b381821f968.js"],"TopicFollowButton"] 20:I[1577,["1849","static/chunks/1849-0fc2bd73d6f2e163.js","6329","static/chunks/6329-deb7a466c19beaad.js","5687","static/chunks/5687-c1621349502ac098.js","7194","static/chunks/7194-92efb78e82eec78e.js","6384","static/chunks/app/t/%5Btag%5D/page-90992b381821f968.js"],"FeedView"] 21:T6e9,body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f7f7f7; font-family: 'Arial', sans-serif; } .game-container { position: relative; width: 320px; height: 480px; overflow: hidden; border: 2px solid #333; border-radius: 5px; background: linear-gradient(to bottom, #6ab7f5, #36d1dc); } /* Bird Styling and Animation */ .bird { position: absolute; width: 40px; height: 30px; background-color: #ffeb3b; /* Yellow */ border-radius: 50% 50% 40% 40%; top: 50%; left: 50px; z-index: 10; /* Simple "flap" animation */ animation: flap 0.3s infinite alternate; } @keyframes flap { from { transform: translateY(0px) rotate(-5deg); } to { transform: translateY(-3px) rotate(5deg); } } /* Pipe Styling */ .pipe { position: absolute; width: 60px; background-color: #4CAF50; /* Green */ border: 2px solid #388E3C; border-radius: 3px; } .pipe-top { top: 0; /* The height is set dynamically by JavaScript */ } .pipe-bottom { bottom: 0; /* The height is set dynamically by JavaScript */ } /* Score and UI Styling */ .score-container { position: absolute; top: 10px; left: 10px; color: white; font-size: 1.2em; font-weight: bold; z-index: 20; text-shadow: 1px 1px 2px black; } .message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.7); color: white; padding: 20px; border-radius: 10px; text-align: center; z-index: 100; font-size: 1.5em; }22:T1394,// Game Variables const bird = document.getElementById('bird'); const pipesContainer = document.getElementById('pipes'); const scoreDisplay = document.getElementById('score'); const highScoreDisplay = document.getElementById('high-score'); const message = document.getElementById('message'); let birdTop = 200; // Initial bird position let gravity = 0.8; let velocity = 0; let gameInterval; let pipeInterval; let score = 0; let highScore = localStorage.getItem('flappyHighScore') || 0; let isGameOver = true; highScoreDisplay.textContent = highScore; // Apply initial bird position bird.style.top = birdTop + 'px'; // Event Listeners document.addEventListener('click', jump); document.addEventListener('keydown', (e) => { if (e.code === 'Space') { jump(); } }); // Jump Function function jump() { if (isGameOver) { startGame(); } else { velocity = -12; // Negative velocity makes the bird go up } } // Start the Game function startGame() { if (!isGameOver) return; // Prevent multiple starts isGameOver = false; score = 0; scoreDisplay.textContent = score; birdTop = 200; velocity = 0; pipesContainer.innerHTML = ''; // Clear old pipes message.style.display = 'none'; // Clear any existing intervals clearInterval(gameInterval); clearInterval(pipeInterval); // Start the main game loop and pipe generation gameInterval = setInterval(updateGame, 20); pipeInterval = setInterval(createPipe, 1500); // Create a new pipe every 1.5 seconds } // Main Game Loop function updateGame() { // Apply gravity velocity += gravity; birdTop += velocity; bird.style.top = birdTop + 'px'; // Rotate bird based on velocity bird.style.transform = `rotate(${velocity * 2}deg)`; // Check for collisions with top and bottom if (birdTop >= 450 || birdTop <= 0) { endGame(); } // Check for collisions with pipes checkCollision(); } // Create a new pair of pipes function createPipe() { if (isGameOver) return; const pipeGap = 150; // Gap between top and bottom pipe const minPipeHeight = 50; const maxPipeHeight = 320; // Random height for the top pipe const pipeTopHeight = Math.floor(Math.random() * (maxPipeHeight - minPipeHeight)) + minPipeHeight; // Create DOM elements for the pipes const pipeTop = document.createElement('div'); const pipeBottom = document.createElement('div'); pipeTop.className = 'pipe pipe-top'; pipeBottom.className = 'pipe pipe-bottom'; // Set the heights and positions pipeTop.style.height = pipeTopHeight + 'px'; pipeBottom.style.height = (480 - pipeTopHeight - pipeGap) + 'px'; pipesContainer.appendChild(pipeTop); pipesContainer.appendChild(pipeBottom); // Animate the pipes (move from right to left) let pipePosition = 320; const pipeSpeed = 2; const movePipes = setInterval(() => { if (isGameOver) { clearInterval(movePipes); return; } pipePosition -= pipeSpeed; pipeTop.style.left = pipePosition + 'px'; pipeBottom.style.left = pipePosition + 'px'; // Remove pipes when they go off-screen if (pipePosition < -60) { clearInterval(movePipes); pipesContainer.removeChild(pipeTop); pipesContainer.removeChild(pipeBottom); } // Score a point when the bird passes a pair of pipes if (pipePosition === 50) { // Adjusted to when the pipes pass the bird's x-position updateScore(); } }, 20); } // Check for collision between the bird and pipes function checkCollision() { const birdRect = bird.getBoundingClientRect(); const pipes = document.getElementsByClassName('pipe'); for (let pipe of pipes) { const pipeRect = pipe.getBoundingClientRect(); // Simple AABB (Axis-Aligned Bounding Box) collision detection if (birdRect.right > pipeRect.left && birdRect.left < pipeRect.right && birdRect.bottom > pipeRect.top && birdRect.top < pipeRect.bottom) { endGame(); break; } } } // Update the score function updateScore() { if (isGameOver) return; score++; scoreDisplay.textContent = score; // Update high score in real-time if (score > highScore) { highScore = score; highScoreDisplay.textContent = highScore; } } // End the Game function endGame() { isGameOver = true; clearInterval(gameInterval); clearInterval(pipeInterval); // Save high score to localStorage localStorage.setItem('flappyHighScore', highScore); // Show game over message message.textContent = 'Game Over! Click to Restart'; message.style.display = 'block'; }23:T35ad,{"content":[{"content":[{"marks":[{"type":"bold"}],"text":"Introduction","type":"text"}],"type":"paragraph"},{"content":[{"text":"Flappy Bird, the notoriously simple yet addictive game, is a perfect project for aspiring web developers. It encapsulates core game development concepts like animation, collision detection, and user input in a clean, manageable package.","type":"text"}],"type":"paragraph"},{"content":[{"text":"In this step-by-step tutorial, we will build our own version of Flappy Bird from the ground up using pure HTML, CSS, and vanilla JavaScript. By the end, you'll have a fully functional game and a solid understanding of the logic that brings such games to life.","type":"text"}],"type":"paragraph"},{"content":[{"marks":[{"type":"bold"}],"text":"Project Overview","type":"text"}],"type":"paragraph"},{"content":[{"text":"We will break down the project into three main parts:","type":"text"}],"type":"paragraph"},{"content":[{"content":[{"content":[{"marks":[{"type":"bold"}],"text":"HTML Structure:","type":"text"},{"text":" The skeleton of our game, containing the game container and UI elements.","type":"text"}],"type":"paragraph"}],"type":"listItem"},{"content":[{"content":[{"marks":[{"type":"bold"}],"text":"CSS Styling:","type":"text"},{"text":" Making the game visually appealing with backgrounds, bird animation, and pipe graphics.","type":"text"}],"type":"paragraph"}],"type":"listItem"},{"content":[{"content":[{"marks":[{"type":"bold"}],"text":"JavaScript Logic:","type":"text"},{"text":" The brain of the game, handling physics, user controls, collision detection, and score tracking.","type":"text"}],"type":"paragraph"}],"type":"listItem"}],"type":"bulletList"},{"content":[{"text":"Let's start coding!","type":"text"}],"type":"paragraph"},{"attrs":{"level":3},"content":[{"marks":[{"type":"bold"}],"text":"Step 1: Setting up the HTML Structure","type":"text"}],"type":"heading"},{"content":[{"text":"The HTML is straightforward. We need a container for the game, a bird element, and elements for the moving pipes and the score display.","type":"text"}],"type":"paragraph"},{"attrs":{"language":"html"},"content":[{"text":"\r\n\r\n\r\n \r\n \r\n Flappy Bird - Devs3.Pro\r\n \r\n\r\n\r\n

\r\n

Score: 0

\r\n

High Score: 0

\r\n

Click to Start

\r\n

\r\n \r\n\r\n","type":"text"}],"type":"codeBlock"},{"attrs":{"level":3},"content":[{"marks":[{"type":"bold"}],"text":"Step 2: Styling with CSS","type":"text"}],"type":"heading"},{"content":[{"text":"This CSS will create our game's visual theme. We'll style the background, the bird with a simple flapping animation, the pipes, and the scoreboard.","type":"text"}],"type":"paragraph"},{"attrs":{"language":"css"},"content":[{"text":"body {\r\n margin: 0;\r\n padding: 0;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100vh;\r\n background-color: #f7f7f7;\r\n font-family: 'Arial', sans-serif;\r\n}\r\n\r\n.game-container {\r\n position: relative;\r\n width: 320px;\r\n height: 480px;\r\n overflow: hidden;\r\n border: 2px solid #333;\r\n border-radius: 5px;\r\n background: linear-gradient(to bottom, #6ab7f5, #36d1dc);\r\n}\r\n\r\n/* Bird Styling and Animation */\r\n.bird {\r\n position: absolute;\r\n width: 40px;\r\n height: 30px;\r\n background-color: #ffeb3b; /* Yellow */\r\n border-radius: 50% 50% 40% 40%;\r\n top: 50%;\r\n left: 50px;\r\n z-index: 10;\r\n /* Simple \"flap\" animation */\r\n animation: flap 0.3s infinite alternate;\r\n}\r\n\r\n@keyframes flap {\r\n from { transform: translateY(0px) rotate(-5deg); }\r\n to { transform: translateY(-3px) rotate(5deg); }\r\n}\r\n\r\n/* Pipe Styling */\r\n.pipe {\r\n position: absolute;\r\n width: 60px;\r\n background-color: #4CAF50; /* Green */\r\n border: 2px solid #388E3C;\r\n border-radius: 3px;\r\n}\r\n\r\n.pipe-top {\r\n top: 0;\r\n /* The height is set dynamically by JavaScript */\r\n}\r\n\r\n.pipe-bottom {\r\n bottom: 0;\r\n /* The height is set dynamically by JavaScript */\r\n}\r\n\r\n/* Score and UI Styling */\r\n.score-container {\r\n position: absolute;\r\n top: 10px;\r\n left: 10px;\r\n color: white;\r\n font-size: 1.2em;\r\n font-weight: bold;\r\n z-index: 20;\r\n text-shadow: 1px 1px 2px black;\r\n}\r\n\r\n.message {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n background-color: rgba(0, 0, 0, 0.7);\r\n color: white;\r\n padding: 20px;\r\n border-radius: 10px;\r\n text-align: center;\r\n z-index: 100;\r\n font-size: 1.5em;\r\n}","type":"text"}],"type":"codeBlock"},{"attrs":{"level":3},"content":[{"marks":[{"type":"bold"}],"text":"Step 3: The JavaScript Game Logic","type":"text"}],"type":"heading"},{"content":[{"text":"This is where the magic happens. We'll handle the game state, gravity, pipe generation, and collisions.","type":"text"}],"type":"paragraph"},{"attrs":{"language":"javascript"},"content":[{"text":"// Game Variables\r\nconst bird = document.getElementById('bird');\r\nconst pipesContainer = document.getElementById('pipes');\r\nconst scoreDisplay = document.getElementById('score');\r\nconst highScoreDisplay = document.getElementById('high-score');\r\nconst message = document.getElementById('message');\r\n\r\nlet birdTop = 200; // Initial bird position\r\nlet gravity = 0.8;\r\nlet velocity = 0;\r\nlet gameInterval;\r\nlet pipeInterval;\r\nlet score = 0;\r\nlet highScore = localStorage.getItem('flappyHighScore') || 0;\r\nlet isGameOver = true;\r\n\r\nhighScoreDisplay.textContent = highScore;\r\n\r\n// Apply initial bird position\r\nbird.style.top = birdTop + 'px';\r\n\r\n// Event Listeners\r\ndocument.addEventListener('click', jump);\r\ndocument.addEventListener('keydown', (e) => {\r\n if (e.code === 'Space') {\r\n jump();\r\n }\r\n});\r\n\r\n// Jump Function\r\nfunction jump() {\r\n if (isGameOver) {\r\n startGame();\r\n } else {\r\n velocity = -12; // Negative velocity makes the bird go up\r\n }\r\n}\r\n\r\n// Start the Game\r\nfunction startGame() {\r\n if (!isGameOver) return; // Prevent multiple starts\r\n\r\n isGameOver = false;\r\n score = 0;\r\n scoreDisplay.textContent = score;\r\n birdTop = 200;\r\n velocity = 0;\r\n pipesContainer.innerHTML = ''; // Clear old pipes\r\n message.style.display = 'none';\r\n\r\n // Clear any existing intervals\r\n clearInterval(gameInterval);\r\n clearInterval(pipeInterval);\r\n\r\n // Start the main game loop and pipe generation\r\n gameInterval = setInterval(updateGame, 20);\r\n pipeInterval = setInterval(createPipe, 1500); // Create a new pipe every 1.5 seconds\r\n}\r\n\r\n// Main Game Loop\r\nfunction updateGame() {\r\n // Apply gravity\r\n velocity += gravity;\r\n birdTop += velocity;\r\n bird.style.top = birdTop + 'px';\r\n\r\n // Rotate bird based on velocity\r\n bird.style.transform = `rotate(${velocity * 2}deg)`;\r\n\r\n // Check for collisions with top and bottom\r\n if (birdTop >= 450 || birdTop <= 0) {\r\n endGame();\r\n }\r\n\r\n // Check for collisions with pipes\r\n checkCollision();\r\n}\r\n\r\n// Create a new pair of pipes\r\nfunction createPipe() {\r\n if (isGameOver) return;\r\n\r\n const pipeGap = 150; // Gap between top and bottom pipe\r\n const minPipeHeight = 50;\r\n const maxPipeHeight = 320;\r\n\r\n // Random height for the top pipe\r\n const pipeTopHeight = Math.floor(Math.random() * (maxPipeHeight - minPipeHeight)) + minPipeHeight;\r\n\r\n // Create DOM elements for the pipes\r\n const pipeTop = document.createElement('div');\r\n const pipeBottom = document.createElement('div');\r\n\r\n pipeTop.className = 'pipe pipe-top';\r\n pipeBottom.className = 'pipe pipe-bottom';\r\n\r\n // Set the heights and positions\r\n pipeTop.style.height = pipeTopHeight + 'px';\r\n pipeBottom.style.height = (480 - pipeTopHeight - pipeGap) + 'px';\r\n\r\n pipesContainer.appendChild(pipeTop);\r\n pipesContainer.appendChild(pipeBottom);\r\n\r\n // Animate the pipes (move from right to left)\r\n let pipePosition = 320;\r\n const pipeSpeed = 2;\r\n\r\n const movePipes = setInterval(() => {\r\n if (isGameOver) {\r\n clearInterval(movePipes);\r\n return;\r\n }\r\n\r\n pipePosition -= pipeSpeed;\r\n pipeTop.style.left = pipePosition + 'px';\r\n pipeBottom.style.left = pipePosition + 'px';\r\n\r\n // Remove pipes when they go off-screen\r\n if (pipePosition < -60) {\r\n clearInterval(movePipes);\r\n pipesContainer.removeChild(pipeTop);\r\n pipesContainer.removeChild(pipeBottom);\r\n }\r\n\r\n // Score a point when the bird passes a pair of pipes\r\n if (pipePosition === 50) { // Adjusted to when the pipes pass the bird's x-position\r\n updateScore();\r\n }\r\n\r\n }, 20);\r\n}\r\n\r\n// Check for collision between the bird and pipes\r\nfunction checkCollision() {\r\n const birdRect = bird.getBoundingClientRect();\r\n const pipes = document.getElementsByClassName('pipe');\r\n\r\n for (let pipe of pipes) {\r\n const pipeRect = pipe.getBoundingClientRect();\r\n\r\n // Simple AABB (Axis-Aligned Bounding Box) collision detection\r\n if (birdRect.right > pipeRect.left &&\r\n birdRect.left < pipeRect.right &&\r\n birdRect.bottom > pipeRect.top &&\r\n birdRect.top < pipeRect.bottom) {\r\n endGame();\r\n break;\r\n }\r\n }\r\n}\r\n\r\n// Update the score\r\nfunction updateScore() {\r\n if (isGameOver) return;\r\n score++;\r\n scoreDisplay.textContent = score;\r\n\r\n // Update high score in real-time\r\n if (score > highScore) {\r\n highScore = score;\r\n highScoreDisplay.textContent = highScore;\r\n }\r\n}\r\n\r\n// End the Game\r\nfunction endGame() {\r\n isGameOver = true;\r\n clearInterval(gameInterval);\r\n clearInterval(pipeInterval);\r\n\r\n // Save high score to localStorage\r\n localStorage.setItem('flappyHighScore', highScore);\r\n\r\n // Show game over message\r\n message.textContent = 'Game Over! Click to Restart';\r\n message.style.display = 'block';\r\n}","type":"text"}],"type":"codeBlock"},{"attrs":{"level":3},"content":[{"marks":[{"type":"bold"}],"text":"Conclusion and Next Steps","type":"text"}],"type":"heading"},{"content":[{"text":"Congratulations! You've just built a fully functional Flappy Bird game. Let's recap what we accomplished:","type":"text"}],"type":"paragraph"},{"content":[{"content":[{"content":[{"marks":[{"type":"bold"}],"text":"Game Physics:","type":"text"},{"text":" Implemented gravity and jump mechanics.","type":"text"}],"type":"paragraph"}],"type":"listItem"},{"content":[{"content":[{"marks":[{"type":"bold"}],"text":"Procedural Generation:","type":"text"},{"text":" Created pipes with random heights at regular intervals.","type":"text"}],"type":"paragraph"}],"type":"listItem"},{"content":[{"content":[{"marks":[{"type":"bold"}],"text":"Collision Detection:","type":"text"},{"text":" Used bounding box logic to detect when the bird hits a pipe or the ground.","type":"text"}],"type":"paragraph"}],"type":"listItem"},{"content":[{"content":[{"marks":[{"type":"bold"}],"text":"State Management:","type":"text"},{"text":" Handled the game's start, running, and end states smoothly.","type":"text"}],"type":"paragraph"}],"type":"listItem"}],"type":"bulletList"},{"content":[{"marks":[{"type":"bold"}],"text":"Ideas for Enhancement:","type":"text"}],"type":"paragraph"},{"content":[{"content":[{"content":[{"marks":[{"type":"bold"}],"text":"Add Sound Effects:","type":"text"},{"text":" Include a jump sound, score sound, and a crash sound.","type":"text"}],"type":"paragraph"}],"type":"listItem"},{"content":[{"content":[{"marks":[{"type":"bold"}],"text":"Improve Graphics:","type":"text"},{"text":" Replace the colored ","type":"text"},{"marks":[{"type":"code"}],"text":"div","type":"text"},{"text":" elements with sprite images for the bird and pipes.","type":"text"}],"type":"paragraph"}],"type":"listItem"},{"content":[{"content":[{"marks":[{"type":"bold"}],"text":"Difficulty Progression:","type":"text"},{"text":" Gradually increase the game speed or decrease the gap between pipes as the score gets higher.","type":"text"}],"type":"paragraph"}],"type":"listItem"},{"content":[{"content":[{"marks":[{"type":"bold"}],"text":"Mobile Optimization:","type":"text"},{"text":" Fine-tune the touch controls for a better mobile experience.","type":"text"}],"type":"paragraph"}],"type":"listItem"}],"type":"bulletList"},{"content":[{"text":"The full source code is available in the code blocks above. Feel free to experiment, break it, and fix it. This is how you truly master game development with JavaScript.","type":"text"}],"type":"paragraph"},{"content":[{"text":"Happy Coding!","type":"text"}],"type":"paragraph"}],"type":"doc"}13:[["$","a",null,{"href":"#main-content","className":"bg-brand fixed top-3 left-3 z-[100] -translate-y-20 rounded-lg px-4 py-2 font-semibold text-white transition focus:translate-y-0 dark:text-slate-950","children":"Skip to content"}],["$","header",null,{"className":"border-border bg-canvas/92 sticky top-0 z-40 border-b backdrop-blur-xl","children":["$","div",null,{"className":"mx-auto flex h-16 max-w-[1440px] items-center gap-3 px-4 sm:px-6","children":[["$","$L1a",null,{}],["$","form",null,{"role":"search","action":"/search","className":"relative ml-3 hidden max-w-xl flex-1 md:block","children":[["$","label",null,{"htmlFor":"global-search","className":"sr-only","children":"Search articles, tags and people"}],["$","svg",null,{"aria-hidden":"true","viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"1.8","strokeLinecap":"round","strokeLinejoin":"round","className":"text-ink-muted pointer-events-none absolute top-1/2 left-3 size-5 -translate-y-1/2","children":[["$","circle",null,{"cx":"11","cy":"11","r":"7"}],["$","path",null,{"d":"m20 20-4-4"}]]}],["$","input",null,{"id":"global-search","name":"q","type":"search","placeholder":"Search articles, tags and people","className":"border-border bg-surface placeholder:text-ink-muted/75 h-11 w-full rounded-xl border pr-4 pl-10 text-sm"}]]}],["$","div",null,{"className":"ml-auto flex items-center gap-2","children":[["$","$Ld",null,{"href":"/search","aria-label":"Search","className":"hover:bg-brand-soft grid size-11 place-items-center rounded-xl md:hidden","children":["$","svg",null,{"aria-hidden":"true","viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"1.8","strokeLinecap":"round","strokeLinejoin":"round","className":"size-5","children":"$13:1:props:children:props:children:1:props:children:1:props:children"}]}],["$","$L1b",null,{}],["$","div",null,{"className":"hidden sm:block","children":["$","$Ld",null,{"href":"/dashboard/posts/new","className":"bg-brand hover:bg-brand-strong inline-flex min-h-11 items-center justify-center gap-2 rounded-xl px-4 py-2 text-sm font-semibold text-white transition dark:text-slate-950","children":[["$","svg",null,{"aria-hidden":"true","viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"1.8","strokeLinecap":"round","strokeLinejoin":"round","className":"size-4","children":[["$","path",null,{"d":"m4 20 4.5-1 10-10-3.5-3.5-10 10L4 20Z"}],["$","path",null,{"d":"m13.5 7 3.5 3.5"}]]}],"Write"]}]}],["$","$L1c",null,{}]]}]]}]}],["$","div",null,{"className":"mx-auto grid max-w-[1460px] grid-cols-1 gap-6 px-4 pt-6 pb-24 sm:px-6 lg:grid-cols-[220px_minmax(0,760px)] lg:pb-10 xl:grid-cols-[220px_minmax(0,760px)_300px]","children":[["$","$L1d",null,{}],["$","main",null,{"id":"main-content","tabIndex":-1,"className":"min-w-0","children":[["$","$L1e",null,{}],[["$","section",null,{"className":"border-border bg-surface rounded-2xl border shadow-[0_1px_2px_rgb(15_23_42/0.03)] mb-6 p-6 sm:p-8","children":["$","div",null,{"className":"flex flex-col gap-5 sm:flex-row sm:items-center","children":[["$","div",null,{"className":"bg-brand-soft text-brand relative grid size-20 shrink-0 place-items-center overflow-hidden rounded-2xl text-3xl font-bold","children":["$","span",null,{"aria-hidden":"true","children":"#"}]}],["$","div",null,{"className":"min-w-0 flex-1","children":[["$","p",null,{"className":"text-brand text-sm font-semibold","children":"Topic"}],["$","h1",null,{"className":"mt-1 text-3xl font-bold tracking-tight break-words","children":["#","html-game"]}],["$","p",null,{"className":"text-ink-muted mt-2 max-w-3xl leading-7","children":"Articles tagged html-game."}],["$","p",null,{"className":"text-ink-muted mt-3 text-sm","children":["1"," ","article"]}]]}],["$","$L1f",null,{"topicId":636,"topicName":"html-game","initialFollowing":false,"initialFollowerCount":0,"authenticated":false,"returnTo":"/t/html-game"}]]}]}],["$","$L20",null,{"data":{"count":1,"next":null,"previous":null,"results":[{"id":220,"slug":"build-flappy-bird-from-scratch-with-html-css-and-javascript","title":"Build Flappy Bird from Scratch with HTML, CSS, and JavaScript","excerpt":"Introduction Flappy Bird, the notoriously simple yet addictive game, is a perfect project for aspiring web developers. It encapsulates core game development concepts like animation","content":[{"type":"richText","document":{"content":[{"content":[{"marks":[{"type":"bold"}],"text":"Introduction","type":"text"}],"type":"paragraph"},{"content":[{"text":"Flappy Bird, the notoriously simple yet addictive game, is a perfect project for aspiring web developers. It encapsulates core game development concepts like animation, collision detection, and user input in a clean, manageable package.","type":"text"}],"type":"paragraph"},{"content":[{"text":"In this step-by-step tutorial, we will build our own version of Flappy Bird from the ground up using pure HTML, CSS, and vanilla JavaScript. By the end, you'll have a fully functional game and a solid understanding of the logic that brings such games to life.","type":"text"}],"type":"paragraph"},{"content":[{"marks":[{"type":"bold"}],"text":"Project Overview","type":"text"}],"type":"paragraph"},{"content":[{"text":"We will break down the project into three main parts:","type":"text"}],"type":"paragraph"},{"content":[{"content":[{"content":[{"marks":[{"type":"bold"}],"text":"HTML Structure:","type":"text"},{"text":" The skeleton of our game, containing the game container and UI elements.","type":"text"}],"type":"paragraph"}],"type":"listItem"},{"content":[{"content":[{"marks":[{"type":"bold"}],"text":"CSS Styling:","type":"text"},{"text":" Making the game visually appealing with backgrounds, bird animation, and pipe graphics.","type":"text"}],"type":"paragraph"}],"type":"listItem"},{"content":[{"content":[{"marks":[{"type":"bold"}],"text":"JavaScript Logic:","type":"text"},{"text":" The brain of the game, handling physics, user controls, collision detection, and score tracking.","type":"text"}],"type":"paragraph"}],"type":"listItem"}],"type":"bulletList"},{"content":[{"text":"Let's start coding!","type":"text"}],"type":"paragraph"},{"attrs":{"level":3},"content":[{"marks":[{"type":"bold"}],"text":"Step 1: Setting up the HTML Structure","type":"text"}],"type":"heading"},{"content":[{"text":"The HTML is straightforward. We need a container for the game, a bird element, and elements for the moving pipes and the score display.","type":"text"}],"type":"paragraph"},{"attrs":{"language":"html"},"content":[{"text":"\r\n\r\n\r\n \r\n \r\n Flappy Bird - Devs3.Pro\r\n \r\n\r\n\r\n

\r\n

Score: 0

\r\n

High Score: 0

\r\n

Click to Start

\r\n

#html-game

Articles

Build Flappy Bird from Scratch with HTML, CSS, and JavaScript