WEMOB4_Project/www/js/main.js

//Phaser is a "Game Engine" that is primarily used to create 2d games on the web browser and is one of the mose used

//In my opinion, the documentation is just bad and feels all over the place
//When I'm looking to create a physics object and land on the doc of "Phaser.Physics.Arcade.Factory" to create a physics objects
//and try to use this in my code, it wont work since Im supposed to use "this.physics.add" but it doesnt get explicitly explained in that doc

//Basically, it doesnt tell you at all, how to use the code they documentated
//The tutorial on the website also doesnt even explain this properly and like also other tutorials on youtube, it is always like "this code does that"
//but I dont find one that explains how phaser actually works in the background and how to use their documentations properly

//If i compare this to Unity, the documentation here is by far worse because its not "straight-forward" but spaghetti
//Even Unreal Engine is easier to understand despite being more complex by far.


//a phaser scene is similar to scenes in unity and levels in unreal engine
//Everything outside this scene can be used as an "Game instance" since those things persist outside of the different scenes
class MyGame extends Phaser.Scene {
  //this function is used to load assets into your game
  constructor(){
    super("scene-game");

    this.cursor;
    this.playerSpeed = 300;
    this.playerStart = {x: 0, y: 0};
    this.playerJumpVelocity = -500;
    this.goalX = 5000;

    this.platforms;

    this.background;

    this.camera;

    this.playerText;

    this.spikes;

    this.moveLeft = false;
    this.moveRight = false;
    this.jumpPressed = false;


    this.test = Phaser.Physics.Arcade.World;

    this.buttonY = 400;

    this.leftBtnX = -400;
    this.leftBtn;
    this.rightBtnX = -280;
    this.rightBtn;
    this.jumpBtnX = 700;
    this.jumpBtn;

  }

  preload() {
    this.load.setBaseURL("./images");

    this.load.image("blackSquare", "blackSquare.png");
    this.load.image("redSquare", "redSquare.png");
    //this.load.image("backgroundSky", "backgroundSky.jpg"); //https://www.vecteezy.com/vector-art/6045799-blue-sky-with-clouds-seamless-pattern


  }

