frame 질문합니다.

웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

캐릭터가 이동하도록 만들기

작성

240

요즘 모니터가 거의다 144hz 인데 수업에서는 60hz를 기준으로 잡고 하시더라구요 144 모니터에서 실행 시킬경우 케릭터가 너무 빨리 달리는것 처럼 모션이 보이는데 이경우는 어떻게 60fps로 고정을 할 수 있나요

인터랙티브 웹 javascript HTML/CSS

답변 2

최수렬

질문자

댓글 감사합니다 알려주신 내용대로하니 게임은 다시 시작하지만 init() 함수에서 선언한 hero와 몬스터들이 초기화 되지 않아서 몬스터가 안나오는데 기존에 선언하여 생성된 인스턴스들은 어떻게 초기화 하나요

깡코딩

지식공유자

안녕하세요 :)

게임을 초기화하고 싶다면 게임이 시작된 후 추가된 엘리먼트를 삭제하고, 전역 변수, 재귀 함수 등을 초기화하면 됩니다 (아래 예제 참고) (이 수업은 초기화를 고려하지 않고 제작되었습니다)

조금 더 편하게 하고 싶다면 각각의 클래스에 초기화하는 기능을 만들거나 전역 변수 등은 본인의 스타일로 네이밍 해도 좋고 전역에 선언된 것들을 다른 Function으로 감싸 초기화 해도 좋습니다 :)

아래와 같이 처리해도 게임 재시작에 큰 문제는 없을 거예요

	//재귀 함수 초기화
	clearTimeout(setTimer);

	//히어로 초기화
	hero = null;

	//npc 초기화
	npcOne = null;
	document.querySelectorAll('.npc_box').forEach((monster)=> monster.remove());
	npcTwo = null;

	//몬스터 초기화
	allMonsterComProp.arr = [];
	document.querySelectorAll('.monster_box').forEach((monster)=> monster.remove());

	//수리검 초기화
	bulletComProp.arr = [];
	bulletComProp.launch = false;
	document.querySelectorAll('.hero_bullet').forEach((monster)=> monster.remove());

	//스테이지 초기화
	stageInfo.stage = [];
	stageInfo.callPosition = [1000, 5000, 9000, 12000]
	stageInfo.totalScore = 0;
	document.querySelector('.score_box').innerText = 0;

	init();

그럼 또 다른 궁금증이 생기면 문의주세요 :)

깡코딩

지식공유자

안녕하세요 :)

섹션6-2의

renderGame 함수를 다음과 같이 변경해보세요

const renderGame = () => {
	const fps = 60;
	setTimeout(() => {
		hero.keyMotion();
		setGameBackground();

		npcOne.crash();
		npcTwo.crash();

		bulletComProp.arr.forEach((arr, i) => {
			arr.moveBullet();
		});
		allMonsterComProp.arr.forEach((arr, i) => {
			arr.moveMonster();
		});
		stageInfo.stage.clearCheck();

		renderGame();
	}, 1000 / fps);
}

다음과 같이 변경 후 확인해 보면 144hz에서도 비슷한 결과물을 얻을 수 있을 거예요!

조금 더 다양한 정보를 원한다면 구글에 많이 나와있으니 참고하면 좋을 것 같습니다

그럼 또 다른 궁금증이 생기면 문의주세요 :)

최수렬

질문자

빠른 댓글 감사합니다. 하나 더 궁금한게 있는데 모든 라운드가 끝난 다음 게임을 다시 시작하고 싶다면 init()함수를 어떻게 해야 하나요?

깡코딩

지식공유자

안녕하세요 :)

게임을 재시작 하고 싶다면 init() 함수를 다시 호출하면 되는데요

이때 재귀 호출되고 있는 setTimeout 함수는 클리어해야 합니다

let setTimer = -1;
const renderGame = () => {
	const fps = 60;
	setTimer = setTimeout(() => {
		hero.keyMotion();
		setGameBackground();

		npcOne.crash();
		npcTwo.crash();

		bulletComProp.arr.forEach((arr, i) => {
			arr.moveBullet();
		});
		allMonsterComProp.arr.forEach((arr, i) => {
			arr.moveMonster();
		});
		stageInfo.stage.clearCheck();

		renderGame();
	}, 1000 / fps);
}

다음 예제와 같이 setTimer 변수에 setTimeout을 담고

init을 다시 호출할 때

clearTimeout(setTimer); 
init();

setTimer 을 클리어 해주면 됩니다 :)

인프런 커뮤니티 질문&답변

frame 질문합니다.