diff --git a/README.md b/README.md index a29ed86..c6046a0 100644 --- a/README.md +++ b/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`. diff --git a/public/style.css b/public/style.css index 6004470..efa9771 100644 --- a/public/style.css +++ b/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; +} diff --git a/src/game/levels/LevelManager.js b/src/game/levels/LevelManager.js index 2290023..7434837 100644 --- a/src/game/levels/LevelManager.js +++ b/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; diff --git a/src/game/scenes/Game.js b/src/game/scenes/Game.js index a21b0f2..3377487 100644 --- a/src/game/scenes/Game.js +++ b/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 diff --git a/src/main.js b/src/main.js index 8500b4f..6d9a98a 100644 --- a/src/main.js +++ b/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: {