es2015 game referencing between classes

[Cedric]

Dear people of this awesome community,

I am strugeling to get the spawning system working. I keep getting the error: src\js\objects\Barrier.js:9 Uncaught TypeError: Cannot read property 'width' of undefined(…);

Barrier.js :

import GlobalVars from "./GlobalVars";
import playGame from "../States/PlayGame";

class Barrier extends Phaser.Sprite {
  constructor(game, state, speed, tintColor) {
    super(game);
    this.game = game;
    this.state = state;
    var positions = [(this.game.width - GlobalVars.tunnelWidth) / 2, (this.game.width + GlobalVars.tunnelWidth)/2];
    var position = this.game.rnd.between(0, 1);
    Phaser.Sprite.call(this, game, positions[position], -100, "barrier");
    var cropRect = new Phaser.Rectangle(0, 0, GlobalVars.tunnelWidth /2, 24);
    this.crop(cropRect);
    game.physics.enable(this, Phaser.Physics.ARCADE);
    this.anchor.set(position, 0.5);
    this.tint = tintColor;
    this.body.velocity.y = speed;
    this.placeBarrier = true;

    console.log("barrier placed");
  }

  update() {
    if (this.placeBarrier && this.y > GlobalVars.barrierGap) {
      this.placeBarrier = false;
      playGame.prototype.addBarrier(this.parent, this.tintColor);
    }
    if (this.y > this.game.height) {
      this.destroy();
    }
  }
}
export default Barrier;

import GlobalVars from "../objects/GlobalVars";
import Barrier from "../objects/Barrier";


class playGame extends Phaser.State {
  constructor(game) {
    super(game);
  }

  create() {
    console.log("game starts running");
    //setting general color
    this.tintColor = GlobalVars.currentColor;
    //tunnel
    this.createTunnel();
    //ship
    this.createShip();
    //smoke particle effect
    this.createSmoke();
    //barriers
    this.barrierGroup = this.add.group();
    this.addBarrier(this.barrierGroup, this.tintColor);
  }
  update() {
    this.updateSmoke();
    this.checkForSwipe();
  }

  .....

  addBarrier(group, tintColor) {
    var barrier = new Barrier(this.game, this, GlobalVars.barrierSpeed, tintColor);
    this.add.existing(barrier);
    group.add(barrier);
  }
}
export default playGame;

 

I am following a book I bought called: create HTML5 vertical endless runner.

can anyone hint a tutorial or give a solution?

Thanks in advance

Very Kind regards,

Cedric

[drhayes]

What's calling addBarrier?

EDIT: My guess is that the thing that is calling addBarrier is losing its context, so the value of "this" isn't what you think it is. I bet it's the window. The window doesn't have a game, so neither does your sprite.

[Cedric]

1 hour ago, drhayes said:

What's calling addBarrier?

EDIT: My guess is that the thing that is calling addBarrier is losing its context, so the value of "this" isn't what you think it is. I bet it's the window. The window doesn't have a game, so neither does your sprite.

in the book it is the prototype itself which is calling the addBarrier method. So I called it inside the class. But I have no idea how to use it or fix it :/ 

[Cedric]

I fixed the issue by passing in the game as a parameter. The problem was that I was referencing the game of the current class which was declared differently. So when I used the right declaration and passed it in as the game parameter then it worked like it should.