게임

크롬 공룡 게임 만들기(4/4): 장애물 충돌 체크

이번에는 공룡과 장애물이 충돌하는 경우를 체크하고, 우리의 주인공들을 네모네모가 아니라 캐릭터 이미지로 바꿔보도록 하겠다. 매우 허접하지만 이 단계까지 하고 나면 대충 게임의 구색은 갖출 수 있다. 우선 두 유닛이 충돌하는지를 확인하는 함수 isBumped를 구현했다. function isBumped(dino, cactus) { var xDif = cactus.x - (dino.x + dino.width); var yDif = cactus.y - (dino.y + dino.height); if (xDif < 0 && yDif < 0) { ctx.clearRect(0, 0, canvas.width, canvas.height); cancelAnimationFrame(animation); } } 충돌 여부는 ..

크롬 공룡 게임 만들기(3/4): 장애물 관리 및 점프 구현

앞의 포스팅에서 일정 시간마다 장애물을 생성해 cactuses 배열에 넣어 관리하는 코드를 작성했었다. 오늘은 게임 키를 구현하기에 앞서 이미 지나간 장애물을 삭제하는 코드를 먼저 추가해 보겠다. 이미 지나가 화면에 보이지 않는 장애물을 배열에서 제거해 주지 않는다면, 게임 플레이 시간이 늘어남에 따라 배열에 담긴 장애물 수도 계속해서 증가할 것이다. 이건 바람직하지 않기 때문에 장애물을 생성하고 배열에 추가한 후 화면에 그리는 코드를 수정해 보도록 하겠다. if (timer % 240 === 0) { var cactus = new Cactus(); cactuses.push(cactus); } cactuses.forEach((a, i, o) => { if (a.x < 0) { o.splice(i, 1);..

크롬 공룡 게임 만들기(2/4): 공룡과 장애물 만들기

이제 본격적으로 main.js를 작성해 보자. 공룡 게임에 사용되는 유닛에는 크게 공룡과 장애물이 있다. 이런 등장 요소의 속성을 객체로 정리해 두면 편리하다. 객체란 관련된 데이터와 함수(객체 안에 있을 때는 보통 프로퍼티와 메소드라고 부른다)의 집합이라고 보면 된다. 생각해 보면 게임에서 공룡은 한 마리만 있으면 되지만, 장애물은 여러 개가 있어야 할 뿐만 아니라 각각의 속성이 다를 수 있다. 쿠키런에서 1단 점프를 해야 하는 장애물과 2단 점프를 해야 하는 장애물이 있는 것 처럼.. 이렇게 비슷한 여러 객체를 만들어야 할 때 사용하는 것이 클래스다. 클래스를 쿠키 틀이라고 한다면 객체는 그 쿠키 틀로 찍어낸 쿠키 반죽이라고 할 수 있겠다. 쿠키 틀을 하나만 구비해 놓으면 쿠키를 하나하나 빚을 필요 ..