feat: update menu and buttons

src/scenes/Game.js

@@ -34,20 +34,40 @@ export class Game extends Phaser.Scene {
       const buttonSize = 50;
       const buttonColor = 0xaa00ff;
 
-      // Create up button
-      this.buttons.up = this.add.rectangle(700, 500 - buttonSize, buttonSize, buttonSize, buttonColor).setInteractive();
+      // Create up button (triangle pointing up)
+      this.buttons.up = this.add.triangle(
+          700, 425 - buttonSize / 2,
+          -buttonSize / 2, buttonSize / 2,
+          buttonSize / 2, buttonSize / 2,
+          0, -buttonSize / 2
+      ).setInteractive().setFillStyle(buttonColor);
       this.buttons.up.on('pointerdown', () => this.movePlayer('up'));
 
-      // Create down button
-      this.buttons.down = this.add.rectangle(700, 500 + buttonSize, buttonSize, buttonSize, buttonColor).setInteractive();
+      // Create down button (triangle pointing down)
+      this.buttons.down = this.add.triangle(
+          700, 575 - buttonSize / 2,
+          -buttonSize / 2, -buttonSize / 2,
+          buttonSize / 2, -buttonSize / 2,
+          0, buttonSize / 2
+      ).setInteractive().setFillStyle(buttonColor);
       this.buttons.down.on('pointerdown', () => this.movePlayer('down'));
 
-      // Create left button
-      this.buttons.left = this.add.rectangle(700 - buttonSize, 500, buttonSize, buttonSize, buttonColor).setInteractive();
+      // Create left button (triangle pointing left)
+      this.buttons.left = this.add.triangle(
+          650 - buttonSize / 2, 500,
+          buttonSize / 2, -buttonSize / 2,
+          buttonSize / 2, buttonSize / 2,
+          -buttonSize / 2, 0
+      ).setInteractive().setFillStyle(buttonColor);
       this.buttons.left.on('pointerdown', () => this.movePlayer('left'));
 
-      // Create right button
-      this.buttons.right = this.add.rectangle(700 + buttonSize, 500, buttonSize, buttonSize, buttonColor).setInteractive();
+      // Create right button (triangle pointing right)
+      this.buttons.right = this.add.triangle(
+          750 + buttonSize / 2, 500,
+          -buttonSize / 2, -buttonSize / 2,
+          -buttonSize / 2, buttonSize / 2,
+          buttonSize / 2, 0
+      ).setInteractive().setFillStyle(buttonColor);
       this.buttons.right.on('pointerdown', () => this.movePlayer('right'));
   }
 

src/scenes/Menu.js

@@ -3,23 +3,34 @@ export class Menu extends Phaser.Scene {
     super('Menu');
   }
 
-  init() {
-  }
-
-  preload() {
-  }
-
   create() {
-    this.createButton('Tiếp tục', 100, 100, () => this.startGame());
-    this.createButton('Chơi mới', 100, 200, () => this.newGame());
-    this.createButton('Cài đặt', 100, 300, () => this.openSettings());
-    this.createButton('Trợ giúp', 100, 400, () => this.openHelp());
+    this.addButtons();
+  }
+
+  addButtons() {
+    const CONTINUE_BUTTON_X = 400; // Center horizontally
+    const CONTINUE_BUTTON_Y = 250;
+    const NEW_GAME_BUTTON_X = 400; // Center horizontally
+    const NEW_GAME_BUTTON_Y = CONTINUE_BUTTON_Y + 80;
+    const SETTINGS_BUTTON_X = 400; // Center horizontally
+    const SETTINGS_BUTTON_Y = NEW_GAME_BUTTON_Y + 80;
+    const HELP_BUTTON_X = 400; // Center horizontally
+    const HELP_BUTTON_Y = SETTINGS_BUTTON_Y + 80;
+
+    this.createButton('Tiếp tục', CONTINUE_BUTTON_X, CONTINUE_BUTTON_Y, () => this.startGame());
+    this.createButton('Chơi mới', NEW_GAME_BUTTON_X, NEW_GAME_BUTTON_Y, () => this.newGame());
+    this.createButton('Cài đặt', SETTINGS_BUTTON_X, SETTINGS_BUTTON_Y, () => this.openSettings());
+    this.createButton('Trợ giúp', HELP_BUTTON_X, HELP_BUTTON_Y, () => this.openHelp());
   }
 
   createButton(text, x, y, callback) {
-    const button = this.add.text(x, y, text, { fontSize: '32px', fill: '#fff' })
-      .setInteractive()
-      .on('pointerdown', callback);
+    const button = this.add.rectangle(x, y, 200, 50, 0xffffff).setInteractive()
+      .on('pointerdown', callback)
+      .on('pointerover', () => button.fillColor = 0xff3333)
+      .on('pointerout', () => button.fillColor = 0xffffff);
+
+    const textObject = this.add.text(x, y, text, { fontSize: '24px', fill: '#000' }).setOrigin(0.5);
+    return button;
   }
 
   startGame() {