class Example extends Phaser.Scene {

  preload() {

    this.load.image("pig", "https://assets.codepen.io/9367036/pig.png");

    this.load.image("chicken", "https://assets.codepen.io/9367036/chicken.png");

    this.load.image("ball", "https://assets.codepen.io/9367036/boulder.png");

  }

​

  create() {

    // Chemins vectoriels

    this.pigPath = new Phaser.Curves.Path(150, 100).lineTo(300, 300);

    this.chickenPath = new Phaser.Curves.Path(650, 200).circleTo(100);

​

    // Position de départ sur le chemin à l'instant 0

    const pigStartPoint = this.pigPath.getPoint(0);

    const chickenStartPoint = this.chickenPath.getPoint(0);

​

    // Création du cochon

    this.pig = this.physics.add

      .image(pigStartPoint.x, pigStartPoint.y, "pig")

      .setScale(0.5)

      .setImmovable(true);

    this.pig.body.allowGravity = false;

    this.pig.body.setCircle(70);

​

    // Création du poulet

    this.chicken = this.physics.add

      .image(chickenStartPoint.x, chickenStartPoint.y, "chicken")

      .setScale(0.5);

    this.chicken.body.allowGravity = false;

    this.chicken.body.setCircle(70);

​

    // Traits (facultatif)

    const graphics = this.add.graphics();

    graphics.lineStyle(3, 0xffffff, 0.1);

    this.pigPath.draw(graphics);

    this.chickenPath.draw(graphics);

​

    // Vitesse basée sur le temps d'animation

    const pigTweenDuration = 1000;

    const chickenTweenDuration = 2000;

    this.pigSpeed = this.calculateSpeed(this.pigPath, pigTweenDuration);

    this.chickenSpeed = this.calculateSpeed(

      this.chickenPath,

      chickenTweenDuration

    );

​

    // Balles (facultatif)

    this.balls = this.physics.add.group({

      key: "ball",

      repeat: 20,

      setXY: { x: 100, y: 100, stepX: 10 }

    });

    this.balls.children.iterate(function (ball) {

      ball.setBounce(1);

      ball.setCollideWorldBounds(true);

      ball.setVelocity(

        Phaser.Math.Between(-500, 500),

        Phaser.Math.Between(-500, 500)

      );

      let radius = ball.width / 2;

      ball.body.setCircle(radius);

    });

    this.physics.add.collider(this.balls, this.pig);

    this.physics.add.collider(this.balls, this.chicken);

​

    // Animations

    // Ce qu'on anime ici c'est plus un index temporel. Un moment de l'animatin entre 0 (début) et 1 (fin)

    this.pigT = { value: 0 };

    this.tweens.add({

      targets: this.pigT,

      value: 1,

      duration: pigTweenDuration,

      ease: "Linear",

      yoyo: true,

      repeat: -1

    });

    this.chickenT = { value: 0 };

    this.tweens.add({

      targets: this.chickenT,

      value: 1,

      duration: chickenTweenDuration,

      ease: "Linear",

      repeat: -1

    });

  }

​

  update(time, delta) {

    // Cochon

    const desiredPigPosition = this.pigPath.getPoint(this.pigT.value);

    const pigDirection = new Phaser.Math.Vector2(

      desiredPigPosition.x - this.pig.x,

      desiredPigPosition.y - this.pig.y

    ).normalize();

    this.pig.body.setVelocity(

      pigDirection.x * this.pigSpeed,

      pigDirection.y * this.pigSpeed

    );

​

    // Poulet

    const desiredChickenPosition = this.chickenPath.getPoint(

      this.chickenT.value

    );

    const chickenDirection = new Phaser.Math.Vector2(

      desiredChickenPosition.x - this.chicken.x,

      desiredChickenPosition.y - this.chicken.y

    ).normalize();

    this.chicken.body.setVelocity(

      chickenDirection.x * this.chickenSpeed,

      chickenDirection.y * this.chickenSpeed

    );

  }

​

  calculateSpeed(path, duration) {

    const length = path.getLength();

    const durationInSeconds = duration / 1000;

    return length / durationInSeconds;

  }

}

​

const config = {

  type: Phaser.AUTO,

  transparent: true,

  width: 800,

  height: 400,

  physics: {

    default: "arcade",

    arcade: {

      debug: false

    }

  },

​

  scene: Example

};

​

const game = new Phaser.Game(config);

​