boostcampwm-2022 · comeintostout · Dec 14, 2022 · Dec 14, 2022 · Dec 14, 2022 · Dec 14, 2022
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,13 +1,21 @@
 <!DOCTYPE html>
 <html lang="ko">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>SleepyWoods</title>
- </head>
-
- <body>
- <div id="root"></div>
- <script type="module" src="./src/index.tsx"></script>
- </body>
-</html>
+
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+ <script type="text/javascript">
+ document.oncontextmenu = function () {
+ return false;
+ }
+ </script>
+ <title>SleepyWoods</title>
+</head>
+
+<body>
+ <div id="root"></div>
+ <script type="module" src="./src/index.tsx"></script>
+</body>
+
+</html>
diff --git a/frontend/src/component/Game/Phaser/Player/myPlayer.ts b/frontend/src/component/Game/Phaser/Player/myPlayer.ts
@@ -47,6 +47,7 @@ export class MyPlayer extends Player {
 
  update() {
  const prevState = this.state;
+ const prevPos = { x: this.x, y: this.y };
 
  if (!this.isCanMove) {
  this.state = 'wait';
@@ -112,12 +113,15 @@ export class MyPlayer extends Player {
  if (prevState !== this.state) changeState(this);
 
  if (prevState !== this.state || this.heldDirection.length) {
- this.socket.emit('move', {
- state: this.state,
- direction: this.direction,
- x: this.x,
- y: this.y,
- });
+ this.socket.emit(
+ prevPos.x !== this.x || prevPos.y !== this.y ? 'move' : 'motion',
+ {
+ state: this.state,
+ direction: this.direction,
+ x: this.x,
+ y: this.y,
+ }
+ );
  }
  }
 }
diff --git a/frontend/src/component/Game/Scene/maze.ts b/frontend/src/component/Game/Scene/maze.ts
@@ -1,11 +1,19 @@
+import { Socket } from 'socket.io-client';
 import { MyPlayer } from '../Phaser/Player/myPlayer';
 import { OtherPlayer } from '../Phaser/Player/otherPlayer';
+import { emitter } from '../util';
+
+const backToTown = { x: 1000, y: 1580 };
 
 export default class Maze extends Phaser.Scene {
+ socket?: Socket;
+ autoPlay?: boolean;
  background?: Phaser.Tilemaps.TilemapLayer;
  otherLayer?: Phaser.Tilemaps.TilemapLayer;
  myPlayer?: MyPlayer;
  otherPlayer: { [key: string]: OtherPlayer };
+ gameEntry?: any;
+ isEnterGameZone?: any;
 
  constructor() {
  super('Maze');
@@ -14,6 +22,8 @@ export default class Maze extends Phaser.Scene {
  }
 
  init(data: any) {
+ this.socket = data.socket;
+ this.autoPlay = data.autoPlay;
  this.myPlayer = new MyPlayer(
  this,
  1000,
@@ -25,6 +35,54 @@ export default class Maze extends Phaser.Scene {
  );
 
  this.myPlayer.fixState(true, 'swimming', 1);
+
+ this.gameEntry = this.physics.add.staticGroup({
+ key: 'portal',
+ frameQuantity: 1,
+ });
+
+ this.gameEntry
+ .getChildren()[0]
+ .setPosition(backToTown.x, backToTown.y)
+ .setDepth(3);
+
+ this.gameEntry.refresh();
+
+ const keyG = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.G);
+
+ this.physics.add.overlap(this.myPlayer, this.gameEntry, () => {
+ const { x, y } = backToTown;
+ const text: (
+ | Phaser.GameObjects.Graphics
+ | Phaser.GameObjects.Text
+ | undefined
+ )[] = [];
+
+ if (!this.isEnterGameZone) {
+ text.push(
+ this.add
+ .graphics()
+ .fillStyle(0xffffff, 50)
+ .fillRoundedRect(x - 140, y - 70, 265, 40, 20),
+ this.add.text(x - 130, y - 60, 'push G key for back to Town!', {
+ color: '#000',
+ font: '700 18px Arial',
+ })
+ );
+
+ this.isEnterGameZone = true;
+
+ setTimeout(() => {
+ text[0]?.destroy();
+ text[1]?.destroy();
+ this.isEnterGameZone = false;
+ }, 500);
+ }
+
+ if (Phaser.Input.Keyboard.JustDown(keyG)) {
+ this.changeScene('Town');
+ }
+ });
  }
 
  create() {
@@ -59,4 +117,15 @@ export default class Maze extends Phaser.Scene {
  update() {
  this.myPlayer?.update();
  }
+
+ changeScene = (gameName: string) => {
+ emitter.emit('closeContent');
+
+ this.scene.pause();
+ this.scene.start(gameName, {
+ socket: this.socket,
+ myPlayer: this.myPlayer,
+ autoPlay: this.autoPlay,
+ });
+ };
 }
diff --git a/frontend/src/component/Game/Scene/sprint.ts b/frontend/src/component/Game/Scene/sprint.ts
@@ -1,11 +1,19 @@
+import { Socket } from 'socket.io-client';
 import { MyPlayer } from '../Phaser/Player/myPlayer';
 import { OtherPlayer } from '../Phaser/Player/otherPlayer';
+import { emitter } from '../util';
+
+const backToTown = { x: 1600, y: 1900 };
 
 export default class Sprint extends Phaser.Scene {
+ socket?: Socket;
+ autoPlay?: boolean;
  background?: Phaser.Tilemaps.TilemapLayer;
  otherLayer?: Phaser.Tilemaps.TilemapLayer;
  myPlayer?: MyPlayer;
  otherPlayer: { [key: string]: OtherPlayer };
+ gameEntry?: any;
+ isEnterGameZone?: any;
 
  constructor() {
  super('Sprint');
@@ -23,6 +31,54 @@ export default class Sprint extends Phaser.Scene {
  data.myPlayer.nickname,
  data.socket
  );
+
+ this.gameEntry = this.physics.add.staticGroup({
+ key: 'portal',
+ frameQuantity: 1,
+ });
+
+ this.gameEntry
+ .getChildren()[0]
+ .setPosition(backToTown.x, backToTown.y)
+ .setDepth(3);
+
+ this.gameEntry.refresh();
+
+ const keyG = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.G);
+
+ this.physics.add.overlap(this.myPlayer, this.gameEntry, () => {
+ const { x, y } = backToTown;
+ const text: (
+ | Phaser.GameObjects.Graphics
+ | Phaser.GameObjects.Text
+ | undefined
+ )[] = [];
+
+ if (!this.isEnterGameZone) {
+ text.push(
+ this.add
+ .graphics()
+ .fillStyle(0xffffff, 50)
+ .fillRoundedRect(x - 140, y - 70, 265, 40, 20),
+ this.add.text(x - 130, y - 60, 'push G key for back to Town!', {
+ color: '#000',
+ font: '700 18px Arial',
+ })
+ );
+
+ this.isEnterGameZone = true;
+
+ setTimeout(() => {
+ text[0]?.destroy();
+ text[1]?.destroy();
+ this.isEnterGameZone = false;
+ }, 500);
+ }
+
+ if (Phaser.Input.Keyboard.JustDown(keyG)) {
+ this.changeScene('Town');
+ }
+ });
  }
 
  create() {
@@ -52,4 +108,15 @@ export default class Sprint extends Phaser.Scene {
  update() {
  this.myPlayer?.update();
  }
+
+ changeScene = (gameName: string) => {
+ emitter.emit('closeContent');
+
+ this.scene.pause();
+ this.scene.start(gameName, {
+ socket: this.socket,
+ myPlayer: this.myPlayer,
+ autoPlay: this.autoPlay,
+ });
+ };
 }
diff --git a/frontend/src/component/Game/Scene/town.ts b/frontend/src/component/Game/Scene/town.ts
@@ -27,7 +27,6 @@ export default class Town extends Phaser.Scene {
 
  init() {
  emitter.on('gameStart', (data: any) => {
- console.log(data.userList);
  this.changeScene(data.gameName);
  });
 
@@ -136,13 +135,24 @@ export default class Town extends Phaser.Scene {
  }
 
  changeScene = (gameName: string) => {
- console.log(gameName);
+ emitter.emit('closeContent');
+
  this.scene.pause();
  this.scene.start(gameName, {
  socket: this.socket,
  myPlayer: this.myPlayer,
  autoPlay: this.autoPlay,
  });
+
+ // 자신의 캐릭터 지워주기
+ this.myPlayer?.delete();
+ delete this.myPlayer;
+
+ // emitter 이벤트 지워주기
+ emitter.removeListener('init');
+ emitter.removeListener('updateNickname');
+ emitter.removeListener('updateHair');
+ emitter.removeListener('gameStart');
  };
 
  create() {
@@ -250,6 +260,14 @@ export default class Town extends Phaser.Scene {
  this.otherPlayer[id].update(state, x, y, direction);
  });
 
+ this.socket.on('motion', (data: userType) => {
+ const id = data.id.toString().trim();
+
+ if (!this.otherPlayer[id]) return;
+ const { state, x, y, direction } = data;
+ this.otherPlayer[id].update(state, x, y, direction);
+ });
+
  this.socket.on('userLeaved', (data: userType) => {
  const id = data.id.toString().trim();
  this.otherPlayer[id].delete();

diff --git a/frontend/src/component/Game/Scene/zombie.ts b/frontend/src/component/Game/Scene/zombie.ts
@@ -1,11 +1,19 @@
+import { Socket } from 'socket.io-client';
 import { MyPlayer } from '../Phaser/Player/myPlayer';
 import { OtherPlayer } from '../Phaser/Player/otherPlayer';
+import { emitter } from '../util';
+
+const backToTown = { x: 1000, y: 1580 };
 
 export default class Zombie extends Phaser.Scene {
+ socket?: Socket;
+ autoPlay?: boolean;
  background?: Phaser.Tilemaps.TilemapLayer;
  otherLayer?: Phaser.Tilemaps.TilemapLayer;
  myPlayer?: MyPlayer;
  otherPlayer: { [key: string]: OtherPlayer };
+ gameEntry?: any;
+ isEnterGameZone?: any;
 
  constructor() {
  super('Zombie');
@@ -23,6 +31,54 @@ export default class Zombie extends Phaser.Scene {
  data.myPlayer.nickname,
  data.socket
  );
+
+ this.gameEntry = this.physics.add.staticGroup({
+ key: 'portal',
+ frameQuantity: 1,
+ });
+
+ this.gameEntry
+ .getChildren()[0]
+ .setPosition(backToTown.x, backToTown.y)
+ .setDepth(3);
+
+ this.gameEntry.refresh();
+
+ const keyG = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.G);
+
+ this.physics.add.overlap(this.myPlayer, this.gameEntry, () => {
+ const { x, y } = backToTown;
+ const text: (
+ | Phaser.GameObjects.Graphics
+ | Phaser.GameObjects.Text
+ | undefined
+ )[] = [];
+
+ if (!this.isEnterGameZone) {
+ text.push(
+ this.add
+ .graphics()
+ .fillStyle(0xffffff, 50)
+ .fillRoundedRect(x - 140, y - 70, 265, 40, 20),
+ this.add.text(x - 130, y - 60, 'push G key for back to Town!', {
+ color: '#000',
+ font: '700 18px Arial',
+ })
+ );
+
+ this.isEnterGameZone = true;
+
+ setTimeout(() => {
+ text[0]?.destroy();
+ text[1]?.destroy();
+ this.isEnterGameZone = false;
+ }, 500);
+ }
+
+ if (Phaser.Input.Keyboard.JustDown(keyG)) {
+ this.changeScene('Town');
+ }
+ });
  }
 
  create() {
@@ -56,4 +112,15 @@ export default class Zombie extends Phaser.Scene {
  update() {
  this.myPlayer?.update();
  }
+
+ changeScene = (gameName: string) => {
+ emitter.emit('closeContent');
+
+ this.scene.pause();
+ this.scene.start(gameName, {
+ socket: this.socket,
+ myPlayer: this.myPlayer,
+ autoPlay: this.autoPlay,
+ });
+ };
 }