크롬 공룡 게임을 자바스크립트를 써서 만들어보자!

아이디어 갈아엎음..

나만의 무기만들기 프로젝트의 아이디어가 바뀌었다. 원래 webRTC와 Teachable machine을 사용해 원격으로 사람들과 스쿼트, 푸쉬업등 대결을 할 수 있는 아이디어였지만 너무 진부해보여 팀 내부적으로 조정이 필요하다고 판단!

크롬의 공룡 게임을 기반으로 스쿼트나 푸쉬업을 해야 장애물을 피할 수 있는 게임을 만들고자 했다.

그래서 이번에 공룡 게임을 만들면서 배웠던 내용을 정리하고자한다.

 

공룡게임 준비사항

1. 애니메이션을 위해 프레임마다 코드를 실행 할 수 있어야한다.

2. collision check를 할 수 있어야 한다.

 

여기서 collision이란 물체가 충돌을 했을 때 이벤트를 발생시키도록 물체에 안보이는 장막? 을 까는거라고 생각하면 된다.

---

canvas

우선 canvas 태그가 필요하다. 여기서 canvas 태그는 주로 자바스크립트와 같은 스크립트를 이용해 그래픽 콘텐츠를 그릴 때 사용한다. 또한 canvas는 그래픽 콘텐츠를 위한 컨테이너일 뿐 실제로 그림을 그리는 동작은 스크립트를 사용하여 구현해야 한다.

 

우선 공룡게임을 하려면 공룡이 필요하다. 공룡을 만들어보자.

var dino = {
    x: 10, 
    y: 200,
    width: 50,
    height: 50,
    draw() {
    	ctx.fillStyle = 'green';
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
}

공룡 오브젝트를 만들었는데, 지금은 단지 초록생 사각형으로만 보일 것이다. 여기서 draw() 메서드가 공룡을 우리 브라우저 위에 그려주는 역할을 한다.

 

이젠 장애물이 필요하다. 장애물은 여러개가 나옴으로 class를 만들어서 관리하자!

class Cactus {
	constructor() {
    	this.x = 500;
        this.y = 200;
        this.width = 50;
        this.height = 50;
    }
    draw() {
    	ctx.fillStyle = 'red';
        ctx.fillRect(this.x, this.y, this.width, this, height);
    }
}

클래스를 만들었으니 필요할 때마다 new Cactus(...) 하고 생성하면 될 것이다. 역시 지금은 빨간색 막대로만 보일 것이다.

---

애니메이션 

공룡이 가만히만 있으면 재미가 없다. 움직여줘야한다.

그럼 단순히 x에 100만큼 더하면 될까?

그렇게 하면 공룡이 순간이동 하게 될 것이다. 따라서 1초에 +1씩 해줌으로써 천천히 움직이게 만들면 된다!

 

하지만! 달리기 게임은 대부분이 장애물이 나한테 달려오는 것이다!  사실 공룡은 달리는것이 아니라는 말씀!

그래서 장애물이 달려오도록? 만들어보자.

 

우선 장애물이 달려오게 하기 위해서는 매 프레임마다 장애물의 위치를 옮겨주어야 한다. 매 프레임마다 특정 함수를 실행 시키도록 하는 메서드가 있는데, 바로 reqeustAnimationFrame이다.

 

var timer = 0;
var cactusArray  [];
function loop() {
    requestAnimationFrame(loop);
    timer++;
    
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    if (timer % 144 === 0) {
    	var cactus = new Cactus();
        cactusArray.push(cactus);
    }
    
    cactusArray.forEach((cactus) => {
    	cactus.draw();
    	cactus.x--;
    })
}

참고로 reqeustAnimationFrame는 모니터의 주사율에 따라 1초에 144번 실행 될 수 도 있다. 때문에 1초당 장애물이 몇번 생성되는것 이렇게 생각할게 아니라 몇 프레임마다 장애물이 생성 되는가 하는 문제인것이다.

 

위 코드를 조금 설명하겠다.

우선 timer는 매 프레임마다 1씩 증가하다가 주사율과 나눠떨어진다면, 즉 1초가 될 때 if문에서 선인장을 하나 생성해서 cactusArray에 넣는다. 그리고 forEach를 통해서 한번에 다 그려내게 된다. 

 

ctx.clearRect(0, 0, canvas.width, canvas.height) 는 캔버스에서 draw된 녀석들을 지워주는 역할을 하는데, 매 프레임마다 생성된 녀석들이 계속해서 축적된다면 이동하는것이 아니라 무한 증식하는것 처럼 보일 것이다. 따라서 생성하고 지워주고 반복함으로써 이동하는것 처럼 보이게 될 것이다.

 

또한 그려낸 선인장들을 매 프레임마다 x의 위치를 1씩 배주면 드디어 움직이는 장애물이 탄생하게 될 것이다!

 

---

지금까지 공룡 게임에서 장애물 생성까지 해봤다. 다음 글에서는 공룡이 점프하는 것까지 설명해보도록 하겠다!!