Business Outfitted Bob - Bob not showing

Hello. I’m doing the project Business Outfitted Bob with Phaser.js. I’m on step 10, but there is a big problem “bob” isn’t showing. The area where bobs sprite shows is pure white. There is nothing showing. Ive logged out , cleared my cache and cookies but its still not showing anything. Please help. ps(i just put bug-invaders because Business Outfitted Bob is not showing up as a project)

1 Like

It will be hard to help without knowing a few more details. Could you provide a link to the lesson, maybe copy and paste your code here? or a screenshot of the problem?


As you can see the white square to the right is completely blank.

ok. I dont know what i did wrong, i followed the steps in order and everything yet it did this. I decide to restart the project and he reappeared to the side. Idk what i did wrong but I’m just glad its working now.

ok never mind. Whenever i add the code to move him the the arrows he disperses.
const rightArrow = cursors.right.isDown;

const leftArrow = cursors.left.isDown;

const upArrow = cursors.up.isDown:

const downArrow = cursors.down.isDown:


@pup505, have you figured it out? I’m dealing with the same problem.


And me too :frowning:

same exactly- oof why is NoBoDy HeLpInG

I, too, am having the exact same problem. I actually completed all the steps in the project before starting it and all I am getting is a grey box. Most of this project is just setting the score and the cursor controls. I did them correctly, as I’ve seen from others, but there is absolutely nothing on the game screen. I’ll have to continue the course. I’ve had experiences with codecademy projects not working correctly even if the code is 100% correct.

1 Like

Ok it works now. It’s funny. I looked at the solution code and it wasn’t really different. Maybe it was a syntax error? If so I’ll pay more attention next time.

I’m having this same problem when entering this code and I can’t figure out why.
Anyone figure it?

Have you checked to make sure your equal signs in your IF statements are comparative operators and are not reassigning values to your arrow variables? So ‘==’ instead of ‘=’. I had the same issue but realised it was just because of that, its usually a silly syntax error :sweat_smile:

Yes, I’m also getting the gray box. As soon as I started the lesson, before making any changes to the code myself, I also got a gray box. Maybe a problem on CodeAcademy’s end

if (variable <== 15 || >== 75) { // won’t work

if (variable <== 15 || variable >== 75) { // will work


if (bobXCoord <= 32 || bobXCoord >= 448) {



if (bobYCoord <= 32 || bobYCoord >= 568) {



Hi, Had the same problem

  1. Don’t forget those … semicolumns
  2. rightArrow and others need to be declared as LET, not CONS as they are intended to change

Working snippet:

[codebyte language = javascript]
const cursors = this.input.keyboard.createCursorKeys();

// Add variables that store if a specific arrow key is being pressed

let rightArrow = cursors.right.isDown;

let leftArrow = cursors.left.isDown;

let upArrow = cursors.up.isDown;

let downArrow = cursors.down.isDown;

if (rightArrow){



else if (leftArrow){



else if (upArrow){



else if (downArrow){




Try to declare let not cons

Where were you able to find the solution code? I’m actually having this exact problem right now and can’t for the life of me figure out what’s wrong.

I am not sure if this helps anyone, but I will post it here in case it does. I was having the same issue too about the screen only showing a grey box after pressing any key to continue.

What I noticed is I seemed to have misunderstood the code behind const rightArrow = cursors.right.isDown;

While trying to understand console.log(), I got into the habit of thinking that there always needs to be a parenthesis after this format of code so you could add a parameter. const cursors = this.input.keyboard.createCursorKeys(); proved that for me.

In other words, this is the incorrect formatting:

    // Arrow keys that will move Bob in 4 directions
    const cursors = this.input.keyboard.createCursorKeys();
    // Add variables that store if a specific arrow key is being pressed
    const rightArrow = cursors.right.isDown();

While this showed Bob just fine:

    // Arrow keys that will move Bob in 4 directions
    const cursors = this.input.keyboard.createCursorKeys();
    // Add variables that store if a specific arrow key is being pressed
    const rightArrow = cursors.right.isDown;

This is the same for const bobXCoord = gameState.player.x(); that you have to fill out later. You need to take out the parenthesis in order for the game to run smoothly.

I know I still have a hard time figuring out when the parenthesis are/aren’t needed, so if anyone has any tips on understanding that, I’d personally appreciate it. Otherwise, I have more studying to do!

In the meantime, I hope this helped! :grin:

Hey there!

So having (or not having) the parenthesis is the difference between it being a function, which you call, and a property storing a value, which you access. While the actual Phaser code is likely little complex, I’ll try to come up with a simpler example:

// An object representing a dog
const dog = {
  age: 2,
  breed: "Labrador",
  ownerName: "Lyall",
  bark: function() {
 sayName: function(name) {
   console.log(`I am ${name}`)

So in the above example, age, breed and ownerName are all called properties (i.e a variable stored inside of an object or a class) and we do not need the parenthesis to access those, so we can access dog.age, dog.breed etc. Now since bark is a little different, and is a function, we want to call it to execute it’s contents, which requires the parenthesis to run the function, so to execute the above example we would want to use dog.bark().

If we pass any values into the function when we call it, then those would go between the parenthesis, so we could say dog.sayName("bob"), which would log “I am bob” to the console.

As a little aside, accessing the function without using the brackets is still valid syntax, and doesn’t throw an error, but the difference is that using () calls the function (i.e executes the code inside of it), while not using them references the function, and will give you something like [Function: bark] in response instead of executing the actual code, which in the vast majority of cases isn’t what you want.

Hope that helps! :slight_smile:

1 Like

I had the same issue. My problem was that I created a new “update()” right above the conditionals In steps 10 -13. I just deleted it and it worked fine.