Javascript30 - Sequence Key Detection

seeh_h·2021년 1월 20일
1

javascript30

목록 보기
10/16

이번 챕터에서는 secret key를 입력하면 화면에 귀여운 유니콘이 출력되는 재미있는 실습을 해보았다.

내가 설정한 secret Key인 'fun javascript'를 입력 할 때마다 화면에 유니콘이 추가된다😄😄

어릴때 '킹오브파이터'라는 게임에서 ←→←→←→← + A + C 같은 키 조합을 입력하면 히든 캐릭터를 고를 수 있었는데, 딱 그 느낌이다.🤣🤣🤣

Learning Point

  • array.slice에 대해 학습한다.
  • string.includes 에 대해 학습한다.

Javascript Part

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Key Detection</title>
    <script
      type="text/javascript"
      src="https://www.cornify.com/js/cornify.js"
    ></script>
  </head>
  <body>
    <script>
      const keyString = "fun javascript";
      let keyPressed = [];
      const printPressed = (e) => {
        keyPressed.push(e.key);
        if (keyPressed.length > keyString.length)
          keyPressed = keyPressed.slice(1);

        if (keyPressed.join("").includes(keyString)) {
          console.log("String returned!");
          cornify_add();
        }
      };
      window.addEventListener("keyup", printPressed);
    </script>
  </body>
</html>

정리

  • 어렵지 않은 실습이라서 재미있게 할 수 있었다😁😁
profile
주니어 개발자 성장기😎

2개의 댓글

comment-user-thumbnail
2021년 1월 21일

유니콘이 출력되는 Secret Key가 너무 재미있네요!! ㅎㅎ 잘 읽고 갑니다^ ^

1개의 답글