제1회 항해 플러스 코육대 '테트리스' 회고

okky 구경하다가 재밌어보인 해커톤을 발견했는데, 항해 플러스에서 주관한 코육대 (코딩 육상 대회)입니당!! 추석연휴동안 집돌이인 저에게 꾸준한 자극이 될 것 같아 참여해보았습니다.

위 이미지를 누르면 제1회 코육대 이벤트로 이동합니다.

종목은 총 6가지!
1. 세뱃돈 계산기
2. 행맨 게임
3. 송편 터트리기
4. 테트리스
5. 총알 피하기
6. 자유 종목

저는 이 중에 제일 만만해보이는 테트리스에 도전했습니다.

테트리스 화면

배경은 추석 느낌에 나도록 보름달에 아래에 뛰어다니는 같은 토끼들~🐇🐇🐇

언어 선택

• 평소에 잘 사용해보지 않은 Next.js 13으로 개발해보았습니다.
• Next.js 버전이 13으로 올라오면서 작성방식이 많이 변경되어 초반에 많이 헤맸습니다. (공식문서 최고 👍)

기능 설명

• 누구에게나 친숙한 테트리스 게임이다 보니, 기능 명세하는데는 큰 어렵진 않았습니다. 다만, 이왕 만들거면 재미있게 만들고 싶어 몇가지 기능들을 추가해보았습니다.

1. 테트리스 기본 기능

   • 테트리스는 Canvas 태그를 이용하여 구현하였고, key 이벤트에 따라 사용자에 의한 이벤트가 발생되도록 처리했습니다.

     const handleKeyPress = (e: KeyboardEvent) => {
         switch (e.key) {
           case "ArrowLeft":
             playerMove(-1);
             break;
           case "ArrowRight":
             playerMove(1);
             break;
           case "ArrowDown":
             playerDrop();
             break;
           case "ArrowUp":
             playerRotate(1);
             break;
           case " ":
             playerHold();
             break;
           default:
             break;
         }
     };

     

2. 블록 선정

   • 우리가 추석에 먹는 필수 음식 중 하나는 송편입니다. 이왕이면 게임하면서 송편을 모으면 재미있을 것 같아, 무작위 블록 중에서 1개의 송편이 나올 수 있도록 로직을 구성해보았습니다.

         const setSpecialPoint = (piece: number[][]) => {
           let cnt = 0;
           for (let y = 0; y < piece.length; y++) {
             for (let x = 0; x < piece[y].length; x++) {
               if (piece[y][x] !== 0 && cnt < 1 && Math.random() < 0.1) {
                 piece[y][x] += 10;
                 cnt++;
               }
             }
           }
           return piece;
         };

     

3. 점수 제도

   • 송편만 모으고 라인만 깨고 플레이 시간만 길면 재미없죠!! 재미를 위해선 경쟁이 필요하죠!!! 그래서 점수 제도를 추가했습닌다. 점수는 수집한 송편 수 + 완성한 라인 수 + 플레이 시간의 총합으로 구성했습니다.

   

4. 반응형 UI

   • 게임을 web으로만 할거라는 고정관념은 빠2!! 태블릿과 모바일에서도 접근이 발생하면 플랫폼에 맞춤 레이아웃이 나오도록 하였습니다.

       deviceDetect.browser ? (
         <Web />
       ) : deviceDetect.tablet ? (
         <Tablet />
       ) : (
         <Mobile />

   

보너스) 랭킹 시스템

• 게임을 좋아하는 입장에선 본인의 최고 기록은 언제나 남길 원하죠! 그래서 랭킹 시스템을 나중에 추가해보았습니다.

  

참여 소감

• 추석 연휴 동안 맛있는 송편과 Netflix를 시청하며 보낼 걸로 예상했었는데, 항해 플러스에서 주최한 코육대 덕분에 과제를 수행하며 재미있게 보냈습니다. 원래 멀티 게임, 단계 별 테트리스 등도 고민하였으나, 언제나 계획은 거창할 뿐.. 1~2일 기간으로 예상한 것과 달리 혼자서 하다보니 한계를 느껴 기능을 축소하며 역시 개발을 혼자서 하는게 아니라는 점을 다시금 깨우쳤습니다.ㅎㅎ
• 테트리스가 오래된 게임이다보니 관련 리소스가 많아 난이도가 쉬울 것으로 생각해 만만하게 도전하였으나, 기능보단 게임으로써 유저 친화적인 UI 요소들에 시간을 많이 소모하였습니다. 사소하게 여겼던 UI 요소가 실제론 서비스의 품질을 좌우한다는 것을 느끼며 UI에 신경써 프로덕트를 완성하였습니다.
• 이번 코육대는 평소의 제가 놓친 UI의 중요성을 되새길 수 있었던 좋은 경험이었습니다. 제 2회 코육대도 주최되기를 기대합니다.

테트리스 링크

항해 플러스 코육대 링크