데모앱·위젯
카드를 끌어 맞추는 5×5 퍼즐 패드 웹앱
카드를 끌어 놓고 돌려 도안과 같은 그림을 만드는 가상 퍼즐 12문제를 직접 풀어 볼 수 있습니다.
pattern-board-demo-158903-production.up.railway.app
열어 보시면 이런 걸 확인하실 수 있습니다
- [문제 고르기]에는 푼 문제와 해 보다 멈춘 문제가 따로 표시됩니다
- 카드를 끌어 칸에 놓거나 누른 뒤 칸을 눌러 놓고, [돌리기]로 90도씩 돌립니다
- [확인]에서 틀리면 놓은 그대로 남고, 두 번 틀리면 [힌트]가 나옵니다
- [문제 데이터]의 [90° 돌린 답도 확인]으로 돌린 그림의 정답 처리를 봅니다
만들면서 풀어야 했던 것
- 정답을 정해진 배치 하나로만 보면, 다른 배치로 같은 그림을 만든 경우도 틀린 것이 됩니다. 놓은 카드로 보드의 색 지도를 만들어 도안의 색 지도와 비교하게 해, 배치가 달라도 그림이 같으면 정답이 되게 했습니다. 돌린 그림을 정답으로 볼지는 문제마다 정하고, 엔진 안의 풀이기가 정답이 되는 배치 수를 직접 세어 어려움 4문제는 각각 4가지로 나옵니다.
- 손가락 하나로 집고 돌리고 놓는 동작은 Pointer Events로 받아, 카드를 끄는 동안 놓일 칸을 먼저 밝히고 손을 떼면 칸에 맞춰 붙게 했습니다. 보드 밖에서 손을 떼면 카드가 원래 자리로 돌아가고, 짧은 사이에 같은 곳을 두 번 누른 것은 한 번으로 봅니다. 화면은 데스크톱 브라우저의 터치 흉내 모드로 360·768·1180·1280 폭에서 확인했고, 실제 태블릿에서는 확인하지 않았습니다.
- 틀렸을 때 처음부터 다시 하지 않도록, [확인]에서 틀리면 보드를 놓은 그대로 두고 [계속하기]로 이어서 고치게 했습니다. 힌트는 두 번 틀린 뒤에 열려 먼저 다른 칸 수를, 다음에 그 칸의 테두리를 보여 주고 정답 칸을 대신 채워 주지는 않습니다. 푼 기록은 계정 없이 그 기기의 브라우저 저장소에만 남습니다.
비슷한 걸 만들어 보고 싶으시다면
구간 견적으로 규모를 먼저 가늠해 보시거나, 조건을 적어 보내 주시면 범위를 정리해 회신드립니다.