빙고 게임 만들기

지금껏 배운 express, socket, pug를 이용하여 빙고 게임 웹 애플리케이션을 만들어보자.

온라인 빙고 게임

5 x 5 칸 내에서 사용자가 번갈아 가면서 숫자를 부르고, 해당 숫자를 지워 가로, 세로, 대각선으로 먼저 빙고를 만드는 사람이 이기는 게임.

입력이 중요한 게 아니므로 무작위로 숫자가 입력되도록 하며, 웹 소켓에 익숙해지는 것에 중점을 두고자 게임의 승부를 판가름 짓는 요소는 구현하지 않았다. 또한 유저 이름을 입력받아 설정하게 할 수도 있으나, 여기서는 유저 이름을 url에 바로 입력받도록 하였다. 

 

주요 기능

1. 현재 접속 중인 유저 이름 출력
2. 한 명이 게임을 시작하려하면 불가능하게 막기, 알림 출력
3. 게임 진행을 위한 턴 넘기기
4. 자기 턴이 아닌 경우 진행 불가능, 알림 출력
5. 숫자가 선택되면 상대방에게 알림 출력
6. 선택된 숫자에 글자 효과 주기

 

빙고 게임 - 코드

express bingo
cd bingo
npm install pug && npm install socket.io
npm link socket.io

이번에도 server.js 하나에 서버 코드를 모두 작성한다.

• views/main.pug, layout.pug - 게임화면 구성
• server.js - 서버 쪽 처리
• public/javascripts/main.js - 클라이언트 쪽 처리 
  • -> 이전에는 chat.pug로 pug속에 모두 작성했으나, 처리해줘야할 이벤트가 많아 main.js로 따로 분리함

url 끝의 query string에 /?username=이름 을 입력하면 username을 설정할 수 있다.

완성된 빙고 게임