JS簡単ゲーム(ニンジン)2

私たちはquerySelectorを使用してニンジンをクリックしたときのイベントを配置します.
querySelectorは1つの要素のみを変更できます.
ニンジンはニンジンの数字です.
この問題を解決するためにquerySelector Allを使用しました.
义齿foreach()を使用しました.

const carrot = document.querySelectorAll('.carrot').forEach((item) => {
            
            item.addEventListener('click', () => {
                click_carrot(i);
            });
        });

これですべてのニンジンがクリックを認識できます!
次に効果音を入れました.
効果音を入れるのは簡単です.

var audio1 = new Audio("./sound/carrot_pull.mp3");
    audio1.play();

正常に動作する.
セグメントをクリックすると削除されます.

var header = document.querySelector("h1");	//제거하고자 하는 엘리먼트
header.parentNode.removeChild(header);

//나에게 사용된 코드
const carrot = document.querySelectorAll('.carrot').forEach((item) => {           
            item.addEventListener('click', () => {
                click_carrot();
                item.parentNode.removeChild(item);
                i--;
                game_score.innerHTML=`${i}`;
            });
        });

利用しました.
次に、ゲーム進行中のすべてのトリガを設定します.カウントダウン、勝った時、負けた時、タイムアウトした時、初期化ボタンを押す効果を作ります.
1時間はゲーム開始ボタンを押した時点でカウントダウン10秒です.
2ゲーム中にXキーを押して初期化する
3虫のイメージを押すと失敗画面が表示されます
4 10秒以内にすべてのニンジンを押すと勝利します.
5～10秒ですべてカウントダウンすると、ゲームに失敗します.
6角の状況に応じてカウントを変更してください.

時間を計る

function countdown() {
    timer = 9;
    let timeleft = setInterval(function() {
        if(timer <= 0 && count_reset == 1 && count_victory==1) {
            clearInterval(timeleft);
            fail() ;
            
        }else if(count_reset == 0) {
            clearInterval(timeleft);      
            
        }else if(count_victory == 0) {
            clearInterval(timeleft);
            timer=0;
        }
        else {
            game_timer.innerHTML = `00:${timer}`;
        }
        timer -=1;
    },1000);

  }

上のコードはタイミングの関数です.setIntervalを使用して繰り返し実行します.次の1000は1秒を表します
else ifのcount rest,count勝利値はflag値である.
これは、特定のボタンが押されたときの状況を確認するためのフラグで、この条件に合致する場合はclearIntervalを使用して繰り返しを停止します.

初期化ボタンを押すと

function reset() {
    btn_st.innerHTML = '<i class="fas fa-play"></i>';
    flag_play =0;
    game_field.innerHTML = '';
    pop_up.style.display = "none";
    game_score.innerHTML=0;
    timer =0;
    count_reset= 0;
    game_timer.innerHTML = `00:0${timer}`;
    
  }

虫画像クリックに失敗した場合

function fail() {
    game_field.innerHTML = '';
    pop_up.style.display = "block";
    pop_up_message.innerHTML="YOU LOSE!"
    timer =0;
    game_timer.innerHTML = `00:0${timer}`;
  }

ゲームで勝ったとき。

function victory() {
    game_field.innerHTML = '';
    pop_up.style.display = "block";
    pop_up_message.innerHTML="YOU WIN!"
    let audio3 = new Audio("./sound/game_win.mp3");
      audio3.play();
      timer =0;
      count_victory= 0;
    game_timer.innerHTML = `00:0${timer}`;
  }

ゲーム開始ボタンをクリックすると

function playing() {
    if(flag_play==0){
        let audio4 = new Audio("./sound/alert.wav");
      audio4.play();
      game_timer.innerHTML = `00:10`;
        flag_play =1;
        let i =0;
        count_reset= 1;
        count_victory= 1;
        countdown();

        
        btn_st.innerHTML = '<i class="fas fa-stop"></i>';
        
        for(i =0; i<10; i++){
            game_field.innerHTML += `
            <img class="carrot carrot${i}" src="./img/carrot.png" alt="carrot">
            <img class="bug bug${i}" src="./img/bug.png" alt="bug">
            `;
            const top = position_top();
            const left = position_left();
            let img_carrot = document.querySelector(`.carrot${i}`);
            let img_bug = document.querySelector(`.bug${i}`);
            
            img_carrot.setAttribute("style", `top:${top}; left:${left};`);
            img_bug.setAttribute("style", `top:${top}; left:${left};`);
        }
        game_score.innerHTML=`${i}`;
        const carrot = document.querySelectorAll('.carrot').forEach((item) => {           
            item.addEventListener('click', () => {
                click_carrot();
                item.parentNode.removeChild(item);
                i--;
                game_score.innerHTML=`${i}`;
                if(i===0){
                    victory();
                }
            });
        });
        const bug = document.querySelectorAll('.bug').forEach((item) => {
            item.addEventListener('click', () => {
                click_bug();
            });
        });
        
        
    }
    else{
        reset();
    }

   
}

これはあまり調整されていないコードです.まず,機能の実装を考える.
非効率的なところもたくさんあります.

>改善すべき点。

初期化ボタンを複数回押して、10秒以内にゲームを再開した場合
過去10秒が過ぎる前に、時間の減少は1秒より速く、その後減速速度は順次減少した.