fix: center game

README.md

@@ -32,8 +32,6 @@ This game is built with:
 - [Phaser 3.88.2](https://github.com/phaserjs/phaser)
 - [Vite 5.3.1](https://github.com/vitejs/vite)
 
-![screenshot](screenshot.png)
-
 ## Requirements
 
 [Node.js](https://nodejs.org) is required to install dependencies and run scripts via `npm`.

public/style.css

@@ -20,3 +20,9 @@ body {
     position: relative;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }
+
+/* Ensure Phaser canvas is centered */
+canvas {
+    display: block;
+    margin: 0 auto;
+}

src/game/levels/LevelManager.js

@@ -40,8 +40,8 @@ export class LevelManager {
             // Tính toán lại vị trí lưới để căn giữa
             const width = this.scene.cameras.main.width;
             const height = this.scene.cameras.main.height;
-            this.scene.gridOffsetX = (width - (gridSize * this.scene.cellSize)) / 2;
-            this.scene.gridOffsetY = (height - (gridSize * this.scene.cellSize)) / 2;
+            this.scene.gridOffsetX = Math.floor((width - (gridSize * this.scene.cellSize)) / 2);
+            this.scene.gridOffsetY = Math.floor((height - (gridSize * this.scene.cellSize)) / 2);
 
             // Cập nhật vị trí của graphics
             this.scene.grid.graphics.x = this.scene.gridOffsetX;

src/game/scenes/Game.js

@@ -47,8 +47,8 @@ export class Game extends Phaser.Scene {
         this.gameCamera = this.cameras.main;
 
         // Calculate grid position to center it
-        this.gridOffsetX = (width - (this.gridSize * this.cellSize)) / 2;
-        this.gridOffsetY = (height - (this.gridSize * this.cellSize)) / 2;
+        this.gridOffsetX = Math.floor((width - (this.gridSize * this.cellSize)) / 2);
+        this.gridOffsetY = Math.floor((height - (this.gridSize * this.cellSize)) / 2);
 
         // Create grid system
         this.createGridSystem();
@@ -109,6 +109,10 @@ export class Game extends Phaser.Scene {
         // Set camera bounds
         this.cameras.main.setBounds(0, 0, worldWidth, worldHeight);
 
+        // Ensure the world container is centered
+        this.worldContainer.x = 0;
+        this.worldContainer.y = 0;
+
         // Start following the player
         this.cameras.main.startFollow(
             this.player.sprite,  // Target to follow

src/main.js

@@ -10,8 +10,8 @@ import { Guide } from './game/scenes/Guide';
 
 const config = {
   type: Phaser.AUTO,
-  width: 800,
-  height: 600,
+  width: 1024,
+  height: 768,
   parent: 'app',
   backgroundColor: '#333333',
   scale: {