Help with Business Outfit Bob Project! Code is correct but game is a gray screen!

Hello everyone! There have been a few questions about this in the forums that are unanswered, but hopefully someone will be able to assist me here. I have completed the “Business Outfit Bob” project in the “Create Video Games with Phaser.js” learning path. But whenever I try to run the game, I just get a gray screen:


I have compared my code against the downloaded solution files and everything looks the same. Although, I will say I am confused by step 19 where it says to “reset” the score variable to 0. I don’t see a score variable on EndScene.js anywhere, am I supposed to add one?

Here is my code from GameScene.js:

// Add a variable to keep count of Bob's earnings

// Add a variable to multiply money

// Add a variable to control speed of Bob sprite
let score = 0;
const MoneyMultiplier = 100;
const speed = 1;


// Values used to keep track of where money and paper appear
const gameState = {
  numCoordinates: {},
};
let randomCoord;

class GameScene extends Phaser.Scene {
  constructor() {
    super({ key: 'GameScene' });
  }

  preload() {
    this.load.image('bob-front', 'https://content.codecademy.com/courses/learn-phaser/BOB/Bob%20front.png');
    this.load.image('bob-back', 'https://content.codecademy.com/courses/learn-phaser/BOB/Bob%20back.png');
    this.load.image('bob-side', 'https://content.codecademy.com/courses/learn-phaser/BOB/Bob%20side.png');
    this.load.image('money', 'https://content.codecademy.com/courses/learn-phaser/BOB/Money.png');
    this.load.image('paper', 'https://content.codecademy.com/courses/learn-phaser/BOB/Paperwork.png');
  }

  create() {
    // Display text showing how much cash Bob earned
    let scoreText = this.add.text(140, 610, `Earnings: $${score}`, { fontSize: '25px', fill: '#fff' });

    // Create the Bob sprite and set boundaries for it
    gameState.player = this.physics.add.sprite(240, 500, 'bob-front').setScale(.8);
    this.physics.world.setBounds(0, 0, 480, 600);  // Slightly above score
    gameState.player.setCollideWorldBounds(true);
    gameState.player.body.collideWorldBounds = true;

    // Create money sprite in random spots on canvas
    randomCoord = assignCoords();
    gameState.money = this.physics.add.sprite(randomCoord.x, randomCoord.y, 'money').setScale(.5);

    // Create paper sprite group
    gameState.enemies = this.physics.add.group();

    // Collision detection between Bob and money sprite
    this.physics.add.overlap(gameState.player, gameState.money, () => {
      // Hide and deactivate the money sprite after Bob collides with it
      gameState.money.disableBody();
      // Move money somewhere else on the canvas
      delete gameState.numCoordinates[`x${gameState.money.x}y${gameState.money.y}`];
      randomCoord = assignCoords();
      // Place the money sprite somewhere new, then show and activate it
      gameState.money.enableBody(true, randomCoord.x, randomCoord.y);
      // Increase the score randomly between 100 and 1000
      score += (Math.round(Math.random() * 10) * moneyMultiplier);
      // Update cash total text
      scoreText.setText(`Earnings: \$${score}`);
      // Place paper sprite on canvas randomly
      randomCoord = assignCoords();
      gameState.enemies.create(randomCoord.x, randomCoord.y, 'paper').setScale(.6);
    });

    // Collision detection between Bob and paper sprites
    this.physics.add.collider(gameState.player, gameState.enemies, () => this.endGame());

    // Helper function to return an object containing evenly spaced x and y coordinates:
    function generateRandomCoords() {
      const randomX = Math.floor(Math.random() * 5) * 75 + 25
      const randomY = Math.floor(Math.random() * 5) * 75 + 25
      return { x: randomX, y: randomY }
    }

    // Helper function that returns one set of coordinates not in gameState.numCoordinates
    function assignCoords() {
      let score = 0;
      const moneyMultiplier = 100;
      const speed = 1; 
      let assignedCoord = generateRandomCoords();

      // If the coordinates are already in gameState.numCoordinates, then other set of coordinates are generated until there is one not in use
      while (gameState.numCoordinates[`x${assignedCoord.x}y${assignedCoord.y}`]) {
        assignedCoord = generateRandomCoords()
      }

      gameState.numCoordinates[`x${assignedCoord.x}y${assignedCoord.y}`] = true

      return assignedCoord;
    }
  }

