frame 질문합니다.

안녕하세요 :)

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

조금 더 편하게 하고 싶다면 각각의 클래스에 초기화하는 기능을 만들거나 전역 변수 등은 본인의 스타일로 네이밍 해도 좋고 전역에 선언된 것들을 다른 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();

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

빠른 댓글 감사합니다. 하나 더 궁금한게 있는데 모든 라운드가 끝난 다음 게임을 다시 시작하고 싶다면 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 을 클리어 해주면 됩니다 :)