이번엔 퍼즐게임을 만들어봤습니다.
이어맞추기
배움거리를 조각 퍼즐로 바꿔 푸는 Vue 3 + TypeScript + Tailwind CSS 정적 게임입니다.
- 🎮 놀러가기: https://typostudio.github.io/matchit/
- 📦 배움꾸러미 저장소: https://github.com/TypoStudio/matchit-packs/
- 꾸러미 목록: https://typostudio.github.io/matchit-packs/packs.json
스크린샷
| 모바일 — 설정 | 모바일 — 놀이 |
|---|---|
 |
 |
게임 소개
이어맞추기 는 한자·영어단어·수학 공식 같은 배움거리를 조각 퍼즐로 바꿔 푸는 게임입니다. 문제가 주어지면 판 위의 조각을 움직여 정답을 이루는 글자·기호 조각을 맞춰 없앱니다. 배움꾸러미만 갈아끼우면 어떤 과목이든 같은 규칙으로 즐길 수 있습니다.
두 가지 놀이가 있습니다.
- 배움 맞추기 — 꾸러미 문제의 정답 조각을 맞춰 없애는 기본 놀이.
- 수 더하기 — 같은 수를 합쳐 더 큰 수를 만드는 2048식 퍼즐.
노는 법 (배움 맞추기)
- 배움꾸러미와 단계(급수·학년·과목 등)를 고릅니다.
- 화면 위 이번 문제 에 풀 거리가 보입니다. (길면 좌우로 흐르고, 손으로 끌어 넘길 수 있습니다.)
- 푸는 방식을 고릅니다.
- 고르기 — 정답을 이루는 조각을 순서 상관없이 하나씩 톡.
- 모으기 — 조각을 끌어다(또는 두 조각 골라) 정답 글자들을 판에서 서로 붙여 완성. 한 글자 정답은 그 조각을 톡.
- 정답을 완성하면 조각이 사라지고 위 조각이 내려오며 새 조각이 채워집니다. 이어서 풀면 이음 점수가 올라갑니다.
진행 방식
- 한 문제씩 — 한 문제를 풀고 다음 문제로.
- 이어풀기 — 여러 문제가 이어진 판에서 만들 수 있는 답을 계속 풀이.
- 자유롭게 — 이동 제한 없이 마음껏.
그 밖의 규칙·설정
- 마당(스테이지) — 한 단계는 문제 10개씩 묶음으로 나뉩니다. 문제 순서는 무작위로 섞여 기기에 저장되어, 다시 시작해도 같은 순서로 이어집니다.
- 보여주기(양방향 꾸러미) — 단어 꾸러미는 뜻↔철자, 한자는 한자↔훈음처럼 방향을 바꿔 풀 수 있습니다.
- 귀띔·정답 보이기·이웃끼리 바꾸기·판 크기·조각 꾸밈·빛깔(종이/밤/풀빛) 을 설정에서 조절.
수 더하기
판 위의 수 조각을 합쳐 더 큰 수를 만드는 퍼즐입니다. 설정의 합치기 방식으로 고릅니다.
- 조각 바꾸기 — 조각을 바꿔 같은 수 3개 이상을 상하좌우로 붙이면 합쳐집니다 (2+2+2 = 6). 이어서 합칠수록 이음 점수가 오르고, 더 합칠 수 없으면 끝.
- 조각 더하기 — 한 조각을 다른 조각에 끌어다(또는 두 조각 골라) 더해 두 수의 합으로 만듭니다. 더한 뒤에도 같은 수가 3개 이상이면 저절로 합쳐집니다.
기능 요약
- 배움꾸러미 목록: 시작 시 별도 저장소(matchit-packs)의
packs.json목록을 불러옴 (한자·영어단어·영문법·국어·과학·수학·역사 등) - 무작위 문제 순서: 단계 문제를 섞고 그 순서를 기기에 저장해 다시 켜도 복원
- 꾸러미별 화면 구성: 메타로 판 크기·조각 꾸밈·넓은 조각을 꾸러미마다 지정(하드코딩 없음)
- 꾸러미 더하기: 바깥 꾸러미 주소(URL)를 더하거나 빼기(목록은 기기에만 저장)
- 내 기록 지우기: 진행·순서·설정을 한 번에 비우기
- 빛깔 바꾸기, 점수 그림(PNG) 나누기, 모바일 전체화면 놀이