js 크롬 공룡 게임 만들기 (2)

 

이전편

js 크롬 공룡 게임 만들기

 

 

---

 

 

 

아래 기능들을 추가하여 게임에 다양한 기능을 추가해보았다.

1. 게임 리셋 버튼 추가: 게임 오버 모달에 리셋 버튼을 추가하고, 클릭 시 게임 초기화
2. 게임 속도 점진적 증가: 일정 시간이 지날 때마다 장애물의 이동 속도가 증가
3. 점수(score) 추가: 게임 플레이 중에 획득한 점수를 화면에 표시하고, 장애물을 피하거나 동전을 획득함으로써 점수 증가
4. 동전 요소 추가 및 추가 점수 획득: 동전이라는 요소로 추가 점수 획득

 

 

 

 

 

 

리셋 게임 재시작

// 리셋 버튼 클릭 시 호출될 함수
function resetGame() {
	// 캔버스 초기화
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	// 변수 초기화
	timer = 0;
	cactusArr = [];
	jump = false;
	dino.y = groundHeight;


	// 새로운 게임 루프 시작
	gameLoop();
}

게임 오버 시 모달 창이 표시되며, 사용자가 리셋 버튼을 클릭하면 다시 게임이 시작되도록 하기 위해 resetGame 함수가 사용한다. 

모든 값들을 초기화시켜주도록 설정한다. 

 

 

게임 속도 증가 

// 일정 프레임마다 장애물 속도 증가
if (timer % 500 === 0) {
    obstacleSpeed += obstacleSpeedIncrease;
}

난이도가 추가되었으면 좋겠다는 생각을 했다.

게임 속도 증가 = 장애물이 생성되는 속도 증가

매 500프레임마다 obstacleSpeed에 obstacleSpeedIncrease를 추가하여 장애물의 이동 속도를 증가시킨다.

게임이 진행됨에 따라 장애물이 더 빨리 움직이도록 만드는 기능을 구현하는데 사용했다.

 

 

 

 

 

동전(코인)

동전 요소를 넣어 점수 추가 개념을 더했다. 

동전을 만들기 위해 장애물과 마찬가지로 동전 클래스를 생성하고, 동전의 초기 위치와 간격을 설정해야 한다.

충돌 시 동전이 사라지고 점수가 올라가도록 구현하면 된다. 이전 장애물과 동일하게 작업하면 됨

 

const coinImage = new Image();
coinImage.src = '/images/coin.png'

// 동전
class Coin {
	constructor(){
		this.width = 25;
		this.height = 25;
		this.x = canvas.width - this.width;
		this.y = 100;
	}

	draw(){
		ctx.drawImage(coinImage, this.x, this.y, this.width, this.height);
	}
}


// 동전 충돌 체크
coinArr.forEach((coin, index, arr) => {
    if (coin.x + coin.width < 0) {
        arr.splice(index, 1); // 화면을 벗어난 장애물 제거
    }
    coin.updatePosition(obstacleSpeed);

    if (checkCollision(dino, coin)) {
        arr.splice(index, 1); // 충돌한 동전 제거
        score += 5;
    }
});

- 코드 중간 부분은 생략되어 있습니다. 

 

점수를 획득하기 위해서는 동전과 충돌 여부를 확인해야 한다는 점을 알게되었다..
처음에는 이 사실이 너무 당연해서 생각하지 못했다.

장애물과 마찬가지로 충돌여부를 체크해주는 코드를 동일하게 사용했다. 

 

 

스코어

function updateScore(){
	if (timer % obstacleSpawnInterval === 0) {
		score++;
		document.querySelector('.score span').textContent = score;
	}
}

점수가 증가하는 속도는 실제 시간의 흐름이 아니라 `obstacleSpawnInterval` 기준으로 설정되어 있다.
장애물이 생성되는 프레임 간격마다 점수가 1씩 증가하기 때문에, 게임 진행 속도와는 별개로 점수가 증가한다.
시간기준이 아니기에 1씩 느리다. 의식한다면 눈에 띄는 문제이지만 이 부분은 setInterval로 초당으로 구현해야할지 고민이다. 

 

 

 

 

gif로 어떻게 만드는거지..? 

 

 

 

 

gif로 변환해봤는데 왜 이럴까요 실제 동작보다 엄청 느리고 버벅거려보이네여

실제 웹에서는 이보다 빠르고 버벅임 없이 작동 됨.. 

 

 

 

 

---

 

참고 : 코딩애플 https://www.youtube.com/watch?v=qkTtmgCjHhM