React로 닷지(Dodge) 게임 사이트 만들기

http://onemoresecond.site

---

vercel 로 내 사이트 배포하기 도전기

스터디 목표

곰플레이어의 숨겨진 기능 닷지 게임을 모티브로 간단한 랭킹 시스템, 채팅 시스템을 Rust lang으로 구현할 예정입니다. 어렸을 때 정말 많이 했던 게임이죠..

곰플레이어 설정에서 로고를 더블 클릭하면 나온다..!

웹 개발은 처음하니까 바닥부터 배포까지는 어려울 것 같아, vercel 이라는 자동 배포 사이트의 힘을 빌립니다. 프론트는 vercel로 자동 배포 시스템을 이용하고, 서버는 로컬 PC로 구현할게요.

https://velog.io/@mjieun/Next.js-Vercel로-프론트-배포하기
이런 좋은 글들이 많이 있지만 직접 해보니 꽤나 헤매었다..
repository를 생성하고 이메일을 등록하지 않아서 정상적으로 연동이 안되었고,
git에 프로젝트를 올리는 범위도 정해져있는데 폴더를 한 겹 더 겹쳐서 올린다던가..

처음으로 git으로만 내 사이트를 서비스하게 되었습니다..
너무 신이 나서 가비아에서 가장 맘에들고 싼 도메인도 구매하였습니다..
도메인도 vercel에 등록할 수 있어서 등록했습니다..
도메인 등록은 vercel에서 정해진 형식을 알려줘서 쉽게 등록할 수 있었습니다.

사이트 개설 기념으로 게임을 구현해줍니다.

게임 캔버스(Game Canvas) 제작

게임 회사 인턴 시절, 열심히 C++ Console로 테트리스 만들던 기억을 떠올려봅니다..
곰플레이어 닷지는 아기자기한게 귀여웠습니다.. 비슷하게 넓이(480px), 높이(640px)로 지정해줍니다..

게임 루프(game loop) 제작

게임은 기본적으로 하나의 while 문으로 동작합니다..
어느 게임 엔진이든..계속 반복되는 while문이 있습니다..
콘솔창에서는 단순한 while 문으로 제작했었지만 웹 라이브러리 중에 requestAnimationFrame 이라는 렌더링 엔진 라이브러리가 있습니다..
단점은 모니터 주사율마다 다른 게임 속도..나중에 deltaTick을 설정해 통일하도록 하는게 좋겠죠..히히

발사체를 피하는 게임인데 발사체의 속도가 일정하면 게임이 루즈하고 재미 없겠죠..
게임 시간이 지날수록 난이도가 어렵도록 하겠습니다~
게임 루프에 넣을 것들

• 시간(초 단위)
• 플레이어
• 발사체
• 스코어
• 시간 지남에 따른 발사체 속도 증가

발사체(projectile) 제작

플레이어를 계속 괴롭혀줄 발사체를 만들어봅시다.
발사체에 조건을 붙여줍니다.

• 플레이어의 위치로 이동합니다.
• 화면 상단에서 발사됩니다.
• 상단에서 나온 이후엔 하단에서도 발사됩니다.
• 플레이어와 부딪히면 사라집니다.

플레이어(player) 제작

플레이어는 발사체를 피하고 맞으면 아파야합니다..
플레이어의 기능

• 상하좌우 움직입니다.
• 맞으면 HP가 닳거나 게임이 끝납니다.

const CANVAS_WIDTH = 400; // 게임화면 넓이
const CANVAS_HEIGHT = 500; // 게임화면 높이
const PLAYER_SPEED = 4;    // 플레이어 속도
const PLAYER_SIZE = 20;    // 플레이어 사이즈
const BULLET_RADIUS = 4;   // 발사체 사이즈
const BULLET_SPEED = 3;    // 발사체 속도
const INITIAL_SPAWN_INTERVAL = 500; // 발사체 생성 주기
const INTERVAL_DECREASE = 50;       // 발사체 속도 증가량
const MIN_SPAWN_INTERVAL = 100;     // 발사체 최대 속도
const DIFFICULTY_INTERVAL = 3000;   // 발사체 속도 증가 주기

대충 구현하다 보면 이런 데이터가 필요합니다..