iHanoi/js/phaserConfig.js

var towerA = [],
    towerB = [],
    towerC = [];
var diskQntity = 3,
    nMoves, nCurrentMoves = 0,
    minimumMoves = Math.pow(2, diskQntity) - 1;
var textsFont = { fontFamily: 'Arial', fontSize: 50, color: '#5cff5c' };
var gameWonMsg, nMoves;
var redoButton, undoButton, restartButton, diskSelectorButton;
var scene, tween;
var wrongMoveSprite; 
var outputMsgBox;

class sceneGame extends Phaser.Scene {
    constructor() {
        super({ key: 'sceneGame' });
    }

    preload() {
        scene = this;
        this.load.image('sky', 'assets/sky.png');
        this.load.image('acoesBox', 'assets/acoes.png');
        //this.load.image('base', 'assets/baseText.png');
        this.load.image('torre', 'assets/torre.png');
        this.load.image('selectionArea', 'assets/selectionArea.png');
        //buttons
        this.load.image('redo', 'assets/redo2.png');
        this.load.image('redoDisabled', 'assets/redoDisabled2.png');

        this.load.image('msgBox', 'assets/msgBox.png')

        this.load.image('undo', 'assets/undo2.png');
        this.load.image('undoDisabled', 'assets/undoDisabled2.png');

        this.load.image('restart', 'assets/restart.png');

        this.load.image('wrongMove', 'assets/wrongMove.png');

        //Only loads disk selection if its the teacher using
        try {
            if (iLMparameters.iLM_PARAM_SendAnswer == 'true')
                this.load.image('diskSelector', 'assets/diskSelector.png');
            console.log("iAssign version");
        } catch (e) {
            this.load.image('diskSelector', 'assets/diskSelector.png');
            console.log("web-version");
        }
        //load all imgs needed for the exercise
        for (var i = 0; i < 6; i++) {

            this.load.image('disk' + i, 'assets/disk' + i + '.png')
            this.load.image('stroked' + i, 'assets/strokedDisks/stroked' + i + '.png')
        }
    }

    create() {
        //misc
        this.add.image(0, 0, 'sky').setOrigin(0).setDisplaySize(1320, 600);


        this.add.sprite(120, 90, 'acoesBox').setDisplaySize(80, 70);
        nMoves = this.add.text(90, 70, 0, textsFont);

        this.add.text(135, 530, 'Torre A', {fontFamily: 'Arial', fontSize: 50, color: '#4c0fbd'} );
        this.add.text(570, 530, 'Torre B', {fontFamily: 'Arial', fontSize: 50, color: '#4c0fbd'} );
        this.add.text(1005, 530, 'Torre C', {fontFamily: 'Arial', fontSize: 50, color: '#4c0fbd'} );
        
        //buttons
        redoButton = this.add.sprite(720, 90, 'redoDisabled').setDisplaySize(80, 70); //.setInteractive({useHandCursor: false});
        redoButton.on('pointerdown', function(pointer) {
            redoMove();
        });
        undoButton = this.add.sprite(600, 90, 'undoDisabled').setDisplaySize(80, 70); //.setInteractive({useHandCursor: false});
        undoButton.on('pointerdown', function(pointer) {
            undoMove();
        });

        restartButton = this.add.sprite(990, 90, 'restart').setDisplaySize(80, 60).setInteractive({ useHandCursor: true });
        restartButton.on('pointerdown', function(pointer) {
            restart();
        });

        diskSelectorButton = this.add.sprite(1200, 90, 'diskSelector').setDisplaySize(80, 70).setInteractive({ useHandCursor: true });
        diskSelectorButton.on('pointerdown', function(pointer) {
            this.scene.start('sceneDiskSelection');
        }, this);


        //Towers
        this.add.image(219, 320, 'torre').setScale(0.13);
        this.add.image(654, 320, 'torre').setScale(0.13);
        this.add.image(1089, 320, 'torre').setScale(0.13);

        //Disks
        var diskX = 220,
            diskY = 430;
        for (var i = diskQntity - 1; i >= 0; i--) {
            towerA[diskQntity - 1 - i] = this.add.sprite(diskX, diskY, 'disk' + i).setScale(0.13); //.setDisplaySize(diskWidth, diskHeight);
            diskY -= 28;
        }

        //towerA Selection Area
        var towerASelectionArea = this.add.sprite(220, 375, 'selectionArea').setDisplaySize(400, 320).setInteractive({ useHandCursor: true });
        towerASelectionArea.on('pointerdown', function(pointer) {
            selectA();

        });
        towerASelectionArea.alpha = 0.1;

        //towerB selectionArea
        var towerBSelectionArea = this.add.sprite(655, 375, 'selectionArea').setDisplaySize(400, 320).setInteractive({ useHandCursor: true });
        towerBSelectionArea.on('pointerdown', function(pointer) {
            selectB();
        });
        towerBSelectionArea.alpha = 0.1;


        var towerCSelectionArea = this.add.sprite(1090, 375, 'selectionArea').setDisplaySize(400, 320).setInteractive({ useHandCursor: true });
        towerCSelectionArea.on('pointerdown', function(pointer) {
            selectC();
        });
        towerCSelectionArea.alpha = 0.1;

        wrongMoveSprite = this.add.sprite(220, 300, 'wrongMove').setDisplaySize(100, 100).setAlpha(0);



        outputMsgBox = this.add.sprite(655, 310, 'msgBox').setDisplaySize(550,180);
        outputMsgBox.alpha = 0;

        gameWonMsg = this.add.text(450, 255, ' ', { fontFamily: 'Arial', fontSize: 22, color: '#00a600', align: 'center' });
        

    }

