From e78c4491ad93c7554432c8e1aa661de9744ac106 Mon Sep 17 00:00:00 2001 From: tiennm99 Date: Wed, 19 Feb 2025 21:13:50 +0700 Subject: [PATCH] feat(core): add base scene --- .gitignore | 1 + project.config | 4 +- src/main.js | 18 +++++---- src/scenes/Game.js | 95 +++++++++++++++++++++++++++++++++++++++++++++ src/scenes/Menu.js | 40 +++++++++++++++++++ src/scenes/Start.js | 49 ----------------------- 6 files changed, 149 insertions(+), 58 deletions(-) create mode 100644 .gitignore create mode 100644 src/scenes/Game.js create mode 100644 src/scenes/Menu.js delete mode 100644 src/scenes/Start.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..485dee6 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea diff --git a/project.config b/project.config index c06b8d8..6b6fc4f 100644 --- a/project.config +++ b/project.config @@ -1,7 +1,7 @@ [game] title = "nntv" -width = 1280 -height = 720 +width = 800 +height = 600 pixel_art = false [user] diff --git a/src/main.js b/src/main.js index ef16aac..d84c1a5 100644 --- a/src/main.js +++ b/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); - \ No newline at end of file diff --git a/src/scenes/Game.js b/src/scenes/Game.js new file mode 100644 index 0000000..56e481a --- /dev/null +++ b/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); + } + } +} diff --git a/src/scenes/Menu.js b/src/scenes/Menu.js new file mode 100644 index 0000000..88db618 --- /dev/null +++ b/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'); + } +} diff --git a/src/scenes/Start.js b/src/scenes/Start.js deleted file mode 100644 index 00f8dc5..0000000 --- a/src/scenes/Start.js +++ /dev/null @@ -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; - } -} -