Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Can Phaser interact with DOM elements outside canvas?


przemoo83
 Share

Recommended Posts

Hi
Is it possible to make pahaser react to a button which is created outside canvas? I want to change game state by clicking a button which is somewhere outside canvas.

I tried this code but whenever button is clicked it returns "undefined". Any help much appreciated

var Cutters = {};Cutters.Boot = function(game) {};Cutters.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 slider = this.add.tileSprite(0, 0, this.game.width, this.game.height,'welcome');	slider.autoScroll(-20,0);	var button = document.getElementById('startbtn');	button.addEventListener('click', function(){game.state.start('Level_!');});},update: function() {	}};
Link to comment
Share on other sites

@przemoo83

 

When events are called, JavaScript will change the meaning of "this" in functions that are set up as an event handler.  However, if beforehand, you set the correct "this" value to another variable, for example "that", JavaScript remembers what "that" means because JavaScript remembers the scope created by any enclosing function of an inner function (this is called a closure).

 

The next version of JavaScript will provide a convenient way to work around such issues, but until then, using "that" or "self" or some such is a standard workaround.

Link to comment
Share on other sites

@przemoo83

 

When events are called, JavaScript will change the meaning of "this" in functions that are set up as an event handler.  However, if beforehand, you set the correct "this" value to another variable, for example "that", JavaScript remembers what "that" means because JavaScript remembers the scope created by any enclosing function of an inner function (this is called a closure).

 

The next version of JavaScript will provide a convenient way to work around such issues, but until then, using "that" or "self" or some such is a standard workaround.

Thanks for the tip. Still a lot for me to learn :)

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...