Is my XAMP erroneous - XAMP install causing grief for my JS Phaser game dev?

Hi
It is not obvious why my Phaser Javascript game dev, XAMP setup isn't correct. or is it?
What problems might these symptoms suggest?

- I have a XAMP server installed on my dev MacBook. It correctly serves up  Color Zap ( code below) - An example by William Clarkson - an online instructor - for a Simple Phaser game learning of pressing colored buttons of the same color as an incoming circle.

He hasn't replied to a recent question, he might be busy, so I thought I'd ask here, since I think it might be simple.

His lessons / vids show implementation of the Phaser methods like this :
which are actually at  phasergames . com

class SceneMain extends Phaser.Scene {
    constructor() {
        super('SceneMain');
    }
    preload()
    {
       
    }
    create() {
        console.log("Ready!");
    }
    update() {}
}

Select allOpen in new window

but, an example he used once, called colorzap, which I like very much has differently structured code like this below:
They are both the same interface : preload, create, update, but one is just method names, and the other uses a name and a colon, function keyword, and doesn't extend Phaser.

var StateMain = {

    preload: function () {
        //load images into library  
        game.load.image("red", "images/main/blocks/red.png");
        game.load.image("blue", "images/main/blocks/blue.png");
        game.load.image("green", "images/main/blocks/green.png");
        game.load.image("yellow", "images/main/blocks/yellow.png");

        game.load.spritesheet("rings", "images/main/rings.png", 60, 65, 5);
        game.load.spritesheet("balls", "images/main/balls.png", 35, 35, 5);


    },

    create: function () {

        //VARS
        this.speed = 200;
        this.incSpeed = 20;
        this.maxSpeed = 450;

        score = 0;

        game.physics.startSystem(Phaser.Physics.Arcade);

        this.pointSound = game.add.audio('points');
        this.gameOverSound = game.add.audio("gameOver");

        //BLOCKS
        var red = game.add.image(0, 0, "red");
        var blue = game.add.image(0, 100, "blue");
        var green = game.add.image(100, 0, "green");
        var yellow = game.add.image(100, 100, "yellow");

Select allOpen in new window

Why might they be different? Generational differences? Which is the correct one? Can I use either?

Phaser games . com also uses the second one, not Clarkson's way. half way down the page here
A site called Phaser Games, surely, would demonstrate correct javascript for games? Only the second one's style works on my devices / dev machine. Colorzap (code below) is served correctly to my browsers *and* devices. I'd like to get Clarkson's method working, because he has a great game template in that format. But, I'll accept the other one if necessary.
Did I likely miss a checkmark in the XAMP setup somehow to make one version work, and not the other? It must be only the player's device/comp that matters, never XAMP.

I am busy trying to get his - 'the ultimate game template' example working, but what should I be looking for as causes for these problems? This template is structured like Clarkson's example code. But, I can use Colorzap as a template, just as easily.

What is the implementation style of Phaser of these two examples that will be expected as I get nearer to putting my game out there? - to work on comp, device, all? What alterations to his example below would make it correct?

colorZap copy.zip

Thanks