JS를 이용한 공룡게임

manyCactus.forEach((a, i, o)=>{
//x 좌표가 0 미만이면 제거
if(a.x < 0){
o.splice(i, 1);//제거
}
a.x--;
collisionCheck(dino, a); //충돌체크
a.draw();
})

장애물의 X좌표가 0이하이면 slice함수를 통해 제거

slice( begin, end ) => 배열의 begin부터 end까지 자른다

return은 추출한 요소를 포함한 새로운 배열

document.addEventListener('keydown',function(e){
if(e.code === 'Space'){
jumping = true;
}
})

space버튼에 대한 이벤트 처리

 function collisionCheck(dino, cactus){
 var xDifference = cactus.x - (dino.x + dino.width);
 var yDifference = cactus.y - (dino.y + dino.height);

if(xDifference < 0 && yDifference < 0){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    cancelAnimationFrame(animation);
   }
}

충돌체크를 통해 (장애물)의 x 좌표 - (dino)의 x좌표 + dino.x길이가 0보다 작다면

x축 충돌이 일어남

충돌체크를 통해 (장애물)의 y 좌표 - (dino)의 y좌표 + dino.y길이가 0보다 작다면

y축 충돌이 일어남!

![](https://velog.velcdn.com/images%2Ftjdrhd1207%2Fpost%2Fdc2d986f-b9dc-4e9b-8b1c-3e2f8d48508d%2Fimage.png)