PRISM POP

세 개를 맞추는 일과 묶음을 떨어뜨리는 일

PRISM POP은 같은 색 버블 세 개 이상을 연결하는 퍼즐입니다. 연결한 버블이 사라질 때 천장과 이어져 있지 않은 묶음도 떨어집니다. 눈앞의 세 개를 맞추는 것과 위쪽 연결 고리를 끊는 것은 서로 다른 목표가 됩니다.

벽에 튕기는 경로를 이용할 수 있고 현재 버블과 다음 버블을 바꾸는 기능도 있습니다. 곧장 닿지 않는 자리에 어떤 각도로 접근할지 생각하는 재미를 코드의 경로 계산과 연결해 읽어보세요.

육각형처럼 이어지는 격자

dist/engine.js에서 먼저 볼 함수는 neighbors()입니다. 행이 홀수인지 짝수인지에 따라 대각선 이웃이 달라집니다. 화면에서는 같은 간격의 원처럼 보여도 단순한 상하좌우 네 방향 배열과는 다릅니다.

component()는 연결된 버블을 찾습니다. 같은 색을 찾는 경우와 색을 무시하고 연결 여부를 찾는 경우를 나누어 쓰며, disconnected()는 천장 쪽에서 이어진 항목들을 제외한 나머지를 구합니다. 한 종류의 탐색을 두 가지 판정에 활용하는 예입니다.

발사와 판정이 만나는 흐름

fire()가 발사체를 만들고 step()이 시간을 따라 움직입니다. firstCollision()은 벽·천장·버블 중 먼저 부딪히는 대상을 찾고 attach()는 새 버블이 붙은 뒤 제거·낙하·점수를 처리합니다. game.js는 이 상태를 Canvas에 그리고 입력과 효과음을 연결합니다.

이 순서대로 읽으면 점수를 먼저 고치는 대신 어떤 버블이 왜 사라졌는지부터 추적할 수 있습니다. 단순히 가까운 원끼리 없애는 방식이 아니라 격자의 연결 관계를 사용한다는 점이 핵심입니다.

이번 소스에서 보완한 렌더링

제공 버전 1.0.1에서는 발사대의 타원을 그리는 호출을 수정했습니다. 회전각 다음에 시작각과 끝각을 모두 전달하도록 보완했습니다.

ctx.ellipse(0, 30, 53, 12, 0, 0, Math.PI * 2);

그리기 도중 예외가 발생하면 뒤에 연결된 애니메이션 루프가 시작되지 않을 수 있습니다. 메뉴가 보이거나 시작 버튼이 눌리는 것과, 게임 화면이 계속 갱신되는 것은 별도로 확인해야 합니다.

직접 바꿔볼 과제: 색 수와 배열을 따로 비교하기

1. LEVELS의 첫 스테이지에서 색 수를 바꾸기 전에 원래 배열을 기록합니다.
2. 색 수 또는 행 수 중 하나만 바꾸고 초반에 만들 수 있는 연결을 비교합니다.
3. misses를 바꿀 때는 천장이 내려오는 주기와 위험선까지의 여유를 함께 봅니다.

색 수를 늘리는 것과 행을 늘리는 것은 다른 종류의 난이도 변화입니다. 연결 탐색 코드를 수정했다면 같은 색 세 개 제거뿐 아니라 서로 다른 색이 천장에 매달린 경우도 확인하세요.

python3 -m http.server 8080 --bind 127.0.0.1 --directory dist