class Example extends Phaser.Scene {

  constructor() {

    super({ key: "Example" }); // Initialise la scène avec la clé "Example"

  }

​

  create() {

    // Monde

    this.worldWidth = config.width * 2;

    this.worldHeight = config.height * 2;

    this.physics.world.setBounds(

      this.worldWidth / -2,

      this.worldHeight / -2,

      this.worldWidth,

      this.worldHeight

    );

​

    // Background

    this.drawGraph();

​

    // Personnage

    this.playerSpeed = 200;

    this.player = this.add.circle(400, 200, 10, 0xffff00);

    this.physics.add.existing(this.player);

    this.player.body.setCollideWorldBounds(true);

​

    // Caméra

    this.cameras.main.setBounds(

      this.worldWidth / -2,

      this.worldHeight / -2,

      this.worldWidth,

      this.worldHeight

    );

    this.cameras.main.startFollow(this.player, true, 0.1, 0.1);

    this.cross = this.add.graphics();

    this.drawCross();

​

    // Controles

    this.keys = this.input.keyboard.addKeys({

      up: Phaser.Input.Keyboard.KeyCodes.W,

      left: Phaser.Input.Keyboard.KeyCodes.A,

      down: Phaser.Input.Keyboard.KeyCodes.S,

      right: Phaser.Input.Keyboard.KeyCodes.D

    });

  }

​

  update() {

    this.player.body.setVelocity(0);

​

    // Déplacement horizontal

    if (this.keys.left.isDown) {

      this.player.body.setVelocityX(-this.playerSpeed);

    } else if (this.keys.right.isDown) {

      this.player.body.setVelocityX(this.playerSpeed);

    }

​

    // Déplacement vertical

    if (this.keys.up.isDown) {

      this.player.body.setVelocityY(-this.playerSpeed);

    } else if (this.keys.down.isDown) {

      this.player.body.setVelocityY(this.playerSpeed);

    }

​

    this.drawCross();

  }

​

  drawGraph() {

    // Style de ligne

    const lineStyle = { color: 0xffffff, width: 1 };

    let graphics = this.add.graphics(lineStyle);

​

    // Lignes verticale blanche

    for (let x = this.worldWidth / -2; x <= this.worldWidth / 2; x += 100) {

      for (

        let subX = x + 25;

        subX < x + 100 && subX <= this.worldWidth;

        subX += 25

      ) {

        graphics.lineStyle(1, 0x666666);

        graphics.beginPath();

        graphics.moveTo(subX, this.worldHeight / -2);

        graphics.lineTo(subX, this.worldHeight / 2);

        graphics.strokePath();

      }

    }

​

    // Lignes horizontales blanche

    for (let y = this.worldHeight / -2; y <= this.worldHeight / 2; y += 100) {

      for (

        let subY = y + 25;

        subY < y + 100 && subY <= this.worldHeight;

        subY += 25

      ) {

        graphics.lineStyle(1, 0x666666);

        graphics.beginPath();

        graphics.moveTo(this.worldWidth / -2, subY);

        graphics.lineTo(this.worldWidth / 2, subY);

        graphics.strokePath();

      }

    }

​

    // Lignes noires verticales

    for (let x = this.worldWidth / -2; x <= this.worldWidth / 2; x += 100) {

      graphics.lineStyle(2, 0x000000);

      graphics.beginPath();

      graphics.moveTo(x, this.worldHeight / -2);

      graphics.lineTo(x, this.worldHeight / 2);

      graphics.strokePath();

    }

​

    // Lignes noires horizontales

    for (let y = this.worldHeight / -2; y <= this.worldHeight / 2; y += 100) {

      graphics.lineStyle(2, 0x000000);

      graphics.beginPath();

      graphics.moveTo(this.worldWidth / -2, y);

      graphics.lineTo(this.worldWidth / 2, y);

      graphics.strokePath();

    }

​

    // Labels X

    for (let i = this.worldWidth / -2; i <= this.worldWidth / 2; i += 100) {

      this.add

        .text(i, 5, i.toString(), {

          fontSize: "12px",

          fill: "#ffffff",

          backgroundColor: "#000000"

        })

        .setOrigin(0.5, 0);

    }

​

    // Labels Y

    for (let i = this.worldHeight / -2; i <= this.worldHeight / 2; i += 100) {

      this.add

        .text(5, i, i.toString(), {

          fontSize: "12px",

          fill: "#ffffff",

          backgroundColor: "#000000"

        })

        .setOrigin(0, 0.5);

    }

  }

​

  drawCross() {

    this.cross.clear();

    this.cross.lineStyle(2, 0xff0000);

​

    const camCenterX = this.cameras.main.midPoint.x;

    const camCenterY = this.cameras.main.midPoint.y;

​

    this.cross.beginPath();

    this.cross.moveTo(camCenterX - 20, camCenterY);

    this.cross.lineTo(camCenterX + 20, camCenterY);

    this.cross.strokePath();

​

    this.cross.beginPath();

    this.cross.moveTo(camCenterX, camCenterY - 20);

    this.cross.lineTo(camCenterX, camCenterY + 20);

    this.cross.strokePath();

  }

}

​

const config = {

  type: Phaser.AUTO,

  width: 800,

  height: 400,

  scene: Example,

  transparent: true,

  physics: {

    default: "arcade",

    arcade: {

      debug: false

    }

  }

};

​

const game = new Phaser.Game(config);

​

activateControls(["W", "A", "S", "D"]);

​