  create() {

    this.physics.world.setBounds(0, 0, 10000, 600); //https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.World#setBounds
    //this.background = this.add.tileSprite(0, 0, this.scale.width, this.scale.height, "backgroundSky");
    //#region  Player settings



    
    //#region Input

    this.input.addPointer(2);

    // Track button states


    // LEFT BUTTON
    this.leftBtn = this.add.rectangle(this.leftBtnX, this.buttonY, 100, 100, 0x0000ff, 1)
      .setInteractive();

    this.leftBtnPlayerDistanceX = this.playerStart.x - this.leftBtnX;
    

    this.leftBtn.on("pointerdown", () => {
      this.moveLeft = true;
    });

    this.leftBtn.on("pointerup", () => {
      this.moveLeft = false;
    });

    this.leftBtn.on("pointerout", () => {
      this.moveLeft = false;
    });

    // RIGHT BUTTON
    this.rightBtn = this.add.rectangle(this.rightBtnX, this.buttonY, 100, 100, 0x00ff00, 0.5)
      .setInteractive();

    this.rightBtnPlayerDistanceX = this.playerStart.x - this.rightBtnX;


    this.rightBtn.on("pointerdown", () => {
      this.moveRight = true;
    });

    this.rightBtn.on("pointerup", () => {
      this.moveRight = false;
    });

    this.rightBtn.on("pointerout", () => {
      this.moveRight = false;
    });

    // JUMP BUTTON
    this.jumpBtn = this.add.rectangle(this.jumpBtnX, this.buttonY, 100, 100, 0xff0000, 0.5)
      .setInteractive();

    this.jumpBtnPlayerDistanceX = this.playerStart.x - this.jumpBtnX;


    this.jumpBtn.on("pointerdown", () => {
      this.jumpPressed = true;
    });

    this.jumpBtn.on("pointerup", () => {
      this.jumpPressed = false;
    });

    this.jumpBtn.on("pointerout", () => {
      this.jumpPressed = false;
    });

    //#endregion








    this.player = this.physics.add.image(this.playerStart.x, this.playerStart.y,"redSquare").setOrigin(0,0); //https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Factory#image
    this.player.setBounce(0); //https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body#setBounce
    this.player.setCollideWorldBounds(false); //https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body#setCollideWorldBounds
    //#endregion


    //#region  Platform settings
    this.platforms = this.physics.add.staticGroup();

    // Add a rectangle to the static group
    var rect = [];
    rect.push(this.add.rectangle(300, 300, 1000, 50, 0xff0000)); // pos x, pos y, width, height, color hex
    rect.push(this.add.rectangle(1300, 600, 100, 50, 0xff0000));
    rect.push(this.add.rectangle(1500, 400, 100, 50, 0xff0000));
    rect.push(this.add.rectangle(2000, 200, 100, 50, 0xff0000));
    rect.push(this.add.rectangle(2600, 300, 100, 50, 0xff0000));
    rect.push(this.add.rectangle(3000, 200, 100, 50, 0xff0000));
    rect.push(this.add.rectangle(3820, 550, 100, 50, 0xff0000));
    rect.push(this.add.rectangle(4350, 590, 500, 50, 0xff0000));


    for (let i = 0; i < rect.length; i++){
      this.physics.add.existing(rect[i], true); //https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Factory#existing
      this.platforms.add(rect[i]);
    }


    this.physics.add.collider(this.player, this.platforms);


    //#endregion

    //#region spikes

    this.spikes = this.physics.add.staticGroup(); //https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Factory#staticGroup
    
    var spikes = [];
    spikes.push(this.add.rectangle(3100, 190, 50, 50, 0x0000ff));

    for (let i = 0; i < spikes.length; i++){
      this.physics.add.existing(spikes[i], true);  // 'true' makes it a static body
      this.spikes.add(spikes[i]);
    }


    this.physics.add.collider(this.player, this.spikes, this.onPlayerSpikeCollision, null, this); //https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Factory#collider


    //#endregion


    //#region Level End


    //#endregion


    //#region Camera
    //(follow Target, round pixel to int, lerpX, lerpY, offsetX, offsetY) //https://newdocs.phaser.io/docs/3.60.0/focus/Phaser.Cameras.Scene2D.Camera-startFollow
    this.cameras.main.startFollow(this.player, false, 1, 0, 0, -100); 

    this.cameras.main.backgroundColor= "black";

    this.cameras.main.setViewport(-config.width / 2, -config.height/2, config.width*2, config.height*2);

    this.cameras.main.zoom = 0.5;

    //#endregion


    //#region HUD

    //this.playerText = this.add.text(10, 10, 'Position: (0, 0)', { fontSize: '16px', fill: '#00FF00' });

    //#endregion

    this.cursor = this.input.keyboard.createCursorKeys();
  }

  update(){

    let onGround = this.player.body.blocked.down;

    //#region Input Manager
    const {left, right, space} = this.cursor;





    if (left.isDown || this.moveLeft){
      console.log("left press");
      this.player.setVelocityX(-this.playerSpeed);
    } else if (right.isDown || this.moveRight){
      console.log("right press");
      this.player.setVelocityX(this.playerSpeed);
    } else {
      this.player.setVelocityX(0);
    }

    if ((space.isDown || this.jumpPressed) && onGround){
      this.player.setVelocityY(this.playerJumpVelocity);
    }

    //#endregion


    //#region Update HUD

    this.leftBtn.setPosition(this.player.x - this.leftBtnPlayerDistanceX, this.buttonY);
    this.rightBtn.setPosition(this.player.x - this.rightBtnPlayerDistanceX, this.buttonY);
    this.jumpBtn.setPosition(this.player.x - this.jumpBtnPlayerDistanceX, this.buttonY);

    //#endregion


    if (this.player.y > this.physics.world.bounds.height){
      this.scene.restart();
      alert("You lost.");
    } else if (this.player.x > this.goalX){
      this.scene.restart()
      alert("You won!");
    }

  }

  onPlayerSpikeCollision(player, spikes){
    this.scene.restart()
    alert("You lost.");
  }
}


const config = {
  type: Phaser.AUTO,
  width: window.innerWidth - 10,
  height: window.innerHeight- 10,
  backgroundColor: "#ffffff", //sets the background color of the scene
  scene: MyGame,
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 500 }
    }
  }
};

console.log(config);

const game = new Phaser.Game(config);