feat(core): add base scene

.gitignore

@@ -0,0 +1 @@
+.idea

project.config

@@ -1,7 +1,7 @@
 [game]
 title = "nntv"
-width = 1280
-height = 720
+width = 800
+height = 600
 pixel_art = false
 
 [user]

src/main.js

@@ -1,20 +1,24 @@
-import { Start } from './scenes/Start.js';
+import { Menu } from './scenes/Menu.js';
+import { Game } from './scenes/Game.js';
 
 const config = {
     type: Phaser.AUTO,
     title: 'nntv',
     description: 'Night Ninja: Twilight Voyage',
     parent: 'game-container',
-    width: 1280,
-    height: 720,
+    width: 800,
+    height: 600,
     pixelArt: false,
-    scene: [
-        Start
-    ],
+    scene: [Menu, Game],
     scale: {
         mode: Phaser.Scale.FIT,
         autoCenter: Phaser.Scale.CENTER_BOTH
     },
+    physics: {
+        default: 'arcade',
+        arcade: {
+            gravity: { y: 0 }
+        }
+    }
 }
 new Phaser.Game(config);
-            

src/scenes/Game.js

@@ -0,0 +1,95 @@
+export class Game extends Phaser.Scene {
+  constructor() {
+      super('Game');
+      this.player = null;
+      this.cursors = null;
+      this.wasd = null;
+      this.buttons = {};
+  }
+
+  create() {
+      // Set white background
+      this.cameras.main.setBackgroundColor('#ffffff');
+
+      // Create player
+      this.player = this.add.circle(400, 300, 20, 0x000000);
+
+      // Enable physics on player
+      this.physics.add.existing(this.player);
+
+      // Set up keyboard controls
+      this.cursors = this.input.keyboard.createCursorKeys();
+      this.wasd = this.input.keyboard.addKeys({
+          up: Phaser.Input.Keyboard.KeyCodes.W,
+          down: Phaser.Input.Keyboard.KeyCodes.S,
+          left: Phaser.Input.Keyboard.KeyCodes.A,
+          right: Phaser.Input.Keyboard.KeyCodes.D
+      });
+
+      // Create on-screen buttons
+      this.createButtons();
+  }
+
+  createButtons() {
+      const buttonSize = 50;
+      const buttonColor = 0xaa00ff;
+
+      // Create up button
+      this.buttons.up = this.add.rectangle(700, 500 - buttonSize, buttonSize, buttonSize, buttonColor).setInteractive();
+      this.buttons.up.on('pointerdown', () => this.movePlayer('up'));
+
+      // Create down button
+      this.buttons.down = this.add.rectangle(700, 500 + buttonSize, buttonSize, buttonSize, buttonColor).setInteractive();
+      this.buttons.down.on('pointerdown', () => this.movePlayer('down'));
+
+      // Create left button
+      this.buttons.left = this.add.rectangle(700 - buttonSize, 500, buttonSize, buttonSize, buttonColor).setInteractive();
+      this.buttons.left.on('pointerdown', () => this.movePlayer('left'));
+
+      // Create right button
+      this.buttons.right = this.add.rectangle(700 + buttonSize, 500, buttonSize, buttonSize, buttonColor).setInteractive();
+      this.buttons.right.on('pointerdown', () => this.movePlayer('right'));
+  }
+
+  movePlayer(direction) {
+      const speed = 200;
+      const playerBody = this.player.body;
+
+      switch (direction) {
+          case 'up':
+              playerBody.setVelocityY(-speed);
+              break;
+          case 'down':
+              playerBody.setVelocityY(speed);
+              break;
+          case 'left':
+              playerBody.setVelocityX(-speed);
+              break;
+          case 'right':
+              playerBody.setVelocityX(speed);
+              break;
+      }
+  }
+
+  update() {
+      const speed = 200;
+      const playerBody = this.player.body;
+
+      // Reset velocity
+      playerBody.setVelocity(0);
+
+      // Handle horizontal movement
+      if (this.cursors.left.isDown || this.wasd.left.isDown) {
+          playerBody.setVelocityX(-speed);
+      } else if (this.cursors.right.isDown || this.wasd.right.isDown) {
+          playerBody.setVelocityX(speed);
+      }
+
+      // Handle vertical movement
+      if (this.cursors.up.isDown || this.wasd.up.isDown) {
+          playerBody.setVelocityY(-speed);
+      } else if (this.cursors.down.isDown || this.wasd.down.isDown) {
+          playerBody.setVelocityY(speed);
+      }
+  }
+}

src/scenes/Menu.js

@@ -0,0 +1,40 @@
+export class Menu extends Phaser.Scene {
+  constructor() {
+    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());
+  }
+
+  createButton(text, x, y, callback) {
+    const button = this.add.text(x, y, text, { fontSize: '32px', fill: '#fff' })
+      .setInteractive()
+      .on('pointerdown', callback);
+  }
+
+  startGame() {
+    console.log('Tiếp tục trò chơi');
+  }
+
+  newGame() {
+    this.scene.start('Game');
+  }
+
+  openSettings() {
+    console.log('Mở cài đặt');
+  }
+
+  openHelp() {
+    console.log('Mở trợ giúp');
+  }
+}

src/scenes/Start.js

@@ -1,49 +0,0 @@
-export class Start extends Phaser.Scene
-{
-    constructor()
-    {
-        super('Start');
-    }
-
-    preload()
-    {
-        this.load.image('background', 'assets/space.png');
-        this.load.image('logo', 'assets/phaser.png');
-
-        //  The ship sprite is CC0 from https://ansimuz.itch.io - check out his other work!
-        this.load.spritesheet('ship', 'assets/spaceship.png', { frameWidth: 176, frameHeight: 96 });
-    }
-
-    create()
-    {
-        this.background = this.add.tileSprite(640, 360, 1280, 720, 'background');
-
-        const logo = this.add.image(640, 200, 'logo');
-
-        const ship = this.add.sprite(640, 360, 'ship');
-
-        ship.anims.create({
-            key: 'fly',
-            frames: this.anims.generateFrameNumbers('ship', { start: 0, end: 2 }),
-            frameRate: 15,
-            repeat: -1
-        });
-
-        ship.play('fly');
-
-        this.tweens.add({
-            targets: logo,
-            y: 400,
-            duration: 1500,
-            ease: 'Sine.inOut',
-            yoyo: true,
-            loop: -1
-        });
-    }
-
-    update()
-    {
-        this.background.tilePositionX += 2;
-    }
-}
-