From 4e82dc02646f993abfcbbb45d58f30650a138d57 Mon Sep 17 00:00:00 2001 From: tiennm99 Date: Sun, 27 Apr 2025 18:52:58 +0700 Subject: [PATCH] feat: popup when caught --- src/game/objects/GridSystem.js | 38 +++++++++++------------ src/game/objects/Player.js | 9 +++++- src/game/objects/TurnManager.js | 16 +++++----- src/game/scenes/Game.js | 54 +++++++++++++++++++++++++++++++++ 4 files changed, 89 insertions(+), 28 deletions(-) diff --git a/src/game/objects/GridSystem.js b/src/game/objects/GridSystem.js index 110f245..82aafbf 100644 --- a/src/game/objects/GridSystem.js +++ b/src/game/objects/GridSystem.js @@ -6,23 +6,23 @@ export class GridSystem { this.rows = rows; this.cols = cols; this.cellSize = cellSize; - + // Create grid data this.grid = Array(rows).fill().map(() => Array(cols).fill().map(() => ({ isWall: false, isGoal: false, isLight: false }))); - + // Create graphics object for rendering this.graphics = this.scene.add.graphics(); } - + // Resize grid resize(rows, cols) { this.rows = rows; this.cols = cols; - + // Create new grid data with new size this.grid = Array(rows).fill().map(() => Array(cols).fill().map(() => ({ isWall: false, @@ -30,19 +30,19 @@ export class GridSystem { isLight: false }))); } - + // Check if position is valid isValidPosition(row, col) { return row >= 0 && row < this.rows && col >= 0 && col < this.cols; } - + // Set wall at position setWall(row, col, value) { if (this.isValidPosition(row, col)) { this.grid[row][col].isWall = value; } } - + // Check if position is a wall isWall(row, col) { if (this.isValidPosition(row, col)) { @@ -50,14 +50,14 @@ export class GridSystem { } return false; } - + // Set goal at position setGoal(row, col, value) { if (this.isValidPosition(row, col)) { this.grid[row][col].isGoal = value; } } - + // Check if position is a goal isGoal(row, col) { if (this.isValidPosition(row, col)) { @@ -65,14 +65,14 @@ export class GridSystem { } return false; } - + // Set light at position setLight(row, col, value) { if (this.isValidPosition(row, col)) { this.grid[row][col].isLight = value; } } - + // Check if position is lit isLight(row, col) { if (this.isValidPosition(row, col)) { @@ -80,7 +80,7 @@ export class GridSystem { } return false; } - + // Convert grid coordinates to pixel coordinates gridToPixel(row, col) { return { @@ -88,7 +88,7 @@ export class GridSystem { y: row * this.cellSize + this.cellSize / 2 }; } - + // Convert pixel coordinates to grid coordinates pixelToGrid(x, y) { return { @@ -96,18 +96,18 @@ export class GridSystem { col: Math.floor(x / this.cellSize) }; } - + // Render the grid render() { this.graphics.clear(); - + // Draw grid cells for (let row = 0; row < this.rows; row++) { for (let col = 0; col < this.cols; col++) { const cell = this.grid[row][col]; const x = col * this.cellSize; const y = row * this.cellSize; - + // Draw cell background if (cell.isWall) { // Wall cells @@ -118,15 +118,15 @@ export class GridSystem { this.graphics.fillStyle(0x00FF00); this.graphics.fillRect(x, y, this.cellSize, this.cellSize); } else if (cell.isLight) { - // Lit cells - this.graphics.fillStyle(0xFFFF99); + // Lit cells - make them more visible with a brighter yellow + this.graphics.fillStyle(0xFFFF00); this.graphics.fillRect(x, y, this.cellSize, this.cellSize); } else { // Empty cells this.graphics.fillStyle(0x333333); this.graphics.fillRect(x, y, this.cellSize, this.cellSize); } - + // Draw cell border this.graphics.lineStyle(1, 0x444444); this.graphics.strokeRect(x, y, this.cellSize, this.cellSize); diff --git a/src/game/objects/Player.js b/src/game/objects/Player.js index c88fbb4..7ec2270 100644 --- a/src/game/objects/Player.js +++ b/src/game/objects/Player.js @@ -41,7 +41,14 @@ export class Player { x: x, y: y, duration: 100, - ease: 'Linear' + ease: 'Linear', + onComplete: () => { + // Kiểm tra xem người chơi có đang ở ô sáng không sau khi di chuyển + if (this.isInLitCell()) { + // Người chơi bị phát hiện + this.scene.showDetectionPopup(); + } + } }); return true; diff --git a/src/game/objects/TurnManager.js b/src/game/objects/TurnManager.js index 5e8261a..b841c72 100644 --- a/src/game/objects/TurnManager.js +++ b/src/game/objects/TurnManager.js @@ -10,11 +10,11 @@ export class TurnManager { // Chuyển sang lượt tiếp theo nextTurn() { this.turnCount++; - + // Kiểm tra xem người chơi có đang ở ô đích không const playerRow = this.scene.player.row; const playerCol = this.scene.player.col; - + // Kiểm tra nếu grid đã được khởi tạo và có phương thức isGoal if (this.scene.grid && typeof this.scene.grid.isGoal === 'function') { if (this.scene.grid.isGoal(playerRow, playerCol)) { @@ -23,12 +23,12 @@ export class TurnManager { return; } } - + // Xóa ánh sáng hiện tại if (this.scene.lightSystem && typeof this.scene.lightSystem.clearAllLight === 'function') { this.scene.lightSystem.clearAllLight(); } - + // Cập nhật trạm gác if (this.scene.guards && Array.isArray(this.scene.guards)) { this.scene.guards.forEach(guard => { @@ -37,16 +37,16 @@ export class TurnManager { } }); } - + // Kiểm tra xem người chơi có đang ở ô sáng không if (this.scene.grid && typeof this.scene.grid.isLight === 'function') { if (this.scene.grid.isLight(playerRow, playerCol)) { - // Người chơi bị bắt - this.scene.handlePlayerCaught(); + // Người chơi bị bắt - hiển thị popup trước + this.scene.showDetectionPopup(); return; } } - + // Chuyển lượt về người chơi this.isPlayerTurn = true; } diff --git a/src/game/scenes/Game.js b/src/game/scenes/Game.js index 7ce40c9..1818559 100644 --- a/src/game/scenes/Game.js +++ b/src/game/scenes/Game.js @@ -374,6 +374,60 @@ export class Game extends Phaser.Scene { return this.grid.pixelToGrid(x - this.gridOffsetX, y - this.gridOffsetY); } + // Hiển thị popup khi người chơi bị phát hiện + showDetectionPopup() { + const width = this.cameras.main.width; + const height = this.cameras.main.height; + + // Tạm dừng game + this.isPaused = true; + this.inputEnabled = false; + + // Tạo container cho popup + this.detectionPopup = this.add.container(width / 2, height / 2); + this.detectionPopup.setDepth(100); + + // Background + const bg = this.add.rectangle(0, 0, 300, 200, 0x000000, 0.8); + + // Thông báo + const title = this.add.text(0, -60, 'Bạn đã bị phát hiện!', { + font: 'bold 28px Arial', + fill: '#FF0000' + }); + title.setOrigin(0.5, 0.5); + + // Nút chơi lại + const restartButton = this.add.rectangle(0, 20, 200, 40, 0x444444); + const restartText = this.add.text(0, 20, 'CHƠI LẠI', { + font: '20px Arial', + fill: '#ffffff' + }); + restartText.setOrigin(0.5, 0.5); + + // Thêm các phần tử vào container + this.detectionPopup.add([bg, title, restartButton, restartText]); + + // Làm cho nút có thể tương tác + restartButton.setInteractive({ useHandCursor: true }) + .on('pointerover', () => restartButton.fillColor = 0x666666) + .on('pointerout', () => restartButton.fillColor = 0x444444) + .on('pointerdown', () => { + this.closeDetectionPopup(); + this.handlePlayerCaught(); + }); + } + + // Đóng popup phát hiện + closeDetectionPopup() { + if (this.detectionPopup) { + this.detectionPopup.destroy(); + this.detectionPopup = null; + this.isPaused = false; + this.inputEnabled = true; + } + } + // Xử lý khi người chơi bị bắt handlePlayerCaught() { this.livesRemaining--;