  update() {
    // Arrow keys that will move Bob in 4 directions
    const cursors = this.input.keyboard.createCursorKeys();
    const rightArrow = cursors.right.isDown; 
    const leftArrow = cursors.left.isDown; 
    const upArrow = cursors.up.isDown; 
    const downArrow = cursors.down.isDown;
    // Add variables that store if a specific arrow key is being pressed
  if (rightArrow) {
      moveBobRight();
  } else if (leftArrow) {
    moveBobLeft(); 
  } else if (upArrow) {
    moveBobUp();
  } else if (downArrow) {
    moveBobDown();
  }
 const bobXCoord = gamestate.player.x;
 const bobYCoord = gamestate.player.y;
 if (bobXCoord <= 32 || bobXCoord >=448) {
   this.endGame();
 }
if (bobYCoord <= 32 || bobYCoord >= 568) { 
  this.endGame(); 
 }  
  







    // Add code to check whether any of the arrow keys were pressed, move Bob









    // Add variables that store the x and y coordinates of the Bob sprite



    // Add code to check collision between Bob and edges of the canvas of the game







    // Helper functions to move Bob in 4 directions
    function moveBobRight() {
      gameState.player.flipX = false;
      gameState.player.setTexture('bob-side');
      gameState.player.setVelocityX(150 * speed);
      gameState.player.setVelocityY(0);
    }

    function moveBobLeft() {
      // NOTE: By default Bob looks to the right so we flip the image if moving left
      gameState.player.flipX = true;
      gameState.player.setTexture('bob-side');
      gameState.player.setVelocityX(-150 * speed);
      gameState.player.setVelocityY(0);
    }

    function moveBobUp() {
      gameState.player.flipX = false;
      gameState.player.setTexture('bob-back');
      gameState.player.setVelocityX(0);
      gameState.player.setVelocityY(-150 * speed);
    }

    function moveBobDown() {
      gameState.player.flipX = false;
      gameState.player.setTexture('bob-front');
      gameState.player.setVelocityX(0);
      gameState.player.setVelocityY(150 * speed);
    }
  }

  // Class function that ends current Game and transitions to End Scene
  endGame() {
    // Stop sprites moving
    this.physics.pause();
    // Transition to end scene w/fade
    this.cameras.main.fade(800, 0, 0, 0, false, function (camera, progress) {
      if (progress > .5) {
        this.scene.stop('GameScene');
        this.scene.start('EndScene');
      }
    });
  }
}

And here is my code from EndScene.js:

class EndScene extends Phaser.Scene {
  constructor() {
    super({ key: 'EndScene' })
  }

  preload() {
    this.load.image('end', 'https://content.codecademy.com/courses/learn-phaser/BOB/Game%20over.png');
  }

  create() {
    screen = this.add.image(0, 0, 'end').setOrigin(0);
    score = 0;

    // Add code to reset global variables


    // Reset sprite positions
    gameState.numCoordinates = {};

    this.input.keyboard.on('keydown', () => {
      this.scene.stop('EndScene');
      this.scene.start('GameScene');
    });
  }
}

Please let me know what I am doing wrong! I try to play the game and after I “press any key to begin”, it just takes me to the gray screen. I have disabled ad blocker, refreshed my cache, all of that. I am at a loss why this isn’t working.

Hello, you should check your browser’s console to check for errors.

Click to review how to open the browser's console

Shift + CTRL + J (Windows / Linux)
or
Option + + J (Mac)

Alternatively, you can press F12 and click on the Console tab.

What’s happening is that when Phaser calls your update() method an error is occurring so it halts your script. The error message in the console will help you troubleshoot. If you look at it carefully, it will spell out exactly what’s wrong.

Click here if you need another hint

The console will show “Uncaught ReferenceError: gamestate is not defined” along with information about the file and line number “GameScene.js:110”

It says gamestate is not defined. What have you been calling it throughout the rest of your program?

Be sure to fix both. If you only fix the first one, it’ll error on the next one too with the same error but will reference the next line number.

Hi there, thank you so much for your reply. I appreciate it. Unfortunately I still have no idea what any of that means or how to fix it. I don’t know what I’ve been calling gamestate because the instructions never said to call gamestate anything. The instructions said to add gameState.player.x to Bob’s X coordinate and gameState.player.y to Bob’s Y coordinate but that is literally the only thing it says about gamestate. I’m sorry but I just don’t know what you mean at all, this is a terrible project because the instructions barely have me do anything and yet there is so much that doesn’t work. None of this was taught yet so how am I supposed to understand it?

These are some examples from your code where you’re using gameState

const gameState = {
  numCoordinates: {},
};

    gameState.player.setCollideWorldBounds(true);
    gameState.player.body.collideWorldBounds = true;

    gameState.player.setCollideWorldBounds(true);
    gameState.player.body.collideWorldBounds = true;

      gameState.player.flipX = false;
      gameState.player.setTexture('bob-back');
      gameState.player.setVelocityX(0);
      gameState.player.setVelocityY(-150 * speed);

Every one of those you used the name gameState

Now look at how you used it in your update() method:

   //              ----v
 const bobXCoord = gamestate.player.x;
 const bobYCoord = gamestate.player.y;
   //              ----^

gamestate is not the same as gameState. They are completely different things in JavaScript since it’s case-sensitive.

That’s why the error was “Uncaught ReferenceError: gamestate is not defined”

You need to change gamestate to gameState in your update() method

1 Like

Thank you. That helped! I was able to get the game to start by fixing that. However, now I am having another issue. The game starts up and I can move the character around for a few seconds, but then everything freezes. It doesn’t go to the end game screen or anything, it just freezes in place. I can no longer control the character or anything.

Yes, your gray screen has been solved, but you still have another issue with referring to a variable with the wrong name because of the letter casing. It’s not the gameState this time.

Look in your browser’s console to get the error message that appears after it freezes. What does the error say? (I put instructions for how to access the console in my first post).