리액트를 배우던 중 간단한 토이 프로젝트를 만들어 보면 좋을 것 같다는 생각이 들었다. 그래서 만들어 볼 건 야간에 어떤 후임이 액셀로 노노그램을 열심히 풀고 있길래 웹 사이트로 만들어 보고 싶어졌다.

노노그램이란, 가로와 세로에 숫자를 적어 놓고 그 숫자가 서로 일치하게 빈칸을 채우는 퍼즐이다. 숫자로 된 퍼즐을 모두 풀면 그림이 나오게 되는 원리 이다.

목표는 깃허브 페이지의 배포 기능을 통해 어디서든 접속 가능하게 까지 만드는 것이다.

어떻게 만들 것인가

리액트를 이용해서 메인 페이지를 만들고 그 안에 자바스크립트로 게임 로직을 구현한다.

우선 저 위의 사진은 너무 복잡하기 때문에 간단한 5 x 5 예제로 살펴보겠다.

정답은 위와 같다.

즉, 원래 저 모양이 있으면 저걸 가로 세로의 숫자로 변환해 줘야 한다.

problam.json
{
	"name" : "Plane",
    "answer" : [
    	[0,0,1,0,0],
        [0,0,1,0,0],
        [1,1,1,1,1],
        [0,0,1,0,0],
        [0,1,1,1,0]
    ],

}

이렇게 사전에 준비해 놓은 데이터가 있고, 이 데이터를 받아와
이렇게 격자 위와 옆에 표시해 줘야 한다.

대충 보여질 화면의 목업이다..

2차원 배열을 1차원 배열 2개로 만드는 알고리즘

[
  [0, 0, 1, 0, 0],
  [0, 0, 1, 0, 0],
  [1, 1, 1, 1, 1],
  [0, 0, 1, 0, 0],
  [0, 1, 1, 1, 0],
];

이 2차원 배열을 가로,세로에 보여질 숫자로 변환해야 한다. 가로는 x, 세로는 y라고 정하겠다.

x = [1,[1,1],5,[1,1],1] y = [1,1,5,1,3]

이다. 그리고 어치파 가로와 세로 밖에 없으므로 화면에 그리기 위한 데이터를 담는 하나의 리스트로 만들어 주면 좋을 것 같다.

gridData = [
  [1, [1, 1], 5, [1, 1], 1],
  [1, 1, 5, 1, 3],
];

gridData[0]은 가로를 의미, gridData[1]은 세로를 의미한다. 이제 대충 로직이 정리된 것 같다.

  1. 사전에 2차원 배열로 된 정답지 준비 (json)
  2. 정답지를 그리기 위해 gridData로 변환하는 코드 만든다음
  3. 사용자에게 보여줌
  4. 사용자는 그걸 보고 입력 가능한 grid에 자신의 정답을 입력
  5. 제출을 눌렀을 때 일치하는지 확인