4. 무비클립간의 충돌을 이해하고, 충돌후 반응을 처리할 수 있다.
공도 화면상에서 움직이고, 조절바도 마우스를 따라 다니며 움직이도록 만들었다. 이제는 조절바로 내려오는 공을 받았을때 다시 튕겨 올라가게 만들어야 할 것이다 .그렇다면 조절바와 공이 충돌이 일어나는지 어떻게 알 수 있겠는가
가. 조절바와 공의 충동방법을 이해한다. (hitTest)
플래시 애션스크립트 중 hitTest 문을 이용하면 두 무비클립간의 충돌을 체크할 수 있다. hitTest는 두 무비클립이 충돌했는지 안했는지의 여부를 알려주는 역할을 한다.
무비클립A.hitTest.무비클립B |
무비클립A 와 무비클립B가 충돌을 했는지를 판정해 줍니다.
무비클립A.hitTest.(x,y,true) |
무비클립A가 우리가 지정해준 (x,y)좌표와 충돌하고 있는지 판정을 해 줍니다.
자 그렇다면 첫 번째 방법을 이용해서 조절바와 공이 충돌하고 있는지를 판정해 봅시다.
ball.hitTest(bar) |
나. 충돌후의 공 처리방법을 이해한다.
onEnterFrame = function () 문안에 아래와 같은 스크립트를 추가함으로써 조 절바와 공이 충돌하는지를 알 수 있고 충돌했을때 공의 방향이 바뀌도록 만들 수 있다. 아래 스크립트를 직접 추가한후 어떻게 변하는지 살펴보자..
//공과 조절바의 충돌여부 체크 if (ball.hitTest(bar)) { speedy = speedy*-1; } |
다. 벽돌 무비클립과 공의 충돌방법을 이해한다.
벽돌을 만들어 이름을 'block1'이라고 주고 공과 충돌했는지 여부를 판단한후 만약 충돌이 일어난다면 벽돌을 화면상에서 사라지게 만들어 보자.
if (ball.hitTest(block1)) { speedy = speedy*-1; block1._x = 1000; } |
만약 벽돌이 2개(block1.block2)라면 앞에서 쓴 스크립트를 한번 더 써주면서 block1 대신 block2라고 적어주면 될 것이다. 그렇다면 지금까지 배운 것을 토대로 벽돌깨기를 완성해 보자.
1)고려해야 할 사항에 대해 토의해 보고 변수명을 정해보자.
공의 인스턴스명 (ball) 조절바의 인스턴스명 (bar) 벽돌의 인스턴스명 (block1,block2.... ) 총 5개 |
2) 화면구성
3) 액션스크립트 작성
아래 액션스크립트에서 주의해 볼 것은
for (i=1; i<=5; i++) {
if (ball.hitTest(_root["block"+i])) {
speedy = speedy*-1;
_root["block"+i]._x = 1000;
}
}
이다 즉 각각의 벽돌과의 충돌체크를 일일이 해주지 않고 반복문을 사용해서 모든 벽돌과의 충돌을 한번에 체크하도록 하는 것이다. 반복문을 사용하여 체크하는 이유는 그렇게 하면 벽돌수가 10개 20개 가 된다해도 금방 스크립트를 수정할 수 있기 때문이다.
그리고 궁극적으로는 공이 y축위치가 400보다 커지면 게임오버 라는 메시지가 출력되도록 바꾸어야 할 것이다.
//초기 스피드 speedx = 10; speedy = 10; //조절바 움직이도록 함 bar.startDrag(true, 0, 350, 500, 350); //반복실행 onEnterFrame = function () { //공 이동 ball._x = ball._x+speedx; ball._y = ball._y+speedy; // 벽을 벗어나려고 할때의 조건문들 if (ball._x+ball._width/2>500) { speedx = speedx*-1; } if (ball._x-ball._width/2<0) { speedx = speedx*-1; } if (ball._y+ball._height/2>400) { speedy = speedy*-1; // 다음에는 ‘게임오버’로 교체 } if (ball._y-ball._height/2<0) { speedy = speedy*-1; } // 공과 조절바의 충돌여부 체크 if (ball.hitTest(bar)) { speedy = Math.abs(speedy)*-1; } // 공과 벽돌의 충돌여부 체크(반복문 이용) for (i=1; i<=5; i++) { if (ball.hitTest(_root["block"+i])) { speedy = speedy*-1; _root["block"+i]._x = 1000; } } } |
5. 응용 및 토의
가. 배열을 이용한 벽돌 배열방법 연구
벽돌의 위치를 미리 변수로 만들어 놓았다가 한꺼번에 위치를 배열하도록 만들어 보자
나. 공의 크기와 조절바 크기 변환방법 연구.
공의 크기와 조절바의 크기를 바꾸어 가며 테스트 해 보자.
다. 점수 나타내는 방법 연구
시작화면과 종료화면 또 깨진 벽돌수등이 나오게 만들어 보자.
라. 벽돌없이 공을 오랫동안 칠수 있는 게임도 만들어 보자.
조절바 4개가 마우스를 따라 다닐 수 있도록 만들어 공을 떨어뜨리지 않고 오랫동안 칠수 있는 게임을 만들어 보자.