Question

I am making a html game with phaser 3

I keep getting an error at line 53 of this code (expected ;) I have marked the line that needs to be fixed. whenever I add ; my whole code crashes

const { Phaser } = require("./phaser.min");

var game;

var gameOptions = {

    tileSize: 200,

    tileSpacing: 20,

    boardSize: {

    rows: 4,

    cols: 4

    }

   }   

window.onload = function() {

    var gameConfig = {

        width: gameOptions.boardSize.cols * (gameOptions.tileSize +

            gameOptions.tileSpacing) + gameOptions.tileSpacing,

         height: gameOptions.boardSize.rows * (gameOptions.tileSize +

            gameOptions.tileSpacing) + gameOptions.tileSpacing,            

        backgroundColor: 0xecf0f1,

        scene: [bootGame, playGame]

    }

     game = new Phaser.Game(gameConfig);

    window.focus();

    resizeGame();

    window.addEventListener("resize", resizeGame);

   }

   //there's a whole new function below this comment

   function resizeGame() {

    var canvas = document.querySelector("canvas");

    var windowWidth = window.innerWidth;

    var windowHeight = window.innerHeight;

    var windowRatio = windowWidth / windowHeight;

    var gameRatio = game.config.width / game.config.height;

    if(windowRatio < gameRatio){

    canvas.style.width = windowWidth + "px";

    canvas.style.height = (windowWidth / gameRatio) + "px";

    }

    else{

    canvas.style.width = (windowHeight * gameRatio) + "px";

    canvas.style.height = windowHeight + "px";

    }

   }

   class playGame extends Phaser.Scene{

    constructor(){

    super("PlayGame");

    }

    create(){

        for(var i = 0; i < gameOptions.boardSize.rows; i++){

           for(var j = 0; j < gameOptions.boardSize.cols; j++){

               var tilePosition = this.getTilePosition(i, j);

        this.add.image(tilePosition.x, tilePosition.y, "emptytile");

           }

        }

//problem area line 53 getTilePosition(row, col){

            var posX = gameOptions.tileSpacing * (col + 1) + gameOptions.tileSize *

                (col + 0.5);

            var posY = gameOptions.tileSpacing * (row + 1) + gameOptions.tileSize *

                (row + 0.5);

            return new Phaser.Geom.Point(posX, posY);

        }

    

    

    }

   }

   class bootGame extends Phaser.Scene{

    constructor(){

    super("BootGame");

    }

    preload(){

        this.load.image("emptytile", "assets/sprites/emptytile.png");

    }

    create(){

    console.log("game is booting...");

    this.scene.start("PlayGame");

    }

   }

Answer 1

There is not an extra semicolon. instead there is an extra curly bracket } which is after PlayGame class

just remove that extra bracket } and the code will run perfectly fine

Code :

const {
    Phaser
} = require("./phaser.min");

var game;

var gameOptions = {
    tileSize: 200,
    tileSpacing: 20,
    boardSize: {
        rows: 4,
        cols: 4
    }
}

window.onload = function() {
    var gameConfig = {
        width: gameOptions.boardSize.cols * (gameOptions.tileSize +
            gameOptions.tileSpacing) + gameOptions.tileSpacing,
        height: gameOptions.boardSize.rows * (gameOptions.tileSize +
            gameOptions.tileSpacing) + gameOptions.tileSpacing,
        backgroundColor: 0xecf0f1,
        scene: [bootGame, playGame]
    }
    game = new Phaser.Game(gameConfig);
    window.focus();
    resizeGame();
    window.addEventListener("resize", resizeGame);
}

//there's a whole new function below this comment
function resizeGame() {
    var canvas = document.querySelector("canvas");
    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;
    var windowRatio = windowWidth / windowHeight;
    var gameRatio = game.config.width / game.config.height;
    if (windowRatio < gameRatio) {
        canvas.style.width = windowWidth + "px";
        canvas.style.height = (windowWidth / gameRatio) + "px";
    } else {
        canvas.style.width = (windowHeight * gameRatio) + "px";
        canvas.style.height = windowHeight + "px";
    }
}

class playGame extends Phaser.Scene {
    constructor() {
        super("PlayGame");
    }
    create() {
        for (var i = 0; i < gameOptions.boardSize.rows; i++) {
            for (var j = 0; j < gameOptions.boardSize.cols; j++) {
                var tilePosition = this.getTilePosition(i, j);
                this.add.image(tilePosition.x, tilePosition.y, "emptytile");
            }
        }
        //problem area line 53 getTilePosition(row, col){
        var posX = gameOptions.tileSpacing * (col + 1) + gameOptions.tileSize *
            (col + 0.5);
        var posY = gameOptions.tileSpacing * (row + 1) + gameOptions.tileSize *
            (row + 0.5);
        return new Phaser.Geom.Point(posX, posY);
    }
}

class bootGame extends Phaser.Scene {
    constructor() {
        super("BootGame");
    }
    preload() {
        this.load.image("emptytile", "assets/sprites/emptytile.png");
    }
    create() {
        console.log("game is booting...");
        this.scene.start("PlayGame");
    }
}