qmgame/games/fishMaster/scene.js

import Phaser from "phaser";
import bg from "./images/bg.png";
import bottom from "./images/bottom.png";
import bottomMap from "./images/bottom.json";
import { fishFrames, cannonsFrames } from "./assets";

export default class Scene extends Phaser.Scene {
  constructor() {
    super({
      key: "scene",
    });
  }

  preload() {
    this.load.image("bg", bg);
    this.load.atlas("bottom", bottom, bottomMap);
    Object.entries(fishFrames).forEach(
      ([k, { url, frameWidth, frameHeight }]) => {
        this.load.spritesheet(k, url, { frameWidth, frameHeight });
      }
    );
    Object.entries(cannonsFrames).forEach(
      ([k, { url, frameWidth, frameHeight }]) => {
        this.load.spritesheet(k, url, { frameWidth, frameHeight });
      }
    );
  }
  get cannon() {
    return this.cannons[this.cannonIndex];
  }
  create() {
    this.layout();
    this.addListeners();
    this.animateFishes();
    this.animateCannons();
    this.addCannon();
    this.addFish();
  }
  animateCannons() {
    Object.entries(cannonsFrames).forEach(([k, { anims }]) => {
      this.anims.create({
        key: `${k}_fire`,
        frames: this.anims.generateFrameNumbers(k, anims),
        frameRate: 10,
        repeat: 0,
      });
    });
  }
  animateFishes() {
    Object.entries(fishFrames).forEach(([k, { swim, capture }]) => {
      this.anims.create({
        key: `${k}_swim`,
        frames: this.anims.generateFrameNumbers(k, swim),
        frameRate: 10,
        repeat: -1,
      });
      this.anims.create({
        key: `${k}_capture`,
        frames: this.anims.generateFrameNumbers(k, capture),
        frameRate: 10,
        repeat: -1,
      });
    });
  }
  layout() {
    this.addBg();
    this.addBottomBar();
  }
  addListeners() {
    this.input.on(
      "gameobjectdown",
      (_, obj) => {
        switch (obj.name) {
          case "minus":
            obj.setFrame("cannon_minus_down.png");
            break;
          case "plus":
            obj.setFrame("cannon_plus_down.png");
            break;
          default:
            break;
        }
      },
      this
    );
    this.input.on(
      "gameobjectup",
      (pointer, obj) => {
        switch (obj.name) {
          case "minus":
            obj.setFrame("cannon_minus.png");
            break;
          case "plus":
            obj.setFrame("cannon_plus.png");
            break;
          case "bg":
            const theta = Math.atan2(
              this.game.config.height - pointer.y,
              this.game.config.width / 2 - pointer.x
            );
            this.cannon.setRotation(theta - Math.PI / 2);
            this.cannon.anims.play(`${this.cannon.name}_fire`, true);
          default:
            break;
        }
      },
      this
    );
  }
  addBg() {
    const bg = this.add.image(0, 0, "bg");
    bg.name = "bg";
    bg.setOrigin(0);
    bg.displayWidth = this.game.config.width;
    bg.displayHeight = this.game.config.height;
    bg.setInteractive();
  }
  addBottomBar() {
    const bottomBar = this.add.image(
      this.game.config.width / 2,
      this.game.config.height - 45,
      "bottom",
      "bottom-bar.png"
    );
    bottomBar.displayWidth = 958;
    bottomBar.displayHeight = 90;
    const minus = this.add.image(
      this.game.config.width / 2 - 40,
      this.game.config.height - 50,
      "bottom",
      "cannon_minus.png"
    );
    minus.name = "minus";
    minus.setOrigin(0);
    minus.displayWidth = 55;
    minus.displayHeight = 38;
    minus.setInteractive();
    const plus = this.add.image(
      this.game.config.width / 2 + 95,
      this.game.config.height - 50,
      "bottom",
      "cannon_plus.png"
    );
    plus.name = "plus";
    plus.setOrigin(0);
    plus.displayWidth = 55;
    plus.displayHeight = 38;
    plus.setInteractive();
  }
  addFish() {
    Object.entries(fishFrames).forEach(([k, { size, offsets }]) => {
      const fish = this.physics.add.sprite(
        (Math.random() * this.game.config.width) / 2 +
          this.game.config.width / 4,
        (Math.random() * this.game.config.width) / 2 +
          this.game.config.width / 4,
        "fish1"
      );
      fish.body.setSize(...size);
      fish.body.setOffset(...offsets);
      fish.anims.play(`${k}_swim`, true);
    });
  }
  addCannon() {
    this.cannonIndex = 0;
    const [k, { size, offsets }] = Object.entries(cannonsFrames)[
      this.cannonIndex
    ];
    const cannon = this.physics.add.sprite(
      this.game.config.width / 2 + 55,
      this.game.config.height - 50,
      k
    );
    cannon.body.setSize(...size);
    cannon.body.setOffset(...offsets);
    cannon.name = k;
    this.cannon = cannon;
  }
}