inflearn logo
강의

Khóa học

Chia sẻ kiến thức

Tìm hiểu web tương tác bằng cách tạo trò chơi trên web! JAVASCRIPT

Làm cho nhân vật di chuyển

frame 질문합니다.

341

choichoichoi

7 câu hỏi đã được viết

0

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

인터랙티브-웹 javascript HTML/CSS

Câu trả lời 2

0

choichoichoi

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

0

ggangcoding162118

안녕하세요 :)

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

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

 

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

0

ggangcoding162118

안녕하세요 :)

섹션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에서도 비슷한 결과물을 얻을 수 있을 거예요!

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

 

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

0

choichoichoi

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

0

ggangcoding162118

안녕하세요 :)

게임을 재시작 하고 싶다면 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 을 클리어 해주면 됩니다 :)

6-6

0

14

1

Json 플러그인 사용시 variable collection 없음

0

15

1

프로젝트 완성본 보내주실수 있나요?

0

51

1

캐릭터 기본 모션 만들기에서 포토샵에 열라고하는데 포토샵없으면 어떻게하죠? 공짜버전있나요?

0

191

1

renderGame 함수에 로그를 찍으면 무한루프가 돕니다

0

282

1

수리검이 날아가지 않습니다

0

221

1

수리검 방지턱(?) 현상

0

486

2

requestanimationframe 성능관련 궁금증

0

594

1

개발툴은 어떤걸 사용하나요?

0

293

1

e.which에 대한 질문입니다.

1

602

1

수리검이 사라집니다

0

272

1

const 변수 및 Arrowfunction 방식 질문

0

423

2

몬스터나 npc의 위치가 일정 크기를 넘어가면 히어로가 사라집니다.

0

191

1

수리검 방향 전환 처리에서 간단한 질문 있습니다.

0

219

1

마이너스 좌표값(?) 사용

0

739

1

코딩작업하고 웹화면 띄워서 확인하는 방법?

0

522

2

캐릭터가 점프하면서 앞으로 나아가게 만들고있습니다

0

383

1

전체 이미지에서 원하는 부분만 컷하고 싶어요(사진첨부)

0

478

1

질문있습니다.

0

196

1

깃헙 레포 질문드립니다.

0

250

1

캐릭터 기본 모션 만들기, 경로가 인식이 안되요.

0

291

1

몬스터가 참조가 안되는 이슈가 있습니다.

0

346

1

기초적인 질문이라 부끄럽지만 질문 드립니다

0

404

1

공격키를 연속으로 누를때 처리하는 방법 질문 드립니다

0

928

2