[테트리스] 22. 키 설정 추가

오늘의 이슈

---

설정 버튼을 추가하고 설정 버튼을 누르면 레이어팝업이 뜬다.

해당 팝업에서는 현재 사용중인 키 설정을 바꿀 수 있게 한다.

레이어 팝업은 인터넷에서 검색한 코드를 참고하였으므로 생략. 아래에 명시해둔 참고 사이트를 참고바란다.

 

event의 key 는 알아보기 쉬운 문자열 (ArrowUp, ArrowDown...)로 되어있고 keyCode는 아스키코드로 되어있다.

기존에는 내부에서 keyCode로 분기처리를 하였지만 이제 세팅 화면에서 노출해야 하므로 이해가 쉬운 key를 사용하게 바꿨다.

 

<!-- main.html -->

<!-- 키 세팅 -->
<div id="setting" class="layer_popup" hidden>
    <div class="layer">
        <div class="text_area">
            <!-- input 기존 keydown 함수는 중복 입력을 방지하기 위해 막아둔다. js파일에서만 값을 세팅할 수 있다. -->
            <p>위 <input type="text" class="key_input" id="key-up" onkeydown="return false;"/></p>
            <p>아래 <input type="text" class="key_input" id="key-down" onkeydown="return false;"/></p>
            <p>왼쪽 <input type="text" class="key_input" id="key-left" onkeydown="return false;"/></p>
            <p>오른쪽 <input type="text" class="key_input" id="key-right" onkeydown="return false;"/></p>
            <p>최하단 <input type="text" class="key_input" id="key-below" onkeydown="return false;"/></p>
            <p>블럭 저장 <input type="text" class="key_input" id="key-keep" onkeydown="return false;"/></p>
        </div>
        <div class="btn_area">
            <button class="btn_ok" onclick="applySetting()">확인</button>
            <button class="btn_cancel" onclick="closeSetting()">취소</button>
        </div>
    </div>
    <div class="dimmed"></div>
</div>

 

// /js/setting.js

// 디폴트 키코드 세팅
document.getElementById("key-up").value = keyCode.UP;
document.getElementById("key-left").value = keyCode.LEFT;
document.getElementById("key-right").value = keyCode.RIGHT;
document.getElementById("key-down").value = keyCode.DOWN;
document.getElementById("key-below").value = keyCode.SPACEBAR;
document.getElementById("key-keep").value = keyCode.CTRL;

// 세팅 input리스트 
const settingInput = document.getElementsByClassName('key_input');

// 세팅화면 여는 함수
function openSetting() {
    $('#setting').show();
}

// 세팅 적용
function applySetting() {
    // keyCode 갱신
    keyCode.UP = document.getElementById("key-up").value;
    keyCode.LEFT = document.getElementById("key-left").value;
    keyCode.RIGHT = document.getElementById("key-right").value;
    keyCode.DOWN = document.getElementById("key-down").value;
    keyCode.SPACEBAR = document.getElementById("key-below").value;
    keyCode.CTRL = document.getElementById("key-keep").value;
    console.log(keyCode)
    closeSetting();
}

// 세팅화면 닫는 함수
function closeSetting() {
    $('#setting').hide();
};

// 모든 세팅 input 리스트에 keydown 이벤트를 적용한다.
for (let i = 0; i < settingInput.length; i++) {
    settingInput[i].addEventListener('keydown', e => {
        const that = settingInput[i];
        if (that.value == e.key) return;
        that.value = e.key // input box를 입력한 키 값으로 갱신
    })
}

 

설정 창 들어가도 게임이 계속 진행되지만 테트리스 게임 중엔 설정을 바꿀 수 없게 할 것이기 때문에 그냥뒀다.

설정은 게임화면 들어가기 전 메인화면에서 할 수 있게 할 예정이다.

---

깃허브 : add key setting

 

참고

https://webclub.tistory.com/189

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key