diff --git a/src/scenes/Game.js b/src/scenes/Game.js index 56e481a..50c17cd 100644 --- a/src/scenes/Game.js +++ b/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')); } diff --git a/src/scenes/Menu.js b/src/scenes/Menu.js index 88db618..fbc771d 100644 --- a/src/scenes/Menu.js +++ b/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() {