1.main.js에 게임을 선언하기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
"use strict";
import { Game, FinishReason, StopReason } from "./gameControl.js";
import Banner from "./finishBanner.js";
import * as sound from "./sound.js";
const finishBanner = new Banner();
const game = new Game(3, 10);
game.onFinishBannerEvent((reason) => {
switch (reason) {
case FinishReason.win:
finishBanner.show(FinishReason.win);
finishBanner.showNextStageBtn();
break;
case FinishReason.bug:
finishBanner.show(FinishReason.bug);
break;
case FinishReason.timeout:
finishBanner.show(FinishReason.timeout);
sound.playLoseSound();
break;
case FinishReason.finalStageWin:
finishBanner.show(FinishReason.finalStageWin);
sound.playWinSound();
break;
case StopReason.start:
finishBanner.hide();
break;
case StopReason.pause:
finishBanner.show(StopReason.pause);
break;
default:
throw new Error("unvalid reason");
}
});
finishBanner.setOnReplayClick(game.startFromTheVeryFirst);
game.finishBanner안에 함수를 보내준다. 그래서 게임이 멈췄을때 발생되는 모든 경우를 명시하는것이다. 그리고 replay버튼을 클릭했을때 game의 startFromTheVeryFirst메소드가 실행되어야 한다. 그래서 setOnReplayClick메소드를 이용해서 startFromTheVeryFirst메소드를 보내준다.
이렇게 정리하면 main.js가 매우 깔끔해졌다. 그러나 1달뒤에 왔을때 이해가 가지않는 부분이 있을것이다. 바로 Game클래스에 들어가는 인자다. 3,10 이 무엇을 의미하는지 전혀 알 수가 없다. 이때 필요한것이 build pattern이다.
2. build pattern 만들기
gameControl.js 에서 build pattern을 만들자
1
2
3
4
5
6
7
8
9
10
11
12
13
14
export class GameBuilder {
iconCount(count) {
this.count = count;
return this;
}
gameDuration(duration) {
this.duration = duration;
return this;
}
build() {
return new Game(this.count, this.duration);
}
}
마치 fetch().then().then() 과 같은 효과를 낼 수 있다. 그래서 icon의 갯수와 game의 시간을 명시한뒤 build하면 아이콘의 갯수, 게임시간이 명확하게 표시될 것이다.
main.js
1
2
3
4
const game = new GameBuilder() //
.iconCount(3)
.gameDuration(10)
.build();
요렇게 하면 된다. 그럼 이제 진짜 모든 리팩토링 과정이 끝이 났다. 하지만 완전히 끝이 난것은 아니다. 바로 디버깅을 해야하고 성능도 개선해야한다.
3. 디버깅
- 시간 초기화 실패 리플레이버튼을 누르면 시간이 초기화되어야하는데 초기화되지않고 끝나버린 시점에서 시간이 시작된다는점이다. 이유는 gameduration의 값이 새로고침하지않는 이상 줄어든 값으로 그대로 남아있기 때문이다. 해결방법은 간단하다. main.js 에서 받아온 gameduration을 다른 변수에다가 또 저장하면 된다. startVeryFirst 메소드에다가 this.gameDuration = this.gameDurationRefresh(그 또 다른 변수); 라고 해주니 리플레이 할때마다 초기화 된다.
4. 성능개선
- 프레임 심각하게 저하됨 혹시 몰라서 performance에서 성능측정을 해봤는데 2~5프레임밖에 안나오는 것이다!! debugger를 통해서 문제는 timer에 있다는 걸 알아냈다. 바로 타이머를 실행할때마다 const timeDisplay가 만들어진다는 것이다. 그래서 timeDisplay는 constructor에 추가하였다. 그랬더니 프레임이 50까지 향상되었으나, 최초시작할때 살짝 버벅거리는 현상이 있었다. 바로 –연산자를 따로 빼지않고 아예 update함수에 pass하니깐 그런 현상이 없어졌다.
이로써 아주 말끔하게 작동이 되었고 완성하였다. 그러나 아직 아쉬움이 남는다. 기능을 좀 더 추가하고 싶다. 바로 아래의 기능들 말이다.
- 레벨 추가
- 기록 기능 및 신기록 갱신시 특별한 이벤트 발생
이제 고생이 시작된다 ㅋㅋㅋㅋ 레벨을 추가하는 방법을 다음 글에서 살펴보자.