{"id":401,"date":"2014-03-25T13:51:20","date_gmt":"2014-03-25T13:51:20","guid":{"rendered":"http:\/\/nikola-breznjak.com\/blog\/?p=401"},"modified":"2015-08-20T11:36:30","modified_gmt":"2015-08-20T11:36:30","slug":"make-a-flappy-bird-clone-with-phaser","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/javascript\/phaser\/make-a-flappy-bird-clone-with-phaser\/","title":{"rendered":"Make a Flappy Bird clone with Phaser"},"content":{"rendered":"<blockquote><p><a href=\"http:\/\/en.wikipedia.org\/wiki\/Flappy_Bird\">Flappy Bird<\/a>\u00a0&#8211; no info as anyone who may be reading this knows about it \ud83d\ude09<\/p>\n<p><a href=\"http:\/\/phaser.io\/\">Phaser<\/a> &#8211; open source desktop and mobile HTML5 game framework supporting both JavaScript and TypeScript<\/p><\/blockquote>\n<p>This is basically just an addition to the great 3 series tutorial (<a href=\"http:\/\/blog.lessmilk.com\/how-to-make-flappy-bird-in-html5-1\/\">part 1<\/a>, <a href=\"http:\/\/blog.lessmilk.com\/how-to-make-flappy-bird-in-html5-2\/\">part 2<\/a>, <a href=\"http:\/\/blog.lessmilk.com\/how-to-make-flappy-bird-in-html5-3\/\">part 3<\/a>) from <a href=\"http:\/\/blog.lessmilk.com\/\">LessMilk&#8217;s blog<\/a>\u00a0and hereby I thank him for them.<\/p>\n<p>The original tutorial makes the bird (square) jump by pressing the space key, whilst to make the bird jump on a mouse click (or tap on mobile devices) all you have to do is replace the<\/p>\n<pre class=\"lang:default decode:true\">var space_key = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);<\/pre>\n<p>in the <span class=\"lang:default decode:true  crayon-inline \">menu.js<\/span>\u00a0\u00a0file with:<\/p>\n<pre class=\"lang:default decode:true\">var space_key = this.game.input;<\/pre>\n<p>Also, I added the crash sound (<a href=\"http:\/\/soundbible.com\/1945-Smashing.html\">original file from here<\/a>) in the\u00a0<span class=\"lang:default decode:true  crayon-inline \">hit_pipe<\/span>\u00a0\u00a0function:<\/p>\n<pre class=\"lang:default decode:true\">if (this.bird.alive == false){\r\n    this.crash_sound.play();\r\n    return;\r\n}<\/pre>\n<p>which I&#8217;ve defined in the <span class=\"lang:default decode:true  crayon-inline \">create<\/span>\u00a0\u00a0function:<\/p>\n<pre class=\"lang:default decode:true\">this.crash_sound = this.game.add.audio('crash');<\/pre>\n<p>of the file <span class=\"lang:default decode:true  crayon-inline \">play.js<\/span>\u00a0.<\/p>\n<p>You can download this changed code from <a href=\"https:\/\/github.com\/Hitman666\/FlappyBox\">Github<\/a>, and try out the game <a href=\"http:\/\/nikola-breznjak.com\/_testings\/phaser\/flappy_bird\/\">here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Flappy Bird\u00a0&#8211; no info as anyone who may be reading this knows about it \ud83d\ude09 Phaser &#8211; open source desktop and mobile HTML5 game framework supporting both JavaScript&hellip;<\/p>\n","protected":false},"author":1,"featured_media":402,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[],"class_list":["post-401","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-phaser"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/comments?post=401"}],"version-history":[{"count":3,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/401\/revisions"}],"predecessor-version":[{"id":457,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/401\/revisions\/457"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/402"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}