├── README.md
├── flappyBird - starter Template.rar
├── flappyBird.js
├── images
    ├── bg.png
    ├── bird.png
    ├── fg.png
    ├── pipeNorth.png
    └── pipeSouth.png
├── index.html
└── sounds
    ├── fly.mp3
    └── score.mp3


/README.md:
--------------------------------------------------------------------------------
1 | # FlappyBird-JavaScript
2 | 
3 | The Snake game, created using JavaScript, and The HTML5 canvas.
4 | 
5 | Download the starter template, and follow the tutorial on youtube step by step.
6 | 
7 | Tutorial link : https://www.youtube.com/watch?v=L07i4g-zhDA
8 | 


--------------------------------------------------------------------------------
/flappyBird - starter Template.rar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/FlappyBird-JavaScript/e8740b968a9e25762eb19f5c0b6e81bb3f19da8a/flappyBird - starter Template.rar


--------------------------------------------------------------------------------
/flappyBird.js:
--------------------------------------------------------------------------------
  1 | var cvs = document.getElementById("canvas");
  2 | var ctx = cvs.getContext("2d");
  3 | 
  4 | // load images
  5 | 
  6 | var bird = new Image();
  7 | var bg = new Image();
  8 | var fg = new Image();
  9 | var pipeNorth = new Image();
 10 | var pipeSouth = new Image();
 11 | 
 12 | bird.src = "images/bird.png";
 13 | bg.src = "images/bg.png";
 14 | fg.src = "images/fg.png";
 15 | pipeNorth.src = "images/pipeNorth.png";
 16 | pipeSouth.src = "images/pipeSouth.png";
 17 | 
 18 | 
 19 | // some variables
 20 | 
 21 | var gap = 85;
 22 | var constant;
 23 | 
 24 | var bX = 10;
 25 | var bY = 150;
 26 | 
 27 | var gravity = 1.5;
 28 | 
 29 | var score = 0;
 30 | 
 31 | // audio files
 32 | 
 33 | var fly = new Audio();
 34 | var scor = new Audio();
 35 | 
 36 | fly.src = "sounds/fly.mp3";
 37 | scor.src = "sounds/score.mp3";
 38 | 
 39 | // on key down
 40 | 
 41 | document.addEventListener("keydown",moveUp);
 42 | 
 43 | function moveUp(){
 44 |     bY -= 25;
 45 |     fly.play();
 46 | }
 47 | 
 48 | // pipe coordinates
 49 | 
 50 | var pipe = [];
 51 | 
 52 | pipe[0] = {
 53 |     x : cvs.width,
 54 |     y : 0
 55 | };
 56 | 
 57 | // draw images
 58 | 
 59 | function draw(){
 60 |     
 61 |     ctx.drawImage(bg,0,0);
 62 |     
 63 |     
 64 |     for(var i = 0; i < pipe.length; i++){
 65 |         
 66 |         constant = pipeNorth.height+gap;
 67 |         ctx.drawImage(pipeNorth,pipe[i].x,pipe[i].y);
 68 |         ctx.drawImage(pipeSouth,pipe[i].x,pipe[i].y+constant);
 69 |              
 70 |         pipe[i].x--;
 71 |         
 72 |         if( pipe[i].x == 125 ){
 73 |             pipe.push({
 74 |                 x : cvs.width,
 75 |                 y : Math.floor(Math.random()*pipeNorth.height)-pipeNorth.height
 76 |             }); 
 77 |         }
 78 | 
 79 |         // detect collision
 80 |         
 81 |         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){
 82 |             location.reload(); // reload the page
 83 |         }
 84 |         
 85 |         if(pipe[i].x == 5){
 86 |             score++;
 87 |             scor.play();
 88 |         }
 89 |         
 90 |         
 91 |     }
 92 | 
 93 |     ctx.drawImage(fg,0,cvs.height - fg.height);
 94 |     
 95 |     ctx.drawImage(bird,bX,bY);
 96 |     
 97 |     bY += gravity;
 98 |     
 99 |     ctx.fillStyle = "#000";
100 |     ctx.font = "20px Verdana";
101 |     ctx.fillText("Score : "+score,10,cvs.height-20);
102 |     
103 |     requestAnimationFrame(draw);
104 |     
105 | }
106 | 
107 | draw();
108 | 
109 | 
110 | 
111 | 
112 | 
113 | 
114 | 
115 | 
116 | 
117 | 
118 | 
119 | 
120 | 
121 | 
122 | 
123 | 
124 | 
125 | 
126 | 
127 | 
128 | 
129 | 
130 | 
131 | 
132 | 


--------------------------------------------------------------------------------
/images/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/FlappyBird-JavaScript/e8740b968a9e25762eb19f5c0b6e81bb3f19da8a/images/bg.png


--------------------------------------------------------------------------------
/images/bird.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/FlappyBird-JavaScript/e8740b968a9e25762eb19f5c0b6e81bb3f19da8a/images/bird.png


--------------------------------------------------------------------------------
/images/fg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/FlappyBird-JavaScript/e8740b968a9e25762eb19f5c0b6e81bb3f19da8a/images/fg.png


--------------------------------------------------------------------------------
/images/pipeNorth.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/FlappyBird-JavaScript/e8740b968a9e25762eb19f5c0b6e81bb3f19da8a/images/pipeNorth.png


--------------------------------------------------------------------------------
/images/pipeSouth.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/FlappyBird-JavaScript/e8740b968a9e25762eb19f5c0b6e81bb3f19da8a/images/pipeSouth.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Flappy Bird using JS | by learnWD</title>
 5 |   </head>
 6 |   <body>
 7 |    <h3>flappyBird by LearnWD</h3>
 8 |    
 9 |    <canvas id="canvas" width="288" height="512"></canvas>
10 |    
11 |    <script src="flappyBird.js"></script>
12 |   </body>
13 | </html>


--------------------------------------------------------------------------------
/sounds/fly.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/FlappyBird-JavaScript/e8740b968a9e25762eb19f5c0b6e81bb3f19da8a/sounds/fly.mp3


--------------------------------------------------------------------------------
/sounds/score.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeExplainedRepo/FlappyBird-JavaScript/e8740b968a9e25762eb19f5c0b6e81bb3f19da8a/sounds/score.mp3


--------------------------------------------------------------------------------