Create a HTML5 game like Space is Key using Phaser, tweens and ARCADE physics – step 4: adding background and colors

So we have our Space is Key game buikt with Phaser 2.6.2 though three steps: first we created the floors and make the player run and jump, then we added deadly obstacles to be avoided as well as some level design concepts and in 3rd step we made the player die with a particle explosion when the square hits an obstacle.

Now we are adding colors to the game as well as backgrounds. And guess what, we’ll make it while continuing to use just the same graphic resource. I also added a couple of new floors:

Click or tap to jump, now each floor has its own randomly picked colors thanks to removeRandomItem method, you can find a full list of Phaser array utilities in the post understanding Phaser array utilities using ArrayUtils class, have a look at it if you didn’t already, it’s full of useful information.

The commented source code with the new lines highlighted is here:

There is still something to do, but that’s all at the moment, download the source code of the entire project and try to create your own levels.