자바스크립트 내공기르기(6) - 벽돌충돌 -

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

- 벽돌충돌 -

 

2차원 배열로 벽돌을 쌓는데까지 성공했다면, 공과 반응해서 벽돌이 사라지는 충돌을 구현해야한다. 벽돌이 사라지는 알고리즘은 지난번 포스팅에서 구현한 반복 루프구문을 재사용하는 것에 핵심이 있다.

 

2차원 배열의 행,열 값에 brickWidth와 brickHeight를 더한 값이 곧 벽돌의 좌표값이다. 이 좌표값에 공의 좌표값이 들어간다면, 벽돌의 좌표값이 사라져야 한다. 또한 벽돌의 객체에 x,y 좌표값 이외의 status(현재상태)값을 넣어서, status값이 0이라면, 캔버스를 갱신할 때 벽돌을 생성하지 않도록 하면, 흡사 공이 충돌하는 순간 다음 프레임부터 벽돌이 생성되지 않기 때문에 벽돌은 사라진다.

1 『 collideBrick( ) 함수 생성 』

//코드 

---

function collideBrick(  ) {

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

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

          var currentBrick = bricks[r][c];

          if( x > currentBrick.x  && x < currentBrick.x + brickWidth  &&  y > currentBrick.y && y < currentBrick .y + brickHeight ){

                                        dy = -dy; 

                     }

               } 

        }
 }

---

현재 벽돌의 좌표값을 알아내기 위해서 루프구문을 활용한다. 그리고 currentBrick이란 변수에 현재 벽돌 좌표값을 저장한다.

 

x , y 값 ( 공의 좌표값 )이 currentBrick값에 벽돌 길이와 높이를 더한 값(벽돌 위치와 크기 계산)에 위치하면 y축의 부호가 반대로 변한다. 일단, draw( )함수에 collideBrick( )를 넣고 실행해보자. 벽돌이 사라지지 않지만 공이 벽돌값에 반응해서 dy=-dy로 변하는 것을 알 수 있다. 

 2 『 Status 설정 』

공에 부딪친 벽돌인지 아닌지를 알 수 있도록 벽돌 객체 안에 status값을 1로 설정한다.

벽돌이 생성되면서 status는 1로 설정된다.   

 

벽돌이 있는 상태일 때만 충돌 코드가 적용되어야 하므로 currentBrick.status == 1 if구문을 넣어준다. 만일 벽돌과 충돌하면 , status 상태가 0으로 변해야 하기 때문에 collidBrick함수에 status값을 아래처럼 0으로 설정한다. 

 

공과 충돌하여 벽돌이 사라지는지 랜더링 해본다.