State Pattern1 : C++ State pattern을 자바스크립트로 변환
State Pattern2: 상태 변환 테이블
State Pattern3: 자바스크립트 다움의 상태패턴
State Pattern4: 상태 변환 테이블과 자바스크립트 다움의 상태패턴 기능 통합
이번장에서는 기능을 HTML에 적용해 보자.
이론과 현실은 다를수가 있기 때문에 상태 변환 테이블과 자바스크립트의 다움의 상태패턴을 이용해 HTML5에 적용 해보자.
구현 순서
1. UI 비주얼 상태를 3~5단계로 생각한다.2. 여기서는 LeftView, RightView, TooltipView로 나눈다.
3. actTable에서 상태 변환 관계를 오브젝트 속성으로 만든다.
const actTable = {
.....
};
4. 상태를 구현한다.
여기서는 LeftView, RightView, TooltipView이다.
3, 4번을 반복하면서 기능을 구현한다.
키보드 + 게임패드 입력 예제 - (_self.input에서 입력을 전달)
appMain 즉시 실행 함수의 updateGamepad에서 처리한다._self.input에서 입력을 변환후 각각의 상태( LeftView, RightView, TooltipView)로 입력을 전달한다.
각각의 상태에서는 전달받은 _self.input을 execute 함수에서 처리한다.
var appMain = function(){
......
function updateGamepad() {
if(Gamepad.click(GamepadKey.A))
_self.input.enter = 1;
_self.input.updown = Gamepad.moveLeftClick().y;
_self.input.updownView = Gamepad.moveRightClick().y;
}
......
})();
......
function updateGamepad() {
if(Gamepad.click(GamepadKey.A))
_self.input.enter = 1;
_self.input.updown = Gamepad.moveLeftClick().y;
_self.input.updownView = Gamepad.moveRightClick().y;
}
......
})();
게임패드 전용 입력 예제 - (상태에서 게임패드 입력을 직접 제어)
각각의 상태( LeftView, RightView, TooltipView)에서 게임패드 입력을 직접 제어 한다.execute 함수에서 게임패드 입력을 직접 처리 하기 때문에 코드가 직관적으로 보인다.
appMain에서 _self.input에서 입력을 만들 필요가 없다.
var LeftView = function(){
......
proto.execute = function(){
let arg = arguments[0];
if(Gamepad.click(GamepadKey.A)) {
arg.stateManager.changeState( getFsm('left2right', arg.actTable)());
}
arg.scrollList1.updateInput(Gamepad.moveLeftClick().y);
};
.....
};
......
proto.execute = function(){
let arg = arguments[0];
if(Gamepad.click(GamepadKey.A)) {
arg.stateManager.changeState( getFsm('left2right', arg.actTable)());
}
arg.scrollList1.updateInput(Gamepad.moveLeftClick().y);
};
.....
};
다운로드:
키보드 + 게임패드 입력 예제
statePattern5.html
sample.js
게임패드 전용 입력 예제 (각각의 상태 execute 함수에서 게임패드 입력을 처리 한다.)
statePattern5_exec.html
sample_exec.js
공통 사용 파일
simple_main.js
scroll_list.js
gamepad.js
util.js
전체 다운로드: tutorial14.zip