<aside> 🔥 Intro: 타워 디펜스 게임 프로젝트

</aside>

타워 디펜스 게임으로 유명한 Plants VS Zombies 게임

                                             *타워 디펜스 게임으로 유명한 Plants VS Zombies 게임*

안녕하세요! 강창민 튜터입니다.

이번 팀 프로젝트는 타워 디펜스 게임의 서버를 만들어 보는 프로젝트를 하려고 합니다! 타워 디펜스 게임이 뭔지는 혹시 다들 알고 계시나요?

타워 디펜스 게임이란 Plants VS Zombies 게임처럼 타워(위 스크린샷에서 식물)들을 게임 맵 상에 배치를 한 후에 몰려오는 적(위 스크린샷에서 좀비)들을 끊임없이 격퇴해 나가는 게임입니다!

이러한 게임 장르는 특히나 모바일 게임에서 선호가 많이 되고 있는데요. 이번 시간에는 여러분들이 타워 디펜스 게임의 게임 서버를 직접 만들어보는 프로젝트로 진행하려고 합니다!

기존 팀 프로젝트와는 다르게 이번엔 실제 게임서버를 만든다는 것이 차이겠죠! 그러면, 여러분들이 어떤 것을 만들어야 하는지부터 한 번 살펴봐야 하는데 그 전에 게임 클라이언트가 필요하니 게임 클라이언트에 대해서 한 번 알아보도록 하시죠! 🚀🚀🚀

<aside> 🕹️ 타워 디펜스 게임 클라이언트 살펴보기

</aside>

와… 누가 만들었는지 몰라도 되게 잘 만들었다~~~

                                                   *와… 누가 만들었는지 몰라도 되게 잘 만들었다~~~*

문득, 이런 생각이 드시는 분들이 있을 겁니다.

<aside> 🤔 튜터님, 근데… 저희 서버만 만드는거 아니었나요? 클라이언트도 만들어야 하나요?

</aside>

네! 맞습니다! 사실은 클라이언트도 여러분들이 만들어주셔야 합니다. 왜냐하면, 이제부터는 REST API만으로 통신을 다 할 수는 없으니까요. (물론, 회원가입 / 로그인 기능은 REST API를 사용하시면 됩니다.)

이번 프로젝트에서는 WebSocket으로 연결된 후, 실시간으로 게임 관련 통신을 하면서 게임이 동작하는 것을 목표로 하고 있습니다. 그래서, 게임 클라이언트가 꼭 필요하죠.

<aside> 😡 아니! 저희는 게임 클라이언트 만드는 것을 배운적도 없는데 어떻게 만들어요?!

</aside>

맞는 말씀이십니다! 그래서, 이번 팀 프로젝트에선 제가 직접 타워 디펜스 게임 클라이언트를 만들어서 제공을 해드립니다! (게임 클라이언트 만드는데 만 하루하고도 반나절동안 코딩했습니다! 칭찬 좀 해주세요! 🥰🥰🥰*)*

여러분들이 게임 서버를 다 만들고 게임 클라이언트도 입맛에 맞게 바꾸고 싶다면 얼마든지 그렇게 하셔도 좋습니다. 단, 게임 클라이언트에서 사용하는 스프라이트(images 디렉토리 내의 파일들)들은 공짜로 사용할 수 있는 스프라이트를 구해서 적용한 것이니 스프라이트를 교체하고 싶으시다면 꼭 정식 경로로 다운로드 받아서 교체해주세요! (유료 스프라이트를 돈을 지불하지 않고 불법으로 쓰면 안됩니다.)

여러분들은 오직! 타워 디펜스 게임의 서버를 만드시는 것에만 집중을 하시면 됩니다. 여러분들의 메인 미션은 클라이언트가 제대로 동작을 할 수 있도록 서버를 구현해주시는 것이라고 생각하시면 됩니다!

우선, 게임 클라이언트의 소스 파일을 공유해드리겠습니다. 아래 zip 파일을 다운로드 후 압축 해제하시면 됩니다.

tower_defense_client.zip

이제 실제로 게임이 어떻게 동작하는지 동영상으로 한 번 보겠습니다! 제가 자체적으로 만든 서버로 게임 플레이를 시연하는 영상입니다.

