CODEWITHSUNDEEP
javascripthtmlphaser-framework
przemoo83
przemoo83

Reputation: 323

Phaser with addEventListener

I'm trying to capture a click event and change a game state but I constantly get "undefined" error. I use this code to add game states:

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'canvas');
game.state.add('Boot', Boot);
game.state.add('Level_1', Level_1);
game.state.start('Boot');

Here I run game intro and try to capture a click event

var button;
var Boot = function(game) {};

Boot.prototype = {
preload: function() {
    this.load.image('logo','img/logo_allcomp_white.png');
    this.load.image('welcome','img/welcome.png');
    this.load.image('gradient','img/gradient.png');
},

create: function() {
    this.add.sprite(0,0,'gradient');
    this.stage.backgroundColor = '#ffffff';
    this.add.sprite(20,20,'logo');
    var cutters = this.add.tileSprite(0, 0, this.game.width, this.game.height,'welcome');
    cutters.autoScroll(-20,0);
    button = document.getElementById('startbtn');
    button.addEventListener('click',this.updateButton);
},

updateButton: function() {
this.game.state.start('Level_1');
}
};

I cannot get it to work. Is this even possible to interact with other DOM elements outside the canvas? Adding this button to canvas doesn't work for me. I must keep my control panel outside

Upvotes: 1

Views: 3072

Answers (1)

Jakub Bilko
Jakub Bilko

Reputation: 121

In your updateButton you reference the game as this.game, while in the scope of the function this refers to the button being pressed, making this.game undefined. You can just call your game with game.state.start('Level_1');

I've created a pen for you: http://codepen.io/kozulowski/pen/YPvyzW

Upvotes: 2

Related Questions