Hangman (4) - keydown event listener

이 포스트는 Udemy에 올라온

Brad Traversy의 20 Web Projects With Vanila JavaScript 강의를 보고 정리하는 내용입니다!

https://www.udemy.com/course/web-projects-with-vanilla-javascript/

20 Web Projects With Vanilla JavaScript

 

 

 

1. element 받아오기

const wrongLettersEl = document.getElementById("wrong-letters");
const wordEl = document.getElementById("word");
const popup = document.getElementById("popup-container");
const finalMessage = document.getElementById("final-message");
const playAgainBtn = document.getElementById("play-button");
const notification = document.getElementById("notification-container");

const figureParts = document.querySelectorAll(".figure-part");

 

 

- wrongLettersEl는

 <div class="wrong-letters-container">
        <div id="wrong-letters"></div>
</div>

여기 #wrong-letters <div>를 받음

guess 실패한 단어들 display됨

 

 

-wordEl은

<div class="word" id="word"></div>

맞춰야 할 단어가 숨겨져있는 div

 

 

- 팝업창 전체와, 팝업창 속 final Message, play again 버튼을 받아왔다.

- 그리고 notification-container <div>버튼

 

-figure-parts는 svg로 그린 행맨 얼굴, 몸통, 팔, 다리들 전체를 받아줌

 

 

 

 

 

2. 단어배열

const words = [
  "application",
  "programming",
  "interface",
  "wizard",
  "frontent",
  "javascript",
];

내가 선택한 단어들 (데이터가 있다면 거기서 받아올 수 있었을 텐데...)

 

 

 

 

3.  단어 랜덤 선택

let selectedWord = words[Math.floor(Math.random() * words.length)];

words array에서 랜덤으로 단어를 선택

 

 

 

4. (시도한)맞은 글자들, 틀린 글자들 저장할 배열

const correctLetters = [];
const wrongLetters = [];

 

 

 

5. keydown event listener 

window.addEventListener("keydown", (e) => {
  // console.log(e.keyCode);
  if (e.keyCode >= 65 && e.keyCode <= 90) {
    const letter = e.key;

    if (selectedWord.includes(letter)) {
      if (!correctLetters.includes(letter)) {
        correctLetters.push(letter);

        displayWord();
      } else {
        showNotification();
      }
    } else {
      if (!wrongLetters.includes(letter)) {
        wrongLetters.push(letter);

        updateWrongLettersEl();
      } else {
        showNotification();
      }
    }
  }
});

keydown 즉, 유저가 키보드를 누르면 fire되는 이벤트

 

1. 유저가 알파벳 눌렸는지 확인 (a:65 ~ z:90)

2. 알파벳이 입력된 경우 그 알파벳 값(e.key)를 letter라는 const에 저장

3. 만약 랜덤하게 선택된 selectedWord가 이 letter를 포함하는데

   3.1  시도한 (옳은) 단어 리스트인 correctLetters에 이 letter이 포함되어 있지 않다면 

         이 letter을 correctLetters에 넣어주고(push), displayWord()함수를 이용해 화면에 보여줌

   3.2 시도한 (옳은) 단어 리스트인 correctLetters에 이미 letter가 포함되어 있다면

         (즉, 예전에 이미 시도한 letter라면)

         showNotification 함수를 통해 이미 입력한 단어라는 사실을 알려줌.

4. 유저가 입력한 letter가 selectedWord에 포함되지 않는데(즉, 틀린 guess인데)

   4.1 시도한 (틀린) 단어 리스트인 wrongLetters에 이 letter가 포함되어 있지 않다면

        이 letter을 wrongLetters에 넣어주고 updateWrongLettersEl() 함수를 이용해 화면에 보여줌

   4.2 시도한 (틀린) 단어 리스트인 wrongLetters에 이 letter가 포함되어 있지 있다면

         (즉, 예전에 이미 시도한 letter라면)

         showNotification 함수를 통해 이미 입력한 단어라는 사실을 알려줌.