{"id":1263,"date":"2015-03-03T06:53:59","date_gmt":"2015-03-03T06:53:59","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=1263"},"modified":"2015-08-10T06:49:51","modified_gmt":"2015-08-10T06:49:51","slug":"wait-for-click-before-starting-the-game-in-phaser","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/stack-overflow\/wait-for-click-before-starting-the-game-in-phaser\/","title":{"rendered":"Wait for click before starting the game in Phaser"},"content":{"rendered":"

\"profile<\/a>
\nI’m a big fan of Stack Overflow<\/a> and I tend to contribute regularly (am currently in the top 0.X%<\/a>).\u00a0In this category (stackoverflow<\/a>)\u00a0of posts I will will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here<\/a>.<\/p>\n

My question<\/a> was:<\/p>\n

The JSFiddle demo is\u00a0here<\/a>, but am pasting the code below also. My question is simple (though I can’t seem to find any example in how to realize this): right now if you start the game in JSFiddle you will see that the rectangle immediately “falls” down. I would somehow like the game to start when I click with the mouse (basically that nothing happens before the first click of a mouse) – any points on how to accomplish this?<\/p>\n

JS:<\/p>\n

\/\/ Initialize Phaser, and creates a 400x490px game\r\nvar game = new Phaser.Game(400, 490, Phaser.AUTO, 'game_div');\r\nvar game_state = {};\r\n\r\n\r\n\/\/ Creates a new 'main' state that wil contain the game\r\ngame_state.main = function () {};\r\ngame_state.main.prototype = {\r\n\r\n    preload: function () {\r\n        \/\/ Change the background color of the game\r\n        this.game.stage.backgroundColor = '#71c5cf';\r\n\r\n        \/\/ Load the bird sprite\r\n        this.game.load.image('bird', 'https:\/\/lh6.googleusercontent.com\/Xrz0PnR6Ezg5_k5zyFKxGv0LzehAP9SMj_ga3qQzIF4JAfv8xHm7TxfliwtBD8ihfw=s190');\r\n        this.game.load.image('pipe', 'https:\/\/lh4.googleusercontent.com\/RSMNhJ3KY4Xl0PQpUf6I9EayOdLhvOKKV9QV7_BXXYVedPy0oMNRFKANW14xV76NDA=s190');\r\n    },\r\n\r\n    create: function () {\r\n        \/\/ Display the bird on the screen\r\n        this.bird = this.game.add.sprite(100, 245, 'bird');\r\n\r\n        \/\/ Add gravity to the bird to make it fall\r\n        this.bird.body.gravity.y = 1000;\r\n\r\n        \/\/ Call the 'jump' function when the spacekey is hit\r\n        var space_key = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);\r\n        space_key.onDown.add(this.jump, this);\r\n\r\n        this.pipes = game.add.group();\r\n        this.pipes.createMultiple(20, 'pipe');\r\n        this.timer = this.game.time.events.loop(1500, this.add_row_of_pipes, this);\r\n\r\n        this.score = 0;\r\n        var style = {\r\n            font: \"30px Arial\",\r\n            fill: \"#ffffff\"\r\n        };\r\n        this.label_score = this.game.add.text(20, 20, \"0\", style);\r\n\r\n    },\r\n\r\n    update: function () {\r\n        \/\/ If the bird is out of the world (too high or too low), call the 'restart_game' function\r\n        this.game.physics.overlap(this.bird, this.pipes, this.restart_game, null, this);\r\n        if (this.bird.inWorld == false) this.restart_game();\r\n    },\r\n\r\n\r\n    \/\/ Make the bird jump \r\n    jump: function () {\r\n        \/\/ Add a vertical velocity to the bird\r\n        this.bird.body.velocity.y = -350;\r\n    },\r\n\r\n    \/\/ Restart the game\r\n    restart_game: function () {\r\n        \/\/ Start the 'main' state, which restarts the game\r\n        this.game.time.events.remove(this.timer);\r\n        this.game.state.start('main');\r\n    },\r\n\r\n    add_one_pipe: function (x, y) {\r\n        \/\/ Get the first dead pipe of our group\r\n        var pipe = this.pipes.getFirstDead();\r\n\r\n        \/\/ Set the new position of the pipe\r\n        pipe.reset(x, y);\r\n\r\n        \/\/ Add velocity to the pipe to make it move left\r\n        pipe.body.velocity.x = -200;\r\n\r\n        \/\/ Kill the pipe when it's no longer visible \r\n        pipe.outOfBoundsKill = true;\r\n    },\r\n    add_row_of_pipes: function () {\r\n        this.score += 1;\r\n        this.label_score.content = this.score;\r\n        var hole = Math.floor(Math.random() * 5) + 1;\r\n\r\n        for (var i = 0; i < 8; i++)\r\n        if (i != hole && i != hole + 1) this.add_one_pipe(400, i * 60 + 10);\r\n    },\r\n};\r\n\r\n\r\n\r\n\/\/ Add and start the 'main' state to start the game\r\ngame.state.add('main', game_state.main);\r\ngame.state.start('main');<\/pre>\n
CSS:<\/p>\n
#game_div {\r\n    width: 400px;\r\n    margin: auto;\r\n    margin-top: 50px;\r\n}<\/pre>\n
HTML:<\/p>\n
<div id=\"game_div\"><\/div><\/pre>\n
I found the answer to this one myself:<\/p>\n
\n
\n
So, to not leave this question unanswered and to help further readers, here is the link to the\u00a0updated jsFiddle<\/a>\u00a0where I solved my initial problem, and below is the code from jsFiddle.<\/p>\n
However, if one will be interested I suggest taking a look at the freely\u00a0available code on GitHub<\/a>\u00a0which uses game states and has a better structured code.<\/p>\n
jsFiddle<\/strong><\/p>\n
CSS:<\/p>\n
#game_div {\r\n    width: 400px;\r\n    margin: auto;\r\n    margin-top: 50px;\r\n}<\/pre>\n
HTML:<\/p>\n
<div id=\"game_div\"><\/div><\/pre>\n
JS:<\/p>\n
\/\/ Initialize Phaser, and creates a 400x490px game\r\nvar game = new Phaser.Game(400, 490, Phaser.AUTO, 'game_div');\r\nvar game_state = {};\r\nvar gameStarted = false;\r\n\r\n\r\n\/\/ Creates a new 'main' state that wil contain the game\r\ngame_state.main = function () {};\r\ngame_state.main.prototype = {\r\n\r\n    game_start: function(){\r\n        if (!gameStarted){\r\n            this.bird.body.gravity.y = 1000;\r\n            this.timer = this.game.time.events.loop(1500, this.add_row_of_pipes, this);\r\n            this.label_start.content = \"\";\r\n        }\r\n        gameStarted = true;\r\n    },\r\n    preload: function () {\r\n        \/\/ Change the background color of the game\r\n        this.game.stage.backgroundColor = '#71c5cf';\r\n\r\n        \/\/ Load the bird sprite\r\n        this.game.load.image('bird', 'https:\/\/lh6.googleusercontent.com\/Xrz0PnR6Ezg5_k5zyFKxGv0LzehAP9SMj_ga3qQzIF4JAfv8xHm7TxfliwtBD8ihfw=s190');\r\n        this.game.load.image('pipe', 'https:\/\/lh4.googleusercontent.com\/RSMNhJ3KY4Xl0PQpUf6I9EayOdLhvOKKV9QV7_BXXYVedPy0oMNRFKANW14xV76NDA=s190');\r\n    },\r\n\r\n    create: function () {\r\n        \/\/ Display the bird on the screen\r\n        this.bird = this.game.add.sprite(100, 245, 'bird');\r\n\r\n        \/\/ Add gravity to the bird to make it fall\r\n\r\n\r\n        \/\/ Call the 'jump' function when the spacekey is hit\r\n        this.game.input.onDown.add(this.game_start, this);\r\n\r\n        this.pipes = game.add.group();\r\n        this.pipes.createMultiple(20, 'pipe');\r\n\r\n\r\n        this.score = 0;\r\n        var style = {\r\n            font: \"30px Arial\",\r\n            fill: \"#ffffff\"\r\n        };\r\n        this.label_score = this.game.add.text(20, 20, \"0\", style);\r\n        this.label_start = this.game.add.text(35, 180, \"Click to start the show\", style);\r\n        game.input.onDown.add(this.jump, this);\r\n    },\r\n\r\n    update: function () {\r\n        \/\/ If the bird is out of the world (too high or too low), call the 'restart_game' function\r\n        this.game.physics.overlap(this.bird, this.pipes, this.restart_game, null, this);\r\n        if (this.bird.inWorld == false) this.restart_game();\r\n    },\r\n\r\n\r\n    \/\/ Make the bird jump \r\n    jump: function () {\r\n        \/\/ Add a vertical velocity to the bird\r\n        this.bird.body.velocity.y = -350;\r\n    },\r\n\r\n    \/\/ Restart the game\r\n    restart_game: function () {\r\n        \/\/ Start the 'main' state, which restarts the game\r\n        this.game.time.events.remove(this.timer);\r\n        this.game.state.start('main');\r\n        gameStarted=false;\r\n    },\r\n\r\n    add_one_pipe: function (x, y) {\r\n        \/\/ Get the first dead pipe of our group\r\n        var pipe = this.pipes.getFirstDead();\r\n\r\n        \/\/ Set the new position of the pipe\r\n        pipe.reset(x, y);\r\n\r\n        \/\/ Add velocity to the pipe to make it move left\r\n        pipe.body.velocity.x = -200;\r\n\r\n        \/\/ Kill the pipe when it's no longer visible \r\n        pipe.outOfBoundsKill = true;\r\n    },\r\n    add_row_of_pipes: function () {\r\n        this.score += 1;\r\n        this.label_score.content = this.score;\r\n        var hole = Math.floor(Math.random() * 5) + 1;\r\n\r\n        for (var i = 0; i < 8; i++)\r\n        if (i != hole && i != hole + 1) this.add_one_pipe(400, i * 60 + 10);\r\n    },\r\n};\r\n\r\n\r\n\r\n\/\/ Add and start the 'main' state to start the game\r\ngame.state.add('main', game_state.main);\r\ngame.state.start('main');<\/pre>\n
 <\/p>\n<\/div>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%).\u00a0In this category (stackoverflow)\u00a0of posts I will will be posting…<\/p>\n","protected":false},"author":1,"featured_media":609,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":[],"class_list":["post-1263","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-stack-overflow"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/1263","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=1263"}],"version-history":[{"count":2,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/1263\/revisions"}],"predecessor-version":[{"id":1689,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/1263\/revisions\/1689"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/609"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=1263"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=1263"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=1263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}