My Javascript Phaser Udemy Game example needs some suggestions to fire-up

James Hancock
James Hancock used Ask the Experts™
on
Hi
In a Udemy video lecture on 'building games with phaser', the instructor is working w the following 'ColorZap' project code zip below..
He is using brackets for an IDE, so so am I:

My XAMPP serves the files correctly, no problem, in Safari.

So, he has a main.js that tries to start the game object.

main.js :
var game;
//var score;
//var soundOn = true;

window.onload = function () {
    if (screen.width > 1500) {
        //desktop laptop
        game = new Phaser.Game(480, 640, Phaser.AUTO, "ph_game");

    } else {
        //mobile device
        game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, "ph_game");
    }
    //add a state or screen to the game
    game.state.add("StateMain", StateMain);
    game.state.add("StateTitle", StateTitle);
    game.state.start("StateTitle");

}

Open in new window


But, the Problems console claims:

"Missing 'use strict' statement    if (screen.width > 1500) {

but most notably: Phaser was used before it was defined. . game = new Phaser.Game(480, 640, Phaser.AUTO, "ph_game");

which puzzles me, because where are the lines of code in his example or way this can work? I wrote the code from the Udemy vid. I can't imagine I left something off.

These project files are attached also. What could I not have done? Where do I define Phaser for it? Is there a  #include equivalent?
A black rectangle appears in the browser to test the code, so I know the size of the program area is being registered properly.

Thanks
colorZap-copy.zip
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
I load your project in the browser and the only issue I get is that StateOver is not defined.

stateOver.js is empty - if I add
StateOver = {
}

Open in new window

To that file - I get a page with a BW image of a phone with play in portrait mode displayed to the right.

I am not seeing the error you describe.
James HancockSelf Employed

Author

Commented:
Thanks
There are no problems anymore.
So, I saw the title "Color Zap" image flash, and then the "play in portrait mode" banner.
Those are the only two images the demo example has to show, so phaser works, and I'm anticipating that the rest of it will be straightforward now. Do you think games in phaser rival DirectX in many aspects, or is that yet to come?

Another expert advised me to use Chrome in my development. What do you think of that? Surely it must be tested on all browsers. I'll try IE tomorrow.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Do you think games in phaser rival DirectX in many aspects, or is that yet to come?
I have no opinion either way - my expertise is in JavaScript - I am not a games expert.

Chrome for development - personally I don't like it. I have always used Firefox and I don't like it when I find I have to use Chrome - this might be due to personal prejudice and familiarity with FF as many people prefer Chrome.

I do use it for IDE linked debugging though - and there are some Chrome extensions that are useful but for the most part I use FF.
James HancockSelf Employed

Author

Commented:
Thanks, I am cruising ahead
Most Valuable Expert 2017
Distinguished Expert 2018
You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial