이번 챕터에서는 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>정리
- 어렵지 않은 실습이라서 재미있게 할 수 있었다😁😁
유니콘이 출력되는 Secret Key가 너무 재미있네요!! ㅎㅎ 잘 읽고 갑니다^ ^