CODEWITHSUNDEEP
javascriptphaser-framework
vvvsg
vvvsg

Reputation: 401

this in Phaser game JS

so I recently started learning JS and now trying to use Phaser to make games. In the piece of code below,

1- is the author referring to mainState by using "this"?? 2- there is no variable defined for bird. where does it store data then??

// Initialize Phaser, and creates a 400x490px game
var game = new Phaser.Game(400, 490, Phaser.AUTO, 'gameDiv');

// Creates a new 'main' state that will contain the game
var mainState = {

    // Function called first to load all the assets
    preload: function() { 
        // Change the background color of the game
        game.stage.backgroundColor = '#71c5cf';

        // Load the bird sprite
        game.load.image('bird', 'assets/bird.png');  

        // Load the pipe sprite
        game.load.image('pipe', 'assets/pipe.png');      
    },

    // Fuction called after 'preload' to setup the game 
    create: function() { 
        // Set the physics system
        game.physics.startSystem(Phaser.Physics.ARCADE);

        // Display the bird on the screen
        this.bird = this.game.add.sprite(100, 245, 'bird');

        // Add gravity to the bird to make it fall
        game.physics.arcade.enable(this.bird);
        this.bird.body.gravity.y = 1000; 

        // Call the 'jump' function when the spacekey is hit
        var spaceKey = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
        spaceKey.onDown.add(this.jump, this); 

        // Create a group of 20 pipes
        this.pipes = game.add.group();
        this.pipes.enableBody = true;
        this.pipes.createMultiple(20, 'pipe');  

        // Timer that calls 'addRowOfPipes' ever 1.5 seconds
        this.timer = this.game.time.events.loop(1500, this.addRowOfPipes, this);           

        // Add a score label on the top left of the screen
        this.score = 0;
        this.labelScore = this.game.add.text(20, 20, "0", { font: "30px Arial", fill: "#ffffff" });  
    },

Upvotes: 2

Views: 1971

Answers (2)

famousgarkin
famousgarkin

Reputation: 14116

  1. Yes, the this keyword in the mainState object's functions points to the mainState object itself.

  2. The bird variable is defined on the mainState object itself with:

    // Display the bird on the screen
this.bird = this.game.add.sprite(100, 245, 'bird');

Upvotes: 3

Robin
Robin

Reputation: 1261

this in the code you posted refers to mainState as you inferred. Using this.valueName creates a new value on the mainState object.

See this link for more info on the this keyword and what it refers to when used in different places. This example from the linked page is relevant to your code:

var o = {
  prop: 37,
  f: function() {
    return this.prop;
  }
};

console.log(o.f()); // logs 37

It stores the data as usual, for all intents and purposes it performs the same function as adding another value outside the function as normal. And could be accessed with mainState.bird.

var mainState = {
    bird : game.addBird(...)
}

Upvotes: 3

Related Questions