feat: instruction

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."
 }

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."
 }

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
     ]
 };
 

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');
+            });
+    }
+}

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)

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: {