이제 어떠한 게임을 만드시는지 좀 더 느낌은 오시죠? 이 게임에 서버를 붙이는 것은 이제 여러분들의 몫입니다! 하지만, 클라이언트 코드도 잘 모르는데 어떻게 서버를 붙여야 되는지 막막하실 것 같으니 지금부터 클라이언트 코드 설명서를 잘 집중해서 읽어보도록 하시죠! 💪💪💪

<aside> 🕹️ 타워 디펜스 게임 클라이언트 코드 설명서

</aside>

  1. 클라이언트 실행하는 법

    1. http-server를 설치합니다. (터미널에서 npm i -g http-server 실행)

      npm: http-server

      <aside> 🤔 튜터님, http-server를 왜 설치해야 되는건가요? 궁금…

      </aside>

      1. open index.html과 같이 웹 페이지를 브라우저로 실행하게 되면 브라우저는 우리가 흔히 알고 있는 http나 https 프로토콜이 아니라 파일 프로토콜(file://로 시작)을 사용해요.

        스크린샷 2024-05-28 오전 8.21.31.png

      2. 이 때, 브라우저는 보안상의 이유로 파일 프로토콜을 통해 로드된 페이지가 다른 로컬 파일을 로드하는 것을 제한해요! 이는 악성 코드가 로컬 파일 시스템에 접근하는 것을 방지하기 위한 것이에요!

      3. 따라서, 파일 프로토콜이 아니라 로컬 서버를 설정해서 http://localhost 같은 URL을 통해 다른 로컬 파일들을 로드할 수 있도록 해야 합니다. 이렇게 하면 CORS 정책에 의해 차단되지 않고 자원을 로드할 수 있어요!

    2. tower_defense_client.zip 파일 다운로드 후 압축을 푼 루트 디렉토리로 이동합니다.

      1. e.g. cd /workspace/tower-defense-client
      2. 이건 예시이고 실제 여러분들이 압축을 푼 디렉토리로 이동해야 합니다.

    3. 해당 디렉토리에서 터미널을 켜고 http-server 명령어를 입력하면 http://localhost:8080에서 로컬 서버로 클라이언트를 시작합니다.

  2. 자바스크립트 코드 한 줄 소개

    1. base.js
      1. Base 클래스는 기지의 상태와 동작을 정의합니다.
      2. 기지의 HP를 관리하며 데미지를 입는 로직을 포함하고 있습니다.
    2. tower.js
      1. Tower 클래스는 타워의 상태와 동작을 정의합니다.
      2. 타워는 주기적으로 몬스터를 공격합니다.
    3. monster.js
      1. Monster 클래스는 몬스터의 상태와 동작을 정의합니다.
      2. 몬스터는 주어진 경로를 따라 이동하며 기지에 도달하면 기지에 데미지를 입힙니다.
    4. game.js (메인 게임 코드)
      1. game.js는 전체 게임의 흐름을 제어합니다.
      2. 몬스터가 걸어가는 경로 생성 및 초기 타워 배치로 게임 맵의 초기 세팅을 합니다.
      3. 이후에 게임 루프를 실행하며 몬스터 생성 및 업데이트, 타워와 몬스터 간의 상호작용을 관리합니다.

  3. 서버와 통신하는 클라이언트 객체

    let serverSocket;

이외에, 게임 클라이언트 코드에서 수학적인 배경이 필요한 부분들은 제가 최대한 주석으로 설명을 달았으니 참고해주세요! 나중에 기회가 되면 게임에 필요한 수학 공부도 열심히 하시면 좋습니다!

이제, 여러분들이 게임 클라이언트 코드에서 어떤 작업들을 해야 되는지 살펴봐야 되는데 그 전에 게임 규칙에 대해서 잠깐만 확인하고 작업에 대해서 살펴보도록 할게요! 게임 규칙을 먼저 살펴봐야 서버에서 어떤 작업들을 해야되는지 이해가 더 쉽기 때문입니다!

<aside> 📕 타워 디펜스 게임 규칙

</aside>

제가 서버에 적용한 타워 디펜스 게임 규칙을 알려드리겠습니다. 여러분들이 독창적으로 게임 규칙을 정의하고 싶다면 얼마든지 정의하셔도 되며 적용은 자유입니다! 단, 이렇게 할 경우에 게임 룰에 대해선 반드시 Github 저장소 Readme에 작성해주세요!

조금 복잡하실 수도 있겠지만 해당 규칙을 잘 인지해주셔야 합니다! 이제 해당 규칙 기반으로 여러분들이 어떠한 서버 기능들을 구현해야되는지를 말씀드릴게요!

<aside> 🛠 서버 기능 명세 (필수 구현)

</aside>

  1. 회원가입 / 로그인 기능 (REST API로 통신)

    1. 로그인 성공 시 Access Token을 발급받도록 해주세요.
      1. 이후에 WebSocket 통신에서 해당 Access Token을 기반으로 유저 인증을 할 때 쓸 것입니다.

  2. 유저 별 게임 데이터 관리

    let userGold = 0; // 유저 골드
let baseHp = 0; // 기지 체력

let towerCost = 0; // 타워 구입 비용
let numOfInitialTowers = 0; // 초기 타워 개수
let monsterLevel = 0; // 몬스터 레벨
let monsterSpawnInterval = 0; // 몬스터 생성 주기

let score = 0; // 게임 점수
let highScore = 0; // 기존 최고 점수

  3. 클라이언트가 서버로부터 수신하는 이벤트 종류 정의 및 코드 구현 (WebSocket으로 통신)

  4. 클라이언트가 서버로 송신하는 이벤트 종류 정의 및 코드 구현 (WebSocket으로 통신)

  5. 유저 별 최고 기록 스코어 저장

여러분들이 필수적으로 구현해야 되는 서버 기능들에 대해서 살펴봤습니다! 위의 1, 3, 4번 항목의 경우에는 자바스크립트 코드 내의 주석으로 힌트를 드렸으니 힌트가 필요하시다면 */ */**로 작성되어 있는 주석들을 주목해주세요! 하지만, 이걸로 이번 프로젝트가 끝난다면 뭔가 섭섭할 것 같은데… 🥺

<aside> 🏆 더 재밌는 게임을 만들기 위한 도전!

</aside>

이 게임 화면 보면 위에서 미처 구현하지 못한 기능들이 좀 보이죠?

                                        *이 게임 화면 보면 위에서 미처 구현하지 못한 기능들이 좀 보이죠?*

이번 팀 프로젝트는 의외로 게임 서버 구현이 빨리 끝날 수도 있습니다. 왜냐하면, 게임을 돌아가게 하기 위해 구현을 해야하는 서버 기능들이 생각보다 많지는 않거든요.

하지만, 여기서 만족하지 말고 나아가야겠죠? 위에서 얘기한 기능들을 전부 잘 구현하고 게임이 성공적으로 플레이가 된다면 이제부터는 더욱 더 리얼하고 재밌는 타워 디펜스 게임을 만들기 위해 노력을 하셨으면 좋겠습니다.

일단, 제가 힌트를 드려보자면 이런 기능들을 추가로 구현할 수 있겠네요.

제가 힌트로 제시한 기능 말고도 정말 추가할 수 있는 게임 기능들은 많습니다. 재미요소도 많고요. 지금부터는, 여러분들의 창의성을 녹여낼 시간입니다. 여기서, 한 마디 조언을 좀 드려볼게요.

과제를 그냥 “과제” 그 자체로 받아들이고 해야하는 것으로 인식 VS 과제를 호기심 가득한 상태로 “장난감”처럼 씹고 뜯고 맛보고 즐기며 가지고 놀기

전자의 자세로는 게임 서버 프로그래머로 롱런하기도 힘들고 러닝 커브의 기울기도 완만할 것이라는 건 여러분들도 알고 계시겠죠? 재미있게 이 과제를 즐겨주시고 제가 생각도 하지 못한 재밌는 기능들 많이 추가해서 발표회 때 다 같이 게임을 즐길 수 있었으면 좋겠습니다! 😁😁😁

그리고, 여러분들이 도전 과제로 구현하신 기능들은 꼭 Github Readme에 적어주세요! 아셨죠?

<aside> ✅ 체크리스트

</aside>

  1. 게임 서버 설계 및 구현

  2. WebSocket 통신

  3. 유저 인증 및 관리

  4. 게임 로직 구현