20 web projects by VanillaJS - 7

Hangman Game
Hangman Game
一定回数で単語を当てるゲームです.
間違った文字を入力すると右上隅に表示され、入力した文字を再度入力するとポップアップウィンドウが表示されます.ポップアップウィンドウは、translateYおよびsetTimeout()を使用して自動的に消えます.間違った字を入力するたびに、人体の一部にマークをつけます.
成功したり失敗したりすると、異なる文字のポップアップウィンドウがポップアップされ、Playagainボタンをクリックするとゲームが再開されます.
1.運転画面
1)メイン画面

2)誤字入力の場合

3)入力した文字を再入力

4)成功または失敗の場合


2.プロジェクトで学んだこと
1) Math.floor(), Math.random()

Math.floor()
小数点以下の関数を切り捨てます.「Math」を参照してください.floor(null)は0を返します
cf)Math.ceil():小数点以下Math.round():小数点以下に四捨五入

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

2) includes(x)String,Arrayにxの関数があるかどうか.ある場合はtrue、ない場合はfalseが返されます

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();
      }
    }

3)キーボードイベントkeydown/keyupキーボードイベントは、ユーザキーがkeydownタイプのイベント、キーが解放されたkeyupタイプのイベントで発生します.
キーボードイベントは、DOMのwindow、document、または特定の要素で発生します.例えば、ウィンドウ内で発生したkeydownイベントは、以下に示すようにコールバック関数を設定することができる.

window.onkeydown = e => console.log(e);

//addEventListenr 함수를 이용 할 수도 있다.
window.addEventListner("keydown", e => console.log(e));

キーボードイベントオブジェクト
キーボードイベントオブジェクトには、複数のメタデータ情報が含まれます.例えば、key属性のキー値は、code属性のコード値は、shiftKey属性のShiftキーが押下されたかどうかである.
次に、キーボード1を押すと、次のキーボードイベントオブジェクトがオーバーフローしていることがわかります.

{
  key:"1",
  code: "Digit1",
  shiftKey: false,
  //생략
}
  
// shift+a 를 눌렀을 때
{
  key: "A",
  code: "KeyA",
  shiftKey: true,
  // 생략
}

ソース:https://www.daleseo.com/