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.