diff --git a/src/game/locales/en.json b/src/game/locales/en.json index f197d25..d0a558f 100644 --- a/src/game/locales/en.json +++ b/src/game/locales/en.json @@ -3,6 +3,7 @@ "startGame": "START GAME", "levelSelect": "LEVEL SELECT", "settings": "SETTINGS", + "guide": "GUIDE", "gameDescription": "Guide the ninja through the shadows.\nAvoid light at all costs.\nRescue the princess... if you can.", "instructions": "Use arrow keys, WASD, or tap to move.", "languageSettings": "Language", @@ -26,5 +27,12 @@ "caughtInLight": "You were caught in the light!", "ninjaFailed": "Unfortunately, in this life, the ninja cannot rescue the princess.", "tryAgain": "TRY AGAIN", - "mainMenu": "MAIN MENU" + "mainMenu": "MAIN MENU", + "guideTitle": "GAME GUIDE", + "levelObjectives": "LEVEL OBJECTIVES", + "levelObjectivesContent": "- Level 1: Navigate through the garden while avoiding guards and lights.\n- Level 2: Infiltrate the palace outer walls and find the secret entrance.\n- Level 3: Move through the palace corridors to reach the princess's chamber.\n- Level 4: Rescue the princess and escape through the secret passage.", + "movementControls": "MOVEMENT CONTROLS", + "movementControlsContent": "- Arrow Keys: Move in four directions\n- WASD Keys: Alternative movement controls\n- Touch/Tap: On mobile, tap where you want to move\n- Space/Enter: Interact with objects", + "enemyTypes": "ENEMY TYPES", + "enemyTypesContent": "- Guards: Patrol fixed routes. Avoid their line of sight.\n- Searchlights: Moving light sources that will detect you if you're caught in them.\n- Dogs: Can detect you even in darkness if you get too close.\n- Traps: Hidden dangers that can end your mission instantly." } diff --git a/src/game/locales/vi.json b/src/game/locales/vi.json index 21f6142..197cb20 100644 --- a/src/game/locales/vi.json +++ b/src/game/locales/vi.json @@ -3,6 +3,7 @@ "startGame": "BẮT ĐẦU CHƠI", "levelSelect": "CHỌN CẤP ĐỘ", "settings": "CÀI ĐẶT", + "guide": "HƯỚNG DẪN", "gameDescription": "Dẫn dắt ninja qua bóng tối.\nTránh ánh sáng bằng mọi giá.\nCứu công chúa... nếu bạn có thể.", "instructions": "Sử dụng phím mũi tên, WASD, hoặc chạm để di chuyển.", "languageSettings": "Ngôn ngữ", @@ -26,5 +27,12 @@ "caughtInLight": "Bạn đã bị bắt trong ánh sáng!", "ninjaFailed": "Thật tiếc, kiếp này ninja không thể giải cứu công chúa rồi.", "tryAgain": "THỬ LẠI", - "mainMenu": "MENU CHÍNH" + "mainMenu": "MENU CHÍNH", + "guideTitle": "HƯỚNG DẪN GAME", + "levelObjectives": "MỤC TIÊU CÁC CẤP ĐỘ", + "levelObjectivesContent": "- Cấp độ 1: Di chuyển qua khu vườn trong khi tránh lính canh và ánh sáng.\n- Cấp độ 2: Xâm nhập vào tường ngoài của cung điện và tìm lối vào bí mật.\n- Cấp độ 3: Di chuyển qua các hành lang cung điện để đến phòng của công chúa.\n- Cấp độ 4: Giải cứu công chúa và thoát qua lối đi bí mật.", + "movementControls": "ĐIỀU KHIỂN DI CHUYỂN", + "movementControlsContent": "- Phím mũi tên: Di chuyển theo bốn hướng\n- Phím WASD: Điều khiển di chuyển thay thế\n- Chạm/Nhấn: Trên thiết bị di động, chạm vào nơi bạn muốn di chuyển\n- Phím Space/Enter: Tương tác với các vật thể", + "enemyTypes": "CÁC LOẠI KẺ ĐỊCH", + "enemyTypesContent": "- Lính canh: Tuần tra theo tuyến đường cố định. Tránh tầm nhìn của họ.\n- Đèn pha: Nguồn sáng di chuyển sẽ phát hiện bạn nếu bạn bị bắt trong đó.\n- Chó: Có thể phát hiện bạn ngay cả trong bóng tối nếu bạn đến quá gần.\n- Bẫy: Nguy hiểm ẩn có thể kết thúc nhiệm vụ của bạn ngay lập tức." } diff --git a/src/game/main.js b/src/game/main.js index 6e59c3d..b8ea338 100644 --- a/src/game/main.js +++ b/src/game/main.js @@ -1,8 +1,11 @@ import { Boot } from './scenes/Boot'; import { Game as MainGame } from './scenes/Game'; import { GameOver } from './scenes/GameOver'; +import { Guide } from './scenes/Guide'; +import { LevelSelect } from './scenes/LevelSelect'; import { MainMenu } from './scenes/MainMenu'; import { Preloader } from './scenes/Preloader'; +import { Settings } from './scenes/Settings'; import { AUTO, Game } from 'phaser'; // Find out more information about the Game Config at: @@ -21,8 +24,11 @@ const config = { Boot, Preloader, MainMenu, + LevelSelect, + Settings, MainGame, - GameOver + GameOver, + Guide ] }; diff --git a/src/game/scenes/Guide.js b/src/game/scenes/Guide.js new file mode 100644 index 0000000..5036e7c --- /dev/null +++ b/src/game/scenes/Guide.js @@ -0,0 +1,85 @@ +import Phaser from 'phaser'; +import { getText } from '../localization'; + +export class Guide extends Phaser.Scene { + constructor() { + super('Guide'); + } + + create() { + const width = this.cameras.main.width; + const height = this.cameras.main.height; + + // Add title + const title = this.add.text(width / 2, 50, getText('guideTitle'), { + font: 'bold 32px Arial', + fill: '#ffffff', + align: 'center' + }); + title.setOrigin(0.5, 0.5); + + // Add level objectives section + const objectivesTitle = this.add.text(width / 2, 120, getText('levelObjectives'), { + font: 'bold 24px Arial', + fill: '#ffffff', + align: 'center' + }); + objectivesTitle.setOrigin(0.5, 0.5); + + const objectivesContent = this.add.text(width / 2, 180, getText('levelObjectivesContent'), { + font: '18px Arial', + fill: '#cccccc', + align: 'left', + wordWrap: { width: width - 100 } + }); + objectivesContent.setOrigin(0.5, 0); + + // Add movement controls section + const controlsTitle = this.add.text(width / 2, 300, getText('movementControls'), { + font: 'bold 24px Arial', + fill: '#ffffff', + align: 'center' + }); + controlsTitle.setOrigin(0.5, 0.5); + + const controlsContent = this.add.text(width / 2, 360, getText('movementControlsContent'), { + font: '18px Arial', + fill: '#cccccc', + align: 'left', + wordWrap: { width: width - 100 } + }); + controlsContent.setOrigin(0.5, 0); + + // Add enemy types section + const enemiesTitle = this.add.text(width / 2, 480, getText('enemyTypes'), { + font: 'bold 24px Arial', + fill: '#ffffff', + align: 'center' + }); + enemiesTitle.setOrigin(0.5, 0.5); + + const enemiesContent = this.add.text(width / 2, 540, getText('enemyTypesContent'), { + font: '18px Arial', + fill: '#cccccc', + align: 'left', + wordWrap: { width: width - 100 } + }); + enemiesContent.setOrigin(0.5, 0); + + // Add back button + const backButton = this.add.rectangle(width / 2, height - 50, 200, 50, 0x444444); + const backText = this.add.text(width / 2, height - 50, getText('back'), { + font: '24px Arial', + fill: '#ffffff' + }); + backText.setOrigin(0.5, 0.5); + + // Make back button interactive + backButton.setInteractive({ useHandCursor: true }) + .on('pointerover', () => backButton.fillColor = 0x666666) + .on('pointerout', () => backButton.fillColor = 0x444444) + .on('pointerdown', () => { + this.scene.start('MainMenu'); + }); + } +} diff --git a/src/game/scenes/MainMenu.js b/src/game/scenes/MainMenu.js index edc84ca..f442446 100644 --- a/src/game/scenes/MainMenu.js +++ b/src/game/scenes/MainMenu.js @@ -37,9 +37,17 @@ export class MainMenu extends Phaser.Scene { }); levelText.setOrigin(0.5, 0.5); + // Add guide button + const guideButton = this.add.rectangle(width / 2, height / 2 + 140, 200, 50, 0x444444); + const guideText = this.add.text(width / 2, height / 2 + 140, getText('guide'), { + font: '24px Arial', + fill: '#ffffff' + }); + guideText.setOrigin(0.5, 0.5); + // Add settings button - const settingsButton = this.add.rectangle(width / 2, height / 2 + 140, 200, 50, 0x444444); - const settingsText = this.add.text(width / 2, height / 2 + 140, getText('settings'), { + const settingsButton = this.add.rectangle(width / 2, height / 2 + 200, 200, 50, 0x444444); + const settingsText = this.add.text(width / 2, height / 2 + 200, getText('settings'), { font: '24px Arial', fill: '#ffffff' }); @@ -60,6 +68,13 @@ export class MainMenu extends Phaser.Scene { this.scene.start('LevelSelect'); }); + guideButton.setInteractive({ useHandCursor: true }) + .on('pointerover', () => guideButton.fillColor = 0x666666) + .on('pointerout', () => guideButton.fillColor = 0x444444) + .on('pointerdown', () => { + this.scene.start('Guide'); + }); + settingsButton.setInteractive({ useHandCursor: true }) .on('pointerover', () => settingsButton.fillColor = 0x666666) .on('pointerout', () => settingsButton.fillColor = 0x444444) diff --git a/src/main.js b/src/main.js index 9f85b3b..e362c9f 100644 --- a/src/main.js +++ b/src/main.js @@ -6,6 +6,7 @@ import { LevelSelect } from './game/scenes/LevelSelect'; import { Game } from './game/scenes/Game'; import { GameOver } from './game/scenes/GameOver'; import { Settings } from './game/scenes/Settings'; +import { Guide } from './game/scenes/Guide'; const config = { type: Phaser.AUTO, @@ -13,7 +14,7 @@ const config = { height: 600, parent: 'app', backgroundColor: '#333333', - scene: [Boot, Preloader, MainMenu, LevelSelect, Game, GameOver, Settings], + scene: [Boot, Preloader, MainMenu, LevelSelect, Game, GameOver, Settings, Guide], physics: { default: 'arcade', arcade: {