class Example extends Phaser.Scene {
  preload() {}

  create() {
    const stylea = { font: "15px Arial", fill: "#e2e4e9" };
    const a = this.add.text(200, config.height / 2 - 40, "A", stylea);
    a.setOrigin(0.5, 0.5);

    const styleb = { font: "15px Arial", fill: "#ffffff" };
    const b = this.add.text(600, config.height / 2 - 40, "B", styleb);
    b.setOrigin(0.5, 0.5);

    const graphics = this.add.graphics({ fillStyle: { color: 0x00ff00 } });
    const circle = new Phaser.Geom.Circle(200, config.height / 2 + 0, 5);
    graphics.fillCircleShape(circle);
    this.tweens.add({
      targets: graphics,
      x: 400,
      duration: 3000,
      repeat: -1,
      ease: "Stepped",
      easeParams: [8],
      delay: 1000,
      repeatDelay: 1000
    });

    const graphics3 = this.add.graphics({ fillStyle: { color: 0xffff00 } });
    const circle3 = new Phaser.Geom.Circle(200, config.height / 2 + 15, 5);
    graphics3.fillCircleShape(circle3);
    this.tweens.add({
      targets: graphics3,
      x: 400,
      duration: 3000,
      repeat: -1,
      delay: 1000,
      repeatDelay: 1000
    });

    const graphics2 = this.add.graphics({ fillStyle: { color: 0xff0000 } });
    const circle2 = new Phaser.Geom.Circle(200, config.height / 2 - 15, 5);
    graphics2.fillCircleShape(circle2);
    this.tweens.add({
      targets: graphics2,
      x: 400,
      duration: 3000,
      repeat: -1,
      ease: "Stepped",
      easeParams: [1],
      delay: 1000,
      repeatDelay: 1000
    });
  }
}

const config = {
  type: Phaser.AUTO,
  transparent: true,
  width: 800,
  height: 200,
  scene: Example
};

const game = new Phaser.Game(config);