    update() {}
    event() {
        console.log('over');
    }
}


class sceneDiskSelection extends Phaser.Scene {
    constructor() {
        super({ key: 'sceneDiskSelection' });
    }

    preload() {
        this.load.image('sixDisks', 'assets/diskSelection/sixDisks.png');
        this.load.image('fiveDisks', 'assets/diskSelection/fiveDisks.png');
        this.load.image('fourDisks', 'assets/diskSelection/fourDisks.png');
        this.load.image('threeDisks', 'assets/diskSelection/threeDisks.png');
        this.load.image('twoDisks', 'assets/diskSelection/twoDisks.png');
    }

    create() {
        this.add.image(0, 0, 'sky').setOrigin(0).setDisplaySize(1320, 600);

        var sixDisksButton = this.add.sprite(850, 450, 'sixDisks').setDisplaySize(200, 200).setInteractive({ useHandCursor: true });
        sixDisksButton.on('pointerdown', function(pointer) {
            selectDisks(6, this);
        }, this);

        var fiveDisksButton = this.add.sprite(450, 450, 'fiveDisks').setDisplaySize(200, 200).setInteractive({ useHandCursor: true });
        fiveDisksButton.on('pointerdown', function(pointer) {
            selectDisks(5, this);
        }, this);

        var fourDisksButton = this.add.sprite(1050, 200, 'fourDisks').setDisplaySize(200, 200).setInteractive({ useHandCursor: true });
        fourDisksButton.on('pointerdown', function(pointer) {
            selectDisks(4, this);
        }, this);

        var threeDisksButton = this.add.sprite(650, 200, 'threeDisks').setDisplaySize(200, 200).setInteractive({ useHandCursor: true });
        threeDisksButton.on('pointerdown', function(pointer) {
            selectDisks(3, this);
        }, this);

        var twoDisksButton = this.add.sprite(250, 200, 'twoDisks').setDisplaySize(200, 200).setInteractive({ useHandCursor: true });
        twoDisksButton.on('pointerdown', function(pointer) {
            selectDisks(2, this);
        }, this);
    }
}

var config = {
    type: Phaser.AUTO,
    scale: {
        mode: Phaser.Scale.FIT,
        width: 1320,
        height: 600
    },
    scene: [sceneGame, sceneDiskSelection]
        //  canvas: doocument.querySelector('mainDiv');
};

var game = new Phaser.Game(config);