<div id="game-container"></div>
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #2a2a2a;
  overflow: hidden;
}

canvas  {
  width: 100vw;
  height: 100vh;
}

#game-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; /* Обеспечьте, что контейнер выше других элементов */
}
const MIN_ZOOM = 0.2;
const MAX_ZOOM = 3;
const ZOOM_FACTOR = 0.2;

class Game extends Phaser.Scene {
  constructor() {
    super("Game");
    this.imageWidth = 8000;
    this.imageHeight = 4500;
    this.chunkRows = 4;
    this.chunkCols = 8;
    this.previousCameraState = { scrollX: 0, scrollY: 0, zoom: 1 };
    this.promocodes = [];
    this.displayWidth = 0;
    this.displayHeight = 0;
    this.isCameraMoving = false;
    this.backgroundMusic = null;
    this.promoClickSound = null;
    this.promoMissClickSound = null;
  }

  preload() {
    this.load.image("bg", "https://i.ibb.co/GVtSn4Y/full.webp");
  }

  create() {
    this.add.image(0, 0, "bg").setOrigin(0).setScrollFactor(1);

    this.camera();
  }

  camera() {
    const camera = this.cameras.main;
    
    camera.setZoom(0.2)

    camera.setBounds(0, 0, this.imageWidth, this.imageHeight);


    this.input.on("wheel", (pointer, _, deltaX, deltaY) => {
   
      const zoomChange = deltaY > 0 ? -ZOOM_FACTOR : ZOOM_FACTOR;

      const newZoom = Phaser.Math.Clamp(
        camera.zoom + zoomChange,
        MIN_ZOOM,
        MAX_ZOOM
      );

      const cursorX = pointer.x;
      const cursorY = pointer.y;

      const offsetX = (cursorX - camera.centerX) / camera.zoom;
      const offsetY = (cursorY - camera.centerY) / camera.zoom;

      camera.setZoom(newZoom);

      if (camera.zoom >= MAX_ZOOM || camera.zoom <= MIN_ZOOM) {
        return;
      }

      camera.scrollX += offsetX * (zoomChange / camera.zoom);
      camera.scrollY += offsetY * (zoomChange / camera.zoom);
    });

    this.input.on("pointermove", (pointer) => {
      if (pointer.isDown) {
        document.body.style.cursor = "grabbing";
        camera.scrollX -= pointer.x - pointer.prevPosition.x;
        camera.scrollY -= pointer.y - pointer.prevPosition.y;
      } else {
        document.body.style.cursor = "grab";
      }
    });
  }
}

const config = {
  input: {
    windowEvents: false
  },
  backgroundColor: "#028af8",
  width: "100%",
  height: "100%",
  parent: "game-container",
  physics: {
    default: "arcade"
  },
  type: Phaser.WEBGL,
  render: {
    antialias: true
  },
  mipmapFilter: "LINEAR_MIPMAP_LINEAR",
  scale: {
    mode: Phaser.Scale.RESIZE,
    width: window.innerWidth * window.devicePixelRatio,
    height: window.innerHeight * window.devicePixelRatio,
    zoom: 0.9,
    autoRound: true
  },
  scene: [Game]
};

window.addEventListener("load", () => {
  const game = new Phaser.Game(config);
});
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/phaser/3.16.2/phaser.min.js