merge

README.md

@@ -1,4 +1,5 @@
 # JS-Flappy-Bird
-Remake of the Original FlappyBird Using **JS** & **HTML Canvas**
+Remake of the Original FlappyBird Using **JS** & **HTML Canvas** 
+# [Play it.](https://d4rk1n.github.io/JS-Flappy-Bird/index.html)
 # Demo
 ![Demo](https://user-images.githubusercontent.com/44725090/67148880-e7dba280-f2a4-11e9-8dbf-d154842ee0cf.gif)

game.js

@@ -236,50 +236,73 @@
  const UI = {
     getReady : {sprite : new Image()},
     gameOver : {sprite : new Image()},
+    tap : [{sprite : new Image()},
+           {sprite : new Image()}],
     score : {
         curr : 0,
         best : 0,
     },
+    x :0,
+    y :0,
+    tx :0,
+    ty :0,
+    frame : 0,
     draw : function() {
         switch (state.curr) {
             case state.getReady :
-                curr = this.getReady;
+                this.y = parseFloat(scrn.height-this.getReady.sprite.height)/2;
+                this.x = parseFloat(scrn.width-this.getReady.sprite.width)/2;
+                this.tx = parseFloat(scrn.width - this.tap[0].sprite.width)/2;
+                this.ty = this.y + this.getReady.sprite.height- this.tap[0].sprite.height;
+                sctx.drawImage(this.getReady.sprite,this.x,this.y);
+                sctx.drawImage(this.tap[this.frame].sprite,this.tx,this.ty)
                 break;
             case state.gameOver :
-                curr = this.gameOver;
+                this.y = parseFloat(scrn.height-this.gameOver.sprite.height)/2;
+                this.x = parseFloat(scrn.width-this.gameOver.sprite.width)/2;
+                this.tx = parseFloat(scrn.width - this.tap[0].sprite.width)/2;
+                this.ty = this.y + this.gameOver.sprite.height- this.tap[0].sprite.height;
+                sctx.drawImage(this.gameOver.sprite,this.x,this.y);
+                sctx.drawImage(this.tap[this.frame].sprite,this.tx,this.ty)
                 break;
         }
-        y = parseFloat(scrn.height-curr.sprite.height)/2;
-        x = parseFloat(scrn.width-curr.sprite.width)/2;
-        if(state.curr!=state.Play)sctx.drawImage(curr.sprite,x,y);
         this.drawScore();
     },
     drawScore : function() {
             sctx.fillStyle = "#FFFFFF";
             sctx.strokeStyle = "#000000";
-            if(state.curr == state.Play )
-            {
+        switch (state.curr) {
+            case state.Play :
                 sctx.lineWidth = "2";
                 sctx.font = "35px Squada One";
-                sctx.fillText(this.score.curr,scrn.width/2,50);
-                sctx.strokeText(this.score.curr,scrn.width/2,50);
-                }
-            if(state.curr == state.gameOver )
-            {
-            	
-                    //this.score.best = Math.max(this.score.curr,localStorage.getItem("best"));
-                    //localStorage.setItem("best",this.score.best);
+                sctx.fillText(this.score.curr,scrn.width/2-5,50);
+                sctx.strokeText(this.score.curr,scrn.width/2-5,50);
+                break;
+            case state.gameOver :
                     sctx.lineWidth = "2";
                     sctx.font = "40px Squada One";
-                    let sc = `SCORE :     ${this.score.curr}`
-                    let bs = `BEST  :     ${this.score.best}`
-                    sctx.fillText(sc,scrn.width/2-80,scrn.height/2);
-                    sctx.strokeText(sc,scrn.width/2-80,scrn.height/2);
-                    sctx.fillText(bs,scrn.width/2-80,scrn.height/2+30);
-                    sctx.strokeText(bs,scrn.width/2-80,scrn.height/2+30);
+                    let sc = `SCORE :     ${this.score.curr}`;
+                    try {
+                        this.score.best = Math.max(this.score.curr,localStorage.getItem("best"));
+                        localStorage.setItem("best",this.score.best);
+                        let bs = `BEST  :     ${this.score.best}`;
+                        sctx.fillText(sc,scrn.width/2-80,scrn.height/2+0);
+                        sctx.strokeText(sc,scrn.width/2-80,scrn.height/2+0);
+                        sctx.fillText(bs,scrn.width/2-80,scrn.height/2+30);
+                        sctx.strokeText(bs,scrn.width/2-80,scrn.height/2+30);
+                    }
+                    catch(e) {
+                        sctx.fillText(sc,scrn.width/2-85,scrn.height/2+15);
+                        sctx.strokeText(sc,scrn.width/2-85,scrn.height/2+15);
+                    }
                     
-
-       		 }
+                break;
+        }
+    },
+    update : function() {
+        if(state.curr == state.Play) return;
+        this.frame += (frames % 10==0) ? 1 :0;
+        this.frame = this.frame % this.tap.length;
     }
 
  };
@@ -288,8 +311,10 @@ gnd.sprite.src="img/ground.png";
 bg.sprite.src="img/BG.png";
 pipe.top.sprite.src="img/toppipe.png";
 pipe.bot.sprite.src="img/botpipe.png";
+UI.gameOver.sprite.src="img/go.png";
 UI.getReady.sprite.src="img/getready.png";
-UI.gameOver.sprite.src="img/gameOver.png";
+UI.tap[0].sprite.src="img/tap/t0.png";
+UI.tap[1].sprite.src="img/tap/t1.png";
 bird.animations[0].sprite.src="img/bird/b0.png";
 bird.animations[1].sprite.src="img/bird/b1.png";
 bird.animations[2].sprite.src="img/bird/b2.png";
@@ -315,6 +340,7 @@ gameLoop();
   bird.update();  
   gnd.update();
   pipe.update();
+  UI.update();
  }
  function draw()
  {