[간단 웹게임]숨은그림찾기 / 나만의 월리를 찾아라 만들기 기록

개요

내가 원하는 이미지로 숨은그림찾기를 만들고 싶었다.

버전1

숨은그림찾기를 하고 싶은 이미지를 올린다
그 이미지에 있는 랜덤 요소를 정답목록에 올린다
-> 이미지에 있는 랜덤 요소를 뽑아내는 게 어려움

버전2

숨은그림찾기를 하고 싶은 이미지를 올린다
그 이미지의 랜덤 좌표를 정답목록에 올린다
-> 구현가능

진행

이미지를 올리고
랜덤 포인트 생성 버튼을 누르면
아래처럼 미리보기로 찾아야하는 정답 좌표 리스트가 뜬다

열심히 찾아서 클릭하면 된다

나만의 월리를찾아라

시행착오

1. 원래는 저 이미지의 인물 하나하나 중 랜덤으로 뽑아서 정답요소로 제공하고 싶었다
   -> API를 활용하면 학습된 요소만 구별할 수 있다는 단점
   -> 차라리 랜덤으로 좌표를 놓고 그 부분의 이미지를 찾는걸로 결론냈다
   -> 재미있는 클릭게임

토이프로젝트라서 쉽고 빠른 기능구현에 초점을 두었다

2. 서버나 DB까지 쓰고싶지 않아서 간단하게 웹 내에서 쓸 수 있기를 원했다
   -> 로컬스토리지에 이미지, 랜덤좌표 저장
   -> 새로운 이미지를 등록하면, 기존 이미지를 삭제하게 했다
   -> 이력이나 점수를 쌓는 게 아닌 단순 놀이에 초점

3. (이슈)클릭위치를 중심으로 동그라미가 그려졌다
   -> 미리보기 이미지를 중심으로 동그라미가 그려지길 바랬다
   -> 미리보기 이미지의 중심좌표를 저장하고 그 근처를 클릭하면, 중심위주로 동그라미 표기를 했다

4. (이슈)정답좌표가 이미지의 가장자리인 경우, 공백도 포함되어 노출됐다
   -> 랜덤 좌표를 뽑을 때, padding 값을 추가해서 공백이 잡히지 않게 처리했다

5. (이슈)정답을 찾고나서 다시 랜덤 포인트를 생성하면 동그라미 표기가 남아있었다
   -> 버튼 누르면 초기화 진행