Phaser.js display issues

Does anyone else notice issues with some of the phaser.js projects? For instance, I am on Cube Matcher, and after the 5th step, the game window is just a blank, white display. This is despite verifying I’ve got the correct code. I’ve noticed problems with most of the other phaser.js projects as well. I’m not quite sure what to do. I’m using google chrome. I’m wondering if anyone else has seen issues here?

Hey,

Can you share your code that gives you a blank display?

 makeBoard(size) {
    // A nested array, inner arrays represent empty columns
    const board = Array(size).fill(Array(size).fill('x'));
    
    // Add code to fill board array with cube sprites and return it
    **return board.map((col, i) => {**
**      return board.map((row, j) => {**
**        return this.makeCube(i, j);**
      }
    });
  }

The instructions indicate I had to iterate over each column w/ the 2 parameters of row and j. the next step instructed me to return this.makeCube(i, j). Then I saved my code and was told I would see a board filled with colored cubes. But now the game window is blank and white.

So to me this seems like it’s either the iteration, the mapping, or the makeCube() function.

  • Did you confirm that the iteration works as you want (maybe with a test model)?

  • Maybe the way it’s iterated also makes a difference… (I know for-loop vs forEach has its quirks).

  • Lastly, you can try to verify if your board.map and makeCube are working by trying to make a 2,2 cube or something simple.

I do believe this isn’t an issue with the code, but either with my browser, or codecademy. If i open up a working version of Cube Matcher (they provide the link), the game works. If i take the GameScene.js from there and paste it into the exercise window for argument’s sake, I run the game and it’s not being displayed correctly. If I verify my code with that of the answer key provided in the forums, and implement the changes, there’s still an issue. It’s something I’ve noticed with other Phaser.js games in this course. So I am not sure what to do. I haven’t been getting a good experience with this course and am disappointed.

Let me see if there are any known bugs…

Thanks for the help! I’m pretty stumped. I’ve resorted to just going through the instructions step by step, and then comparing to the answer key. Not able to truly see whether there are errors in my code or if it is correct, so I’m losing out on the experience.

If it helps, troubleshooting and what to do then is a huge part of the experience in my view. Things break all the time, systems won’t always be well documented.

I’ll give a personal example: A few months ago I went through a python book that gives small project code and breaks it down. The problem is the code wouldn’t run! So I gave it up then. Later, as I did my own projects, I learned that for code to run it needs to have the same exact environment as when it was created (learned as a result of having to transport a project from mac to linux server)…

Which of course was the issue with me learning the code from the book… the book code runs on a particular version of python and if I want to run that code I need to set an virtual environment with that same version of python.

Maybe it took a long time to come to that realization, but it’ll be harder to forget, and easier to appreciate the detail of the necessity for reproducible environments.

That’s a valuable perspective! Much appreciated, and noted. I’ve attempted all I think I’m capable of doing as far as troubleshooting. Stumped as to why these completed game projects operate fine when I open up the hyperlink provided by Codecademy at the onset of the project, but don’t operate in the exercise/editor platform. I’ll probably just contact some tech support for more insight.