Endless background

[Gurol Ayanlar]

Hello,
I'm new to PixiJS.I'm making an aquarium game. It's like AgarIO.But I'm having trouble making endless backgrounds.I am sharing my game class with you. Please can you help me?

 

class Game {
  constructor() {
    this.foods = {};
    this.players = {};
    this.player = {};
    this.FRAME_MIN_TIME =
      (1000 / 60) * (60 / Constants.FRAMES_PER_SECOND) - (1000 / 60) * 0.5;
    this.LAST_FRAME_TIME = 0;

    this.setup = this.setup.bind(this);
    this.state = this.state.bind(this);
  }

  init() {
    const canvas = document.getElementById("game-area");
    const app = new PIXI.Application({
      width: window.innerWidth,
      height: window.innerHeight,
      view: canvas,
      antialias: true,
      transparent: true,
    });

    // Create game stage
    this.stage = new PIXI.Container();

    this.loader = PIXI.Loader.shared;
    this.loader.add("fishes", "assets/fish.json").load(this.setup);

    // Create game world
    this.world = new PIXI.Container();
    this.stage.addChild(this.world);

    this.renderer = app.renderer;
  }

  setup() {
    this.sheet = this.loader.resources["fishes"].spritesheet;
  }

  newFood(data) {
    Object.keys(data).forEach((key) => {
      const food = new Food(
        data[key].x,
        data[key].y,
        data[key].mass,
        data[key].color,
        data[key].id
      );
      this.foods[food.id] = food;
      this.world.addChild(food);
    });
  }

  start(data) {
    // Create player object
    let playerAnimated = new PIXI.AnimatedSprite(this.sheet.animations["fish"]);
    let playerEyes = new PIXI.Sprite(this.sheet.textures["goz.png"]);

    this.player = new Player(
      this.renderer.width / 2,
      this.renderer.height / 2,
      data.id,
      data.nickname,
      playerAnimated,
      playerEyes,
      data.score
    );
    this.players[data.id] = this.player;
    this.world.addChild(this.player);

    this.stage.interactive = true;

    requestAnimationFrame(this.state);
  }

  state(delta) {
    if (delta - this.LAST_FRAME_TIME < this.FRAME_MIN_TIME) {
      requestAnimationFrame(this.state);
      return;
    }
    this.LAST_FRAME_TIME = delta;

    const target = this.renderer.plugins.interaction.mouse.global;
    
    // Set eyes accross rotation
    target.x - this.player.x < 0
      ? (this.player.playerEyes.anchor.y = -1.5)
      : (this.player.playerEyes.anchor.y = 2.5);


    // Set player rotation
    this.player.rotation = Math.atan2(target.y - this.player.y, target.x - this.player.x);

    // Set renew position accross mouse position
    let dt = 1 - Math.exp(-delta / 100);
    this.player.x += Math.cos(this.player.rotation) * dt * 5;
    this.player.y += Math.sin(this.player.rotation) * dt * 5;

    // Here is endless stage ???????????????

    // Food eating
    Object.keys(this.foods).forEach((key) => {
      if (
        this.distance(this.player.position, this.foods[key].position) <
        40 + this.foods[key].radius * 0.05
      ) {
        this.world.removeChild(this.foods[key]);
        eatFood(key);
        this.player.setScore(1);

        // Get players for server
        let players = {};
        Object.keys(this.players).forEach((key) => {
          players[key] = this.players[key].getData();
        });
        updatePlayers(players);
        updateLeaderboard(players);

        delete this.foods[key];
      }
    });

    requestAnimationFrame(this.state);
    this.renderer.render(this.stage);
  }

  eatFoodByServer(data) {
    this.world.removeChild(this.foods[data]);
    delete this.foods[data];
  }

  updatePlayersByServer(data) {
    // TODO: Update players

    // Update leaderboard
    updateLeaderboard(data);
  }

  distance(first, second) {
    return Math.sqrt(
      (first.x - second.x) * (first.x - second.x) +
        (first.y - second.y) * (first.y - second.y)
    );
  }

  lerp(start, end, percent) {
    return start + percent * (end - start);
  }
}