수박 게임 클론

충돌 이벤트를 게임 규칙으로 바꾸는 과정

한때 한창 유행하던 수박게임이 어떻게 만들어졌는지 궁금해 학습용 클론을 만들었습니다. 오픈소스 원본을 참고하고 JavaScript·Matter.js의 입력, 낙하, 충돌·병합, 점수 처리 흐름을 살펴보며 게임 구현 방식을 익혔습니다.

구현 환경

JavaScript · Matter.js · Vite

실행 구조

브라우저 단일 페이지 · Canvas 렌더링

핵심 관심사

이벤트 처리 · 상태 제어 · 충돌 판정

기존 문제

유행하던 수박게임의 동작을 직접 구현하면서 이해하고 싶었습니다. 화면의 물체 움직임이 입력 제어, 물리 충돌, 병합 조건과 점수 변경으로 어떻게 연결되는지 살펴볼 필요가 있었습니다.

사용자가 필요로 한 것

개인 학습을 위해 브라우저에서 직접 조작할 수 있고 입력·낙하·충돌·병합과 점수 변경을 관찰할 수 있는 작은 게임이 필요했습니다.

목표

유행하던 게임의 구현 원리를 공부하려 만든 학습용 클론입니다. README의 paulantoine2/suika 원본 참고 관계를 유지하며, 현재 코드는 과일을 텍스처 대신 원형 물체로 표현합니다.

전체 아키텍처

이미지의 텍스트 설명

키보드·마우스 입력이 main.js의 currentBody와 disableAction을 변경하고, 과일 정의가 Bodies.circle 생성에 사용됩니다. World의 물체를 Engine과 Runner가 시뮬레이션하고 Render가 Canvas에 그립니다. collisionStart는 게임 규칙과 점수 갱신으로 이어집니다.

기술 선택 이유

DB · API · 인프라 구조

핵심 처리 흐름

이미지의 텍스트 설명

과일 생성 후 위치를 조절하고 낙하 입력을 받습니다. 입력을 잠근 뒤 1초 후 다음 과일을 생성합니다. 물리 충돌에서는 먼저 상단 센서를 검사하고, 종료 대상이 아니면 두 물체의 index 존재와 동일 여부를 확인합니다. 마지막 단계가 아니면 기존 두 물체를 제거하고 다음 단계 과일을 생성한 뒤 점수를 더합니다.

1. 01. 입력 좌표를 게임 좌표로 변환

   마우스의 clientX에서 Canvas의 왼쪽 좌표를 뺍니다. Math.max / Math.min으로 좌표를 30 + radius부터 590 − radius 사이로 제한해 과일 중심이 벽 밖으로 나가지 않도록 합니다.

2. 02. 낙하와 다음 턴을 분리

   낙하 시 isSleeping을 해제하고 disableAction을 true로 바꿉니다. setTimeout이 1초 후 addFruit를 호출하고 입력을 다시 허용합니다. 물리 시뮬레이션은 이 시간에도 계속 진행됩니다.

3. 03. 충돌 객체를 검증한 뒤 병합

   bodyA와 bodyB에 index가 정의되어 있고 두 값이 같아야 병합합니다. 마지막 단계이면 종료하고, 아니면 두 물체를 제거한 뒤 충돌 접점에 다음 단계 원을 생성합니다.

4. 04. 물체 변화와 점수 반영

   새 과일을 World에 넣은 뒤 Math.floor(newFruit.radius × 10)을 score에 더합니다. 점수 DOM은 textContent로 갱신합니다.

실제 서비스 적용 여부

소스 코드가 공개된 클론·학습 프로젝트입니다. 실제 서비스 운영 여부는 작성자 확인이 필요합니다.

검증 방법과 근거

공개 저장소 코드를 임시 로컬 환경에서 실행하고 실제 키보드·마우스 입력으로 플레이했습니다. 낙하와 병합에 따른 점수 증가를 확인해 시작·진행 화면을 캡처했습니다. 상용 게임의 완성도나 모든 종료·재시작 경로를 검증했다는 의미는 아닙니다.

실행 화면