diff --git a/README.md b/README.md index 714e2de..b52528e 100644 --- a/README.md +++ b/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) diff --git a/game.js b/game.js index 0ba99fb..3468678 100644 --- a/game.js +++ b/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() { diff --git a/img/gameover.png b/img/gameover.png deleted file mode 100644 index 4a8ae78..0000000 Binary files a/img/gameover.png and /dev/null differ diff --git a/img/getready.png b/img/getready.png index 53e167f..24ab974 100644 Binary files a/img/getready.png and b/img/getready.png differ diff --git a/img/go.png b/img/go.png new file mode 100644 index 0000000..00f3e91 Binary files /dev/null and b/img/go.png differ diff --git a/img/tap/t0.png b/img/tap/t0.png new file mode 100644 index 0000000..9b6f33f Binary files /dev/null and b/img/tap/t0.png differ diff --git a/img/tap/t1.png b/img/tap/t1.png new file mode 100644 index 0000000..439f44c Binary files /dev/null and b/img/tap/t1.png differ