이번 프로젝트는 웹앱을 만드는 프로젝트이다.

웹이랑 웹앱의 차이점이 뭔가 생각해봤는데 웹에서 인터렉티브, 즉 상호작용이 많으면 앱이라고 할 수 있는 것 같다.

상호작용이 많은 프로젝트라고 하면 보통 떠오르는 것이 게임이다.

그래서 웹으로 게임을 만들어보았다.

🃏카드 하로(Card Halow)

카드 하로는 포커 ➡️ 하이로우를 통해 하이스코어를 경쟁하는 게임이다.

어쩌다가 주제를 하이로우로 잡았냐는 생각이 들지 않는가

왜 하이로우인가?

사실 별 거 없다.

일본 게임이라 가능한 컨텐츠
당연히 한국에서는 절대 안된다.

가끔씩 하던 모바일 게임에서 필요한 아이템을 얻기 위해서 카지노라는 컨텐츠를 해야했는데 제일 효율이 좋았던 것이 이 하이로우였다.

이때 너무 많이 한 나머지 머릿속에 깊숙히 박혀있었나보다.

적당히 했어야 하는건데...

하이로우란?

기본 하이로우는 뭔가 단계가 많은데, 나는 모바일 게임의 룰을 따라서 만들거기 때문에 단계가 간소하다.

♠️포커

우선 하이로우를 하기 위해서는 포커에서 투페어 이상이 나와야한다.

그리고 나온 족보에 따라서 스코어의 배율을 정할 수 있다.

♦️하이로우

1️⃣ 하이로우를 시작하면 카드를 두 장 뽑는데, 우측 카드는 공개하지 않는다.

2️⃣ 우측 카드가 좌측보다 작은지 큰지 하이, 로우로 결정한다.

3️⃣ 성공했다면 이대로 멈출건지, 더블업(2배) 할 것인지 정한다.

구성

메인

하이스코어를 경쟁하는 게임이기 때문에 DB를 사용해야 했고, 이에 Supabase로 구글 로그인, 스코어 저장을 기능을 구현했다.

🎰게임 화면

포커	하이로우

게임 방식은 위에서 언급했던 것과 같다.

GO의 횟수가 10회째라면 자동으로 종료하게 했다.

만약 로그인 한 상태에서 올인하여 코인이 0이면 다음날 자정에 10,000 코인을 추가해놓도록 스케쥴링을 짜놓았다.

🏆랭킹

현재 하이스코어 상태를 알 수 있는 페이지이다.

일부러 알아보기 어렵게 하기 위해서 숫자 구분자를 찍어놓지 않았다.

여담이지만 1~3등에게 커피 사준다고 했더니 하루종일 하셔서 Supabase가 정지될까봐 두려웠었다.

😰어려웠던 점

사실 게임을 만든다는 게 쉽지 않다는 것을 알았는데, 막상 만들어보니 처리해야하는 조건 분기가 너무 많아서 힘들었다.

그러다보니 수 많은 경우의 수가 생기다보니 언제 어디서 버그가 생길지 몰랐었다. 프로젝트 발표 후, 생긴 버그 고치는데 애 좀 먹었다.

다음번에 또 게임을 만들어본다면 더 나은 방안이 있으면 좋겠다.

🙌결과

github : https://github.com/HYK-Nov/card-HL
배포 : https://card-hl.vercel.app