Who ate my fish?

🔗 プロジェクトリンク

who ate my fish link

Git hub link

🚩 プロジェクトの概要

これはチャットベースのネットゲームで、ユーザーはリアルタイムのコミュニケーションを通じて、「魚を盗んだ」猫を探しています.ユーザーはリアルタイムで会話し、魚を盗んだ黒猫を探す必要がある.これはユーザーに面白いゲーム要素をもたらすゲームで、ユーザーは投票を通じてマフィアを見つけることができます.

🖥 プロジェクトのデモビデオ

Who ate my fish? デモビデオ

著者が実施する機能

1.チャットエリア

ソケット通信を使用するユーザ間の双方向チャット機能.バックエンドexpressサーバおよびsocket.ioAPIを使用して、クライアント間のリアルタイムチャット機能を実現します.

// client
import io from 'socket.io-client';

const socket = io('http://localhost:3000');

socket.on('chat message', ([curUser, img, , msg, id]) => {
  // ...
  // 소켓에서 받은 메세지를 렌더링
}
          
document.querySelector('.chat-form').addEventListener('submit', e => {
  // ...
  
  // 메세지를 소켓에게 전송
  socket.emit('chat message', $input.value);
  
  // ...
});          

// server
const app = require('express')();
const server = require('http').createServer(app);
const { Server } = require('socket.io');

// CORS 처리
const io = new Server(server, {
  cors: {
    origin: 'http://localhost:8080',
    methods: ['GET', 'POST'],
  },
});


// client가 연결되었을 경우
io.on('connection', socket => {
  
  // ...
  
  // chat message 이벤트가 발생하면, 모든 클라이언트에게 chat message 이벤트를 발생시키고 메세지 정보를 전송
     socket.on('chat message', msg => {
      io.emit('chat message', [nickName, catImageUrl, jailCatImageUrl, msg, socket.id]);
    });
  }
      
  // ...
)

2.プレイヤーの状態管理

エンクロージャを使用してプレーヤーの状態を安全に管理します.

const player = (() => {
  let name = '';
  let isAlive = true;
  let isCitizen = true;
  return {
    get name() {
      return name;
    },
    set name(newName) {
      name = newName;
    },
    get isAlive() {
      return isAlive;
    },
    set isAlive(newIsAlive) {
      isAlive = newIsAlive;
    },
    get isCitizen() {
      return isCitizen;
    },
    set isCitizen(newIsCitizen) {
      isCitizen = newIsCitizen;
    },
  };
})();

3.ゲーム状態に合った音声処理

ゲーム状態に応じて効果音を再生する機能を実現しました.

const sound = (() => {
  const SOUND = {
    pending: new Audio('./sound/pending.mp3'),
    beginning: new Audio('./sound/pending.mp3'),
    day: new Audio('./sound/day.mp3'),
    night: new Audio('./sound/night.mp3'),
    voteFin: new Audio('./sound/voteFin.mp3'),
    voteUser: new Audio('./sound/voteUser.m4a'),
  };
  return {
    play(state) {
      SOUND[state].play();
    },
    pause() {
      Object.keys(SOUND).forEach(state => SOUND[state].pause());
    },
  };
})();