javascript - 구글 공룡 게임 구현(5) - Collision detection(충돌감지)

dino 캐릭터의 움직임, cactus 들의 접근까지 구현했으니 

그 둘이 부딪히면 게임오버되게 만들어보자

충돌감지라고 영어로는 

Collision detection 이라고 하는데 게임에서는 빠져선 안되는 기능이다. 

2D인데다 사각형끼리의 충돌이니 간단하게 구현해보자

function collisionDetection(dino, cactus){
    let xValue = cactus.x - ( dino.x + dino.width );
    let yValue = cactus.y - ( dino.y + dino.height );
    if( xValue < 0 && yValue < 0 ){ // 충돌!
        // 충돌 시 실행되는 코드
    }
}

dino 가 점프했을 경우도 포함하여 두 사각형이 겹치는 순간이 있으면 

if 문 안의 코드가 실행될것이다. 

 

충돌하면 alert 으로 게임오버를 띄우고 

프레임함수를 멈춰야되는데 

그러기에 앞서 변수를 생성해 애니메이션프레임을 넣어야함

let animation;

function frameAction() {
    animation = requestAnimationFrame(frameAction);

    if( xValue < 0 && yValue < 0 ){ // 충돌!
        // 충돌 시 실행되는 코드
        alert('게임오버');
        cancelAnimationFrame(animation);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

이제 이 충돌체크 함수를 forEach 문을 돌며 cactus 를 뿌려주는 곳에 위치시키면 

각각의 선인장에 대해 제대로 작동할것이다. 

    cactusArr.forEach((a)=>{
        collisionDetection(dino, a);
        a.x--;
        a.draw();
    })

 

 

* 실행해보니 제대로 점프해서 피했는데 선인장 똥꼬에 걸려 게임오버 판정이 나고있다. 

선인장이 왼쪽 끝에 닿으면 사라지게끔 해보자

 

1. 선인장의 x 값이 0 밑이면

2. 해당 선인장은 사라지며

3. 선인장 Array 에서도 없애줘야함 

    cactusArr.forEach((a, i, o)=>{
        if(a.x < 0){
            o.splice(i, 1);
        }
        collisionDetection(dino, a);
        a.x--;
        a.draw();
    })

 

forEach 문의 추가 파라미터와 Array 의 splice 기능을 이용해 구현완료

 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Array.prototype.forEach() - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Array.prototype.splice() - JavaScript | MDN