Key Sequence Detection

Day12-Key Sequence Detection

CODE

구현 사항: 비밀번호 입력 기능 구현

1) 입력된 문자열을 저장할 배열과 맞춰야 하는 비밀번호를 각각 변수에 할당

const pressed = [];
const answer = "answer";

2) keyup 이벤트 발생 시 pressed에 할당된 배열에 누른 키를 저장

window.addEventListener("keyup", (e) => {
  pressed.push(e.key);
});
  • 만약 'a'를 눌렀을 시 pressed = ['a']가 됨

3) pressed에 저장된 요소들의 개수가 비밀번호 문자열의 length를 넘어가는 경우, splice()를 이용하여 가장 먼저 배열에 들어온 값을 제거

window.addEventListener("keyup", (e) => {
  pressed.push(e.key);
  pressed.splice(-answer.length - 1, pressed.length - answer.length);
});
  • 만약 ['a','n','s','w','e','l']까지 입력된 상태에서 'r'을 입력하였을 경우, 가장 먼저 배열에 들어온 'a'가 삭제되고 'r'이 배열에 추가되어 ['n','s','w','e','l','r']이 됨

  • ['a','n','s','w','e','l']까지 입력된 상태에서 'r'을 입력하였을 경우, pressed는 ['a','n','s','w','e','l', 'r']가 되며

pressed.splice(-7, 1);

이 되므로, 'a' 한 글자가 삭제됨

4) 만약 pressed 배열에 들어온 값들을 전부 이어 붙였을 때 비밀번호와 일치하는 문자열이 될 경우 cornify_add()를 실행

window.addEventListener("keyup", (e) => {
  pressed.push(e.key);
  pressed.splice(-answer.length - 1, pressed.length - answer.length);
  if (pressed.join("").includes(answer)) {
    console.log("DING DING!");
    cornify_add();
  }
});

좋은 웹페이지 즐겨찾기