자바스크립트 내공기르기(5) - 벽돌 쌓기 -

자바스크립트 내공기르기(5) 

- 벽돌 쌓기 -

게임 오버까지 구현했다면, 드디어 부숴버릴 벽돌을 쌓을 시간이다. 먼저, 벽돌쌓기를 위해서는 2x2 배열을 이해해야 한다. 자바스크립트 2x2 배열은 행과 열을 의미한다. row는 행, 가로를 의미하며, column은 열, 세로를 뜻한다. 벽돌을 쌓는 row, column이 숫자값에 따라서 brick(벽돌 변수)의 x,y값이 일정하게 변하면서 정렬되어야 한다.

단순하게 생각하면, 다음과 같다.

var brick = [ ] -->배열 선언

 

brick[0][0] = { x: x값 , y: y값 }

brick[0][1] = { x: x값 , y: y값 } 

brick[0][2] = { x: x값 , y: y값 } 

brick[0][3] = { x: x값 , y: y값 } 

brick[0][4] = { x: x값 , y: y값 }   

 .

 ...

brick[1][0] = { x: x값 , y: y값 }

brick[1][1] = { x: x값 , y: y값 }

brick[1][2] = { x: x값 , y: y값 }

brick[1][3] = { x: x값 , y: y값 }

brick[1][4] = { x: x값 , y: y값 }

 ....

이렇게 하드코딩을 할 수도 있겠지만 그렇게 하지 않는다.

 

1 『 벽돌 속성지정 』

벽돌의 속성에는 벽돌너비,벽돌높이,벽돌사이 너비, 벽돌과 캔버스 윗공간, 벽돌과 캔버스 왼쪽공간, 벽돌 행 개수, 벽돌 열 개수 총7개의 변수가 필요하다. 이를 위해, 벽돌의 x, y값을 담을 2x2배열은 bricks = [ ]로 배열선언을 한다.

 

---

//벽돌 지정

var brickColumnCount = 9;

var brickRowCount = 3;

var brickWidth = 72;

var brickHeight = 20;

var brickPadding = 10;

var brickOffsetTop = 30;

var brickOffsetLeft=36;

var bricks = [ ] ;

---

2 『 벽돌배열 선언 』 

벽돌 2x2 배열에 각각 x,y 좌표값을 지정한다. 배열로 구구단을 작성하던 시절 코드를 떠올리며, 2x2 배열을 지정해보자.

 

---

for ( r = 0; r < brickRowCount;  r++ ){

        bricks[r] = [ ];  ->행 값에 배열 선언

for( c = 0;  c < brickColumnCount;  c ++ ) {

          bricks[ r ][ c ] = { x : 0 , y : 0  }   -> r:행, c:열에 해당하는 x값, y값을 객체값으로 지정  

 }

}

---

3 『 drawBricks함수 생성 』  

//코드실행 

---

function drawBricks( ) { 

      for ( var r = 0;  r < brickRowCount;   r ++ ){ 

                 for ( var c = 0;  c < brickColumnCount;  c ++ ) {                 

                             var brickX = ( c * ( brickWidth + brickPadding ) ) + brickOffsetLeft;      ---> ①

                             var brickY = ( r * ( brickHeight + brickPadding ) ) + brickOffsetTop;      ---> ②

                             bricks[ r ] [ c ] . x = brickX;    --> ③

                             bricks[ r ] [ c ] . y = brickY;

 

                             ctx.beginPath( );  

                             ctx.rect( brickX , brickY , brickWidth , brickHeight );  --> ④

                             ctx.fillStyle = 'green'

                             ctx.fill( );

                             ctx.closePath( );

                 }

       }

 

}

---

-> ① Column(열)값이 9이다. 벽돌을 x방향으로 9장 생성하려면 Column값인 'c'와 '벽돌 길이 + 벽돌사이 공간'을 곱한 수에 벽돌 좌측여백을 더해주면 된다. 

 

-> ② Row(행)값이 3이다. 중복 for루프구문에서 하위 루프속의 r값은 계속 0,1,2로 각각 고정된다. 세로로 설치하는 벽돌은, 가로로 벽돌이 모두 9장 설치될 때까지 x값은 고정되어야 한다. 오직 높이값만 변화한다. 따라서 r값과 벽돌 높이값 그리고 벽돌 공간을 곱한 뒤에 벽돌과 캔버스 사이의 offSetTop을 더해주면, 순차적인 높이로 벽돌이 설치된다. 

  

-> ③ 아래에서 사각형을 만들때마다 캔버스 사각형의 x, y값이 변해야 한다. 변하는 값을 2 x 2배열의 x, y값에 지정해준다.

 

-> ④ 캔버스에서 사각형을 생성하는 내장함수이다.

 

 4 『 drawBrick( ) 함수실행 』 

draw ( ) 함수에서 drawBrick( )함수를 실행해보자. 아래와 같은 벽돌이 만들어진다.