[Javascript] Baseball Game

Baseball Game

注意事項

注意:https://namu.wiki/w/デジタル野球
🚨 特別な状況に対応しなくても大丈夫です.例えば、数字などを繰り返す

TODO

作成

ゲーム開始ボタン

ゲーム開始ボタンをクリックすると、ランダムな3桁(ユーザーに表示されない)が作成されます.

数字入力欄

を作成する.

ユーザがEnterpriseキーをクリックすると、入力値がビット数でない場合、警告ウィンドウ

が表示される.

ユーザがEnterpriseキーをクリックすると、ステップ2で生成する数字がユーザ入力値と比較される:

.
各位置

を比較し、同じ位置に同じ数字が何個あるかを決定します.(ストライク数)

各位置

を比較し、他の位置に同じ数字が何個あるかを決定します.

画面にストライクとボールの数が表示されます.

制限

ユーザーは最大10回試すことができます.

ゲームボタンを作成して再起動します.

出力画面

入力値がビット数でない場合は、警告ウィンドウが表示されます

▼▼ユーザエラーが10回以上発生した場合にボタンを再起動する

ユーザが10回以内に正解を入力した場合の正しい画面

script

function handleStartButtonClick(){
  let count = 0;
  const answer = Math.floor(Math.random() * 900)+100;
  $inputNumber.addEventListener("keypress",enterPress);
  function enterPress() {
    if( window.event.keyCode==13 ){
      if(count===10){
        $inputNumber.removeEventListener("keypress",enterPress);
        count = -1;
        return;
      }
      count++;
      const number = $inputNumber.value;
      if(number>999 || number<100){
        alert("세자리 숫자를 입력해주세요.");
        return;
      }
    const numArray = String(number).split("");
    const answerArray = String(answer).split("");
    let strike = 0;
    let ball = 0;
    numArray.forEach((element,index) => {
      if(element === answerArray[index]){
        strike++;
      }
      answerArray.forEach((element2,index2)=>{
        if(element === element2){
          if(index !== index2){
          ball++;
          }
          return;
        }
        return;
      });
    });
    if(strike ===3){
      // 정답 화면 표시
      return;
    }

HTML DOMを制御するコードは省略し,アルゴリズムのみを記述した.
全体コードが気になるなら?

htmlとcssのコードを適用しました👇

https://github.com/newsilver1028/Mini_Web_Project

▼▼問題の出所

https://book.vanillacoding.co/starter-kit/step-6/baseball