<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
This Pen doesn't use any external CSS resources.