본문 바로가기
플래시 자료 제작

교플강6(벽돌깨기 만들기 - 충돌이해)-벽돌깨기를 위하여

by 민서아빠(과학사랑) 2013. 1. 16.

4. 무비클립간의 충돌을 이해하고, 충돌후 반응을 처리할 수 있다.

 

 

block3.swf
다운로드

 

 

공도 화면상에서 움직이고, 조절바도 마우스를 따라 다니며 움직이도록 만들었다. 이제는 조절바로 내려오는 공을 받았을때 다시 튕겨 올라가게 만들어야 할 것이다 .그렇다면 조절바와 공이 충돌이 일어나는지 어떻게 알 수 있겠는가


 

가. 조절바와 공의 충동방법을 이해한다. (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개가 마우스를 따라 다닐 수 있도록 만들어 공을 떨어뜨리지 않고 오랫동안 칠수 있는 게임을 만들어 보자.

block4.swf
다운로드

 

 

벽돌깨기3.fla
다운로드

 

벽돌깨기완성.fla
다운로드

 

벽돌깨기응용.fla
다운로드