An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
Some of Our Sources
- BoingBoing
- Spoon Graphics
- Six Revisions
- TutsPlus - Design
- Noupe
- CSS Globe
- Design Modo
- Android Headlines
- Dev To
- TechPowerUp
Help Webnuz
Referal links:
Flappy Bird Game Using HTML & JavaScript
Welcome to the CodeWithRandom blog. In this blog, we learn how to create a simple Flappy Bird Game. We use HTML, Css, And JavaScript for this Flappy Bird Game Source Code.
I hope you enjoy our blog so lets start with a basic HTML structure for the Flappy Bird Game Code.
HTML Code Flappy Bird Code
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Flappy Bird Game</title> </head> <body> <h3>flappyBird Game</h3> <div class="random"> <canvas id="canvas" width="288" height="512"></canvas> </div> <script src="flappyBird.js"></script> </body></html>There is all the HTML code & Css code for the Flappy Bird Game Code. Now you can see output without Css and JavaScript. This is only the HTML coding output for Flappy Bird Game Code. Then we write Css And JavaScript for Flappy Bird Game Code.
Output Flappy Bird Game Code
CSS code Flappy Bird Game Code
.random { height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center;}h3 { text-align: center; font-size: 2rem;}Css Updated Output Flappy Bird Game Code
Javascript Code Flappy Bird Game Code
"use strict";var cvs = document.getElementById("canvas");var ctx = cvs.getContext("2d");// load imagesvar bird = new Image();var bg = new Image();var fg = new Image();var pipeNorth = new Image();var pipeSouth = new Image();bird.src = "images/bird.png";bg.src = "images/bg.png";fg.src = "images/fg.png";pipeNorth.src = "images/pipeNorth.png";pipeSouth.src = "images/pipeSouth.png";// some variablesvar gap = 85;var constant;var bX = 10;var bY = 150;var gravity = 1.5;var score = 0;// audio filesvar fly = new Audio();var scor = new Audio();fly.src = "sounds/fly.mp3";scor.src = "sounds/score.mp3";// on key downdocument.addEventListener("keydown", moveUp);function moveUp() { bY -= 25; fly.play();}// pipe coordinatesvar pipe = [];pipe[0] = { x: cvs.width, y: 0,};// draw imagesfunction draw() { ctx.drawImage(bg, 0, 0); for (var i = 0; i < pipe.length; i++) { constant = pipeNorth.height + gap; ctx.drawImage(pipeNorth, pipe[i].x, pipe[i].y); ctx.drawImage(pipeSouth, pipe[i].x, pipe[i].y + constant); pipe[i].x--; if (pipe[i].x == 125) { pipe.push({ x: cvs.width, y: Math.floor(Math.random() * pipeNorth.height) - pipeNorth.height, }); } // detect collision if ( (bX + bird.width >= pipe[i].x && bX <= pipe[i].x + pipeNorth.width && (bY <= pipe[i].y + pipeNorth.height || bY + bird.height >= pipe[i].y + constant)) || bY + bird.height >= cvs.height - fg.height ) { location.reload(); // reload the page } if (pipe[i].x == 5) { score++; scor.play(); } } ctx.drawImage(fg, 0, cvs.height - fg.height); ctx.drawImage(bird, bX, bY); bY += gravity; ctx.fillStyle = "#000"; ctx.font = "20px Verdana"; ctx.fillText("Score : " + score, 10, cvs.height - 20); requestAnimationFrame(draw);}draw();Final Output Flappy Bird Game Code
Now we have completed our javascript code for Flappy Bird Game. Here is our updated output with javascript. Hope you like the Flappy Bird Game Code. you can see the output video and project screenshots.
See our other blogs and gain knowledge in front-end development.
Thank you !
In this post, we learn how to create a Flappy Bird Game Code using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Written by CodeWithRandom/Anki
Some related topics -
flappy-bird-game-code-flappy-bird-game-using-html-css-javascript
simple-javascript-carousel-how-to-create-a-carousel-using-css-js
Original Link: https://dev.to/codingtitan6/flappy-bird-game-using-html-javascript-4npm
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To