30. Whack A Mole

3975 ワード
javascript30 JavaScript モグラを捕まえる テキストリンク
プロジェクトの概要
  • モグラを捕まえるゲーム
  • ランダムホールにおいて、一定時間ランダムに出現した後に消失する.表示時にキャプチャしたモグラ数画面をクリックすると
    • が表示されます.
    コードの作成
  • モグラに現れた穴、保存時間ランダム数字
  • この穴にクラス名を追加し、settimeoutを使用してしばらくしてからクラス名を削除し、モグラが現れた後に消えるようにします.
  • が表示されたら、モグラをクリックしてscoreを上昇させ、画面に表示します.
    • 最終コード
    <私のコード>
    const holes = document.querySelectorAll('.hole');
      const scoreBoard = document.querySelector('.score');
      const moles = document.querySelectorAll('.mole');

      let holeup;
      let randHole;
      let time;
      let showCount = 0;
      let catchCount = 0;

      function startGame() {
        pickHole();
        upTime();
        showMole();
        console.log(showCount);
      }

      function pickHole() {
        // 1에서 6사이의 랜덤 숫자 뽑기
        randHole = Math.floor(Math.random() * 6 + 1);
      }

      function upTime() {
        //0 ~ 2초 사이 시간 뽑기
        time = Math.random() * 2;
      }

      function showMole() {
        const holeAppear = document.querySelector(`.hole${randHole}`);
        holeAppear.classList.add('up');
        holeup = document.querySelector('.hole.up');
        showCount++;
        setTimeout(() => {
          holeAppear.classList.remove('up');
          if (showCount < 10) startGame();
        }, time * 1000);
      }

      function catchMole() {
        catchCount++;
        scoreBoard.textContent = catchCount;
      }

      moles.forEach((mole) => mole.addEventListener('click', catchMole));
    <解答コード>
    const holes = document.querySelectorAll('.hole');
      const scoreBoard = document.querySelector('.score');
      const moles = document.querySelectorAll('.mole');
      let lastHole;
      let timeUp = false;
      let score = 0;

      function randomTime(min, max) {
        return Math.round(Math.random() * (max - min) + min);
      }

      function randomHole(holes) {
        const idx = Math.floor(Math.random() * holes.length);
        const hole = holes[idx];
        if (hole === lastHole) {
          console.log('Ah nah thats the same one bud');
          return randomHole(holes);
        }
        lastHole = hole;
        return hole;
      }

      function peep() {
        const time = randomTime(200, 1000);
        const hole = randomHole(holes);
        hole.classList.add('up');
        setTimeout(() => {
          hole.classList.remove('up');
          if (!timeUp) peep();
        }, time);
      }

      function startGame() {
        scoreBoard.textContent = 0;
        timeUp = false;
        score = 0;
        peep();
        setTimeout(() => (timeUp = true), 10000);
      }

      function bonk(e) {
        if (!e.isTrusted) return; // cheater!
        score++;
        this.parentNode.classList.remove('up');
        scoreBoard.textContent = score;
      }

      moles.forEach((mole) => mole.addEventListener('click', bonk));
    感じる/記憶
  • の他の部分はそれほど難しくはありませんが、settimeout関数(「up」クラスの貼り付けと削除)を同期的に処理できないため、モグラ10匹が同時に発生する問題を解決するのに時間がかかりました.
  • (解決方法)showMole()内部のsettimeout関数部分について、次のように変更しました.
    • setTimeout(() => {
          holeAppear.classList.remove('up');
          if (showCount < 10) startGame();
        }, time * 1000);
  • の最小値から最大値の間の任意の整数を選択するコードを覚えておいてください(操作を参照).
    コメントサイトについて 
    • function randomTime(min, max) {
        return Math.round(Math.random() * (max - min) + min);
      }
    直接ゲームをする
    Pythonコンビエンス
    mysql jsp文字符号化の問題解決について