inflearn logo
강의

講義

知識共有

Webゲームを作って学ぶインタラクティブWeb! JAVASCRIPT

キャラクターを移動させる

frame 질문합니다.

341

choichoichoi

投稿した質問数 7

0

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

인터랙티브-웹 javascript HTML/CSS

回答 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 을 클리어 해주면 됩니다 :)

몽고 db 접속 오류

0

4

0

6-6

0

23

1

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

0

51

1

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

0

191

1

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

0

282

1

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

0

222

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

292

1

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

0

347

1

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

0

404

1

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

0

928

2