[JavaScript30] 🕹 30. Whake A Mole

20870 ワード
JavaScript javascript30 テキストリンク

🕹 30. Whake A Mole


モグラ狩り

イニシャルコード
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Whack A Mole!</title>
    <link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style_JuneHyung.css">
</head>
<body>
    <h1>Whack-a-mole! <span class="score">0</span></h1>
    <button onClick="startGame()">Start!</button>

    <div class="game">
        <div class="hole hole1">
            <div class="mole"></div>
        </div>
        <div class="hole hole2">
            <div class="mole"></div>
        </div>
        <div class="hole hole3">
            <div class="mole"></div>
        </div>
        <div class="hole hole4">
            <div class="mole"></div>
        </div>
        <div class="hole hole5">
            <div class="mole"></div>
        </div>
        <div class="hole hole6">
            <div class="mole"></div>
        </div>
    </div>
    <script>
        const holes =document.querySelectorAll('.hole');
        const scoreBoard = document.querySelector('.score');
        const moles = document.querySelectorAll('.mole');
    </script>
</body>
</html>
初期画面

🌏 プロセス


👉 0.宣言変数

const holes =document.querySelectorAll('.hole');
const scoreBoard = document.querySelector('.score');
const moles = document.querySelectorAll('.mole');
let lastHole;
let score = 0;

👉 1. randomTime()


モグラが出てから入るランダムな時間
最小～最大
function randomTime(min,max){
    return Math.round(Math.random()*(max - min) + min);
}

👉 2. randomHole()


モグラが出る穴をランダムに選ぶ.
function randomHole(holes){
    // console.log(holes.length);
    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);
    }

    // console.log(hole);

    lastHole = hole;
    return hole;
}
最後に選んだ穴が引いた穴と同じなら、再び穴を選びます.
つまり、すでに出てきた子供が再び選ばれると、新しく選ばれるということです.

👉 3. peep()


実際の出力モグラの関数
function peep(){
    const time = randomTime(200, 1000);
    const hole = randomHole(holes);
    // console.log(time, hole);
    hole.classList.add('up'); // top:0
    setTimeout(()=>{
        hole.classList.remove('up');
        if(!timeUp) peep();
    }, time);
}

randomHoleから選択したdiv(穴)にclass upを追加してクリアします.
upクラスはtopを0に設定したクラスです.
timeUpでなければpeep()動作をやり直します

👉 4. startGame()


ゲームを開始する関数.
function startGame(){
    scoreBoard.textContent = 0;
    timeUp = false;
    score = 0;
    peep();
    setTimeout(()=>timeUp=true, 10000);
}
scoreBoardのスコア、時間などを初期化し、10秒後にtimeUpをtrue停止に変更します.

👉 5. bonk


クリック時にスコアを増やす関数
upクラスをクリアし、再読み込みします.
scoreBoardの点数を増やします.
最後にbonk関数をクリックイベントとしてすべてのモルに追加します.
function bonk(e){
    // console.log(e);
    if(!e.isTrusted) return; //cheater!;
    score++;
    this.classList.remove('up');
    scoreBoard.textContent = score;
}
moles.forEach(mole => mole.addEventListener('click', bonk));
.netが文字化けしを解決するサイドゲート通路
7.5.3八数コードの問題