Game won't run in Safari 5.1.7 (Windows 10)

Phaser 3
1

Hi!

I finished writing my first Phaser game and it’s running fine… in Chrome!

I just tried it in Safari and everything I get is a white screen. In the console I don’t see any error message.

This is my main game.js code:

import SceneInit from './SceneInit.js';
import SceneNewGame from './SceneNewGame.js';
import SceneHelp from './SceneHelp.js';
import SceneLevels from './SceneLevels.js';
import SceneClassroom from './SceneClassroom.js';
import ScenePlay from './ScenePlay.js';
import SceneMenu from './SceneMenu.js';
import SceneQuiz from './SceneQuiz.js';
import SceneMathTest from './SceneMathTest.js';
import SceneCongratulations from './SceneCongratulations.js';

// Our game scene
var sceneInit = new SceneInit();
var sceneNewGame = new SceneNewGame();
var sceneHelp = new SceneHelp();
var sceneLevels = new SceneLevels();
var sceneClassroom = new SceneClassroom();
var scenePlay = new ScenePlay();
var sceneMenu = new SceneMenu();
var sceneQuiz = new SceneQuiz();
var sceneMathTest = new SceneMathTest();
var sceneCongratulations = new SceneCongratulations();

var config = {
  type: Phaser.AUTO,
  width: 1024,
  height: 768,
  backgroundColor: 0xff6600,
  physics: {
    default: "arcade",
      arcade: {
      gravity:{y:0},
      debug: false,
    }        
  },
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
    width: 1024,
    height: 768
  },
};

game = new Phaser.Game(config);

// load scenes
game.scene.add('sceneInit', sceneInit);
game.scene.add('sceneNewGame', sceneNewGame);
game.scene.add('sceneHelp', sceneHelp);
game.scene.add('sceneLevels', sceneLevels);
game.scene.add('sceneClassroom', sceneClassroom);
game.scene.add('scenePlay', scenePlay);
game.scene.add('sceneMenu', sceneMenu);
game.scene.add('sceneQuiz', sceneQuiz);
game.scene.add('sceneMathTest', sceneMathTest);
game.scene.add('sceneCongratulations', sceneCongratulations);
RetrieveCookies();

// start title
game.scene.start('sceneInit');

I tried changing from AUTO to CANVAS and WebGL and got no changes.

After some tests I suspect that it is loading all the JS files but is not running game.JS. I put the following line at the end of the game.JS:

console.log('foo');

However it didn’t display anything in the Safari console window.

Ideas?

2

UPDATE: I believe that the problem is that I am trying to use a very early version of Safari (2012) and since then it didn’t have any new version for Windows. However my client that is in a Mac told me that the game is not working for him either. He is getting an error message:

[Error] SyntaxError: Unexpected identifier ‘Â’. Expected a ‘:’ following the property name ‘Â’.
promiseReactionJob

I would like to know how Windows developers deal with such issue. Thanks!

3

You can’t use Safari on Windows anymore. It’s so old it’s pointless to even try using it, and it absolutely cannot handle modern JavaScript, or import statements, or anything useful really. I would just uninstall it.

The error your client is getting almost sounds like you’ve used a non-alphabetic character for a property name. Have you? It would have told the client which line the error is on. Get them to send that to you, then look at that line of code and see what it is. No-one here can really help with this further until you’ve narrowed down the cause. However, Phaser doesn’t use Promises internally, so I suspect the issue isn’t even coming from it.

4

I figure this out and will share the solution in case of someone get stuck with the same thing.

The issue was in charset encoding so Safari was replacing all blank spaces of JS files with the character Â. It was caused because I forgot to set it in the HTML and since Mozilla browsers seem to use UTF-8 as default (when you don’t declare it) I never had noticed the problem.

In any case I fixed it by just adding the clause charset=“UTF-8” in the HTML meta tag.

I got the clue that it could be the issue after to find this thread and this other one in GitHub.

:slight_smile: