Phaser Game Development XDK - intel-xdk

Question

I am using xdk for phaser html 5 game development.
I am using sample click counter from their website but its not working. Can someone help me?
Here is the code below:
/* globals Phaser:false */
// create BasicGame Class
BasicGame = {
};
// create Game function in BasicGame
BasicGame.Game = function (game) {
};
var counter = 0;
// set Game function prototype
BasicGame.Game.prototype = {
init: function () {
// set up input max pointers
this.input.maxPointers = 1;
// set up stage disable visibility change
this.stage.disableVisibilityChange = true;
// Set up the scaling method used by the ScaleManager
// Valid values for scaleMode are:
// * EXACT_FIT
// * NO_SCALE
// * SHOW_ALL
// * RESIZE
// See http://docs.phaser.io/Phaser.ScaleManager.html for full document
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
// If you wish to align your game in the middle of the page then you can
// set this value to true. It will place a re-calculated margin-left
// pixel value onto the canvas element which is updated on orientation /
// resizing events. It doesn't care about any other DOM element that may
// be on the page, it literally just sets the margin.
this.scale.pageAlignHorizontally = true;
this.scale.pageAlignVertically = true;
// Force the orientation in landscape or portrait.
// * Set first to true to force landscape.
// * Set second to true to force portrait.
this.scale.forceOrientation(false, true);
// Sets the callback that will be called when the window resize event
// occurs, or if set the parent container changes dimensions. Use this
// to handle responsive game layout options. Note that the callback will
// only be called if the ScaleManager.scaleMode is set to RESIZE.
this.scale.setResizeCallback(this.gameResized, this);
// Set screen size automatically based on the scaleMode. This is only
// needed if ScaleMode is not set to RESIZE.
this.scale.updateLayout(true);
// Re-calculate scale mode and update screen size. This only applies if
// ScaleMode is not set to RESIZE.
this.scale.refresh();
},
preload: function () {
// Here we load the assets required for our preloader (in this case a
// background and a loading bar)
this.load.image('logo', 'asset/phaser.png');
},
create: function () {
// Add logo to the center of the stage
this.logo = this.add.sprite(
this.world.centerX, // (centerX, centerY) is the center coordination
this.world.centerY,
'logo');
// Set the anchor to the center of the sprite
this.logo.anchor.setTo(0.5, 0.5);
this.logo.inputEnabled = true;
this.logo.events.onInputDown.add(onClickListener, this);
//no add text on screen to check click counter
this.counterLabel = this.add.text(250, 16, '' , {fill:'FFFFFF'});
},
onClickListener: function() {
counter++;
this.counterLabel.text = "You clicked " + counter + " times!";
},
gameResized: function (width, height) {
// This could be handy if you need to do any extra processing if the
// game resizes. A resize could happen if for example swapping
// orientation on a device or resizing the browser window. Note that
// this callback is only really useful if you use a ScaleMode of RESIZE
// and place it inside your main game state.
}
};
It is throwing this Exception:
this.logo.events.onInputDown.add(onClickListener, this);

Answer 1

As onClickListener is sitting in BasicGame.Game.prototype you should get it from this:
this.logo.events.onInputDown.add(this.onClickListener, this);