Why does phaser give me a black canvas? How do I fix it?

[jaimeggb]

As you can see in this screen capture, phaser is giving me a black canvas

My phaser code, which has been obtained from this tutorial: ‘Initialize the framework - Game development | MDN’, is:

var game = new Phaser.Game(480, 320, Phaser.AUTO, null, {preload: preload, create: create, update: update});

var ball;

function preload() {
    handleRemoteImagesOnJSFiddle();
    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    game.scale.pageAlignHorizontally = true;
    game.scale.pageAlignVertically = true;
    game.stage.backgroundColor = '#eee';
    game.load.image('ball', 'img/ball.png');
}
function create() {
    ball = game.add.sprite(50, 50, 'ball');
}
function update() {}

// this function (needed only on JSFiddle) take care of loading the images from the remote server
function handleRemoteImagesOnJSFiddle() {
	game.load.baseURL = 'https://end3r.github.io/Gamedev-Phaser-Content-Kit/demos/';
	game.load.crossOrigin = 'anonymous';
}

According to the tutorial, my canvas should look like this instead:

My full REPL is: ‘https://replit.com/@jaimeggb/2D-breakout-game-using-Phaser’

You are welcome to fork it to see if you can spot if the problem is with Phaser or with my REPL

Thanks for your time

Jaime

P.S. Do you know what other forum I could ask this in? Perhaps one in which people use phaser and replit frequently?

[lasjorg]

Switch to the version of the library they are using in the tutorial (V2 and not V3). I would also suggest you remove the package version (not that you seem to be using it) and just use the CDN script.

https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js

As an aside, whenever you see a library bump the major version number there are very likely to be breaking changes.