개발/JavaScript 30

12. Key Sequence Detection

Sangminnn 2017. 4. 18. 02:32
반응형

코드 분석

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Key Detection</title>
  <script type="text/javascript" src="http://www.cornify.com/js/cornify.js"></script>
</head>
<body>
<script>

</script>
</body>
</html>

목표

지정해놓은 시크릿코드가 입력되면 유니콘 모양이 나오도록 만들어보자.

분석

  1. 사용할 변수를 선언한다.
const pressed = [];
const secretCode = 'wesbos';
  1. 선언한다.
window.addEventListener('keyup', (e) => {
  console.log(e.key);
  pressed.push(e.key);
  pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);
  if (pressed.join('').includes(secretCode)) {
    console.log('DING DING!');
    cornify_add();
  }
  console.log(pressed);

주목할 부분은 pressed.splice부터이다. -secretCode.length를 보면 앞에 -가 붙어 있는데, 음수부분이면 배열의 마지막부분부터 카운트가 들어간다. 그 다음 콤마 이후의 부분은 pressed배열의 개수가 6을 넘어가면 한개씩 빠지도록 하여 6개의 개수를 유지하게 만들어준다.
그 아래에는 pressed의 입력부분에 시크릿코드가 들어가있으면 유니콘그림이 나오게 하는 코드구조이다.

마무리

.splice에 대한 지식이 단편적이여서 살짝 헷갈린 부분이 있었다.
그리고 cornify_add();부분은 새로웠다.
그래도 전체적으로 어려운 부분은 없었다.
끝.



반응형