[Javascript] 2차원 배열 2048 게임

2048 게임이 무엇인지 모른다면 한번 검색해보고 직접 해보는걸 추천한다.

마우스가 움직이는 방향마다 4*4 판의 숫자가 모여지고 같은 숫자는 서로 더해지는 게임이다.

아래와 같은 모양의 4*4 판에 방향키가 움직일떄마다 왼쪽으로, 위로, 옆으로, 아래로 모아지면서,

같은 숫자가 만나면 더해지는 방식이다.

 

 

 

 

왼쪽,오른쪽으로 움직일 경우와, 위아래로 움직일 경우가 비슷한 방식으로 코드가 이루워지기 때문에 

왼쪽과, 위로만 움직이는것을 보고 코드를 짜보자. 우선 코드먼저 보자면.

현재 data = [ [0,2,4,2], [0,0,8,0], [2,2,4,8], [0,16,0,4] ]; 2차원배열로 4*4 형식을 이루고있다.

글로 설명하자면

값을 표로 정리하자면

 

이런식으로 진행된다.

왼쪽으로 몰떄는 0을뺸 값을 newData에 저장 하면서 현재 cellData 와 PrevData 의 값이 일치할경우

*= -2 해서 다음값과 다르게 변경하여 저장해준다. 

다를경우는 해당 값을 그냥 newData[i]에 저장해 준다.

이렇게 새로운 데이터는 newData에 쌓이게 되고,

이중포문을 돌려 

data[i][j] = Math.abs(newData[i][j]) || 0 ; 을 하여 

newData에 저장된 값을 data[i][j]에 옴겨서 그리게 된다.

 

오른쪽으로 몰경우는 방향을 잘 생각해야 하는데

값을 저장하고 해당 값을 오른쪽부터 정렬시켜야 하므로 잘생각해보자 어떻게 할지는

 

 

 

위, 아래

위,아래로 몰떄는 

왼쪽 오른쪽의 경우는 data = [] 에 들어있는 값을을 행단위로 처리했다면,

이번에는 해당 값들을 

data = [

  [ 0, 2, 4, 2]

  [ 0, 0, 8, 0]

  [ 2, 2, 4, 8]

  [ 0, 16, 0, 8]  

]; 

의 값들을  이중 forEach 를 통해서 위로 정렬해야 하므로 행이 아닌 열끼리 비교해야 한다

즉 [ 0 , 2, 4, 2 ] 의 값을  행에다가 넣는게 아닌  열에다가 넣어야 하므로

newData = [  [], [], [], [] ]; 에다가  열마다 1개씩 넣어줘야 한다.

왜냐하면  [0,0] [1,0] [2,0] [3,0] 끼리 값을 비교해줘야 하기떄문이다.

그래서 이번에는

currentCell = newData[j]; 로 데이터를 넣어주게 된다 그러면

newData[0], newData[1], newData[2], newData[3]에 값을 넣게된다.   즉

 

i = 0 일때

j = 0이면

newData[0] = []

j = 1 이면 

newData[1] = [2]

j = 2 이면

newData[1] = [4]

j = 3 이면

newData[1] = [2]이다

이것을 이중배열로 나타내자면

newData = [

                     [],

                     [2],

                     [4],

                     [2]

]

가된다 즉 data[0]=[0,2,4,2]의 값이 newData[0],newData[1],newData[2],newData[3] 으로 골고루 분배되며,

i가 3이될떄까지 data[1,2,3] 일때의 값이 newData[0,1,2,3]에 골고루 퍼지게 된었다.

 

저렇게 표현할수 있다.

newData (색칠된)에서 0을 제외한 데이터가 newData에 남는다고 생각하면  newData 오른쪽 표와 같다. 

0을제외한 데이터를 data에 다시 넣어줘야 하는데 up한 데이터를 넣으므로 즉

에서

로 변경되야 하므로 

newData 의  [2, 0, 0, 0]이   data[0][0], data[1,0] data[2,0] data[3,0] 에 들어가야 하므로

data[j][i]로  뒤쪽을 i를 넣어주므로 고정시켜주고 j를 앞에 넣어주므로써 [1] [2] [3] [4]에 각 행마다 넣어준다.