[JavaScript30] ๐Ÿ•น 30. Whake A Mole

20829 ๋‹จ์–ด JavaScriptjavascript30JavaScript

๐Ÿ•น 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()

๋‘๋”์ง€๊ฐ€ ๋‚˜์™”๋‹ค ๋“ค์–ด๊ฐˆ ๋žœ๋ค์‹œ๊ฐ„.
์ตœ์†Œ min ~ max

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

๋งŒ์•ฝ ๋งˆ์ง€๋ง‰์— ๊ณ ๋ฅธ hole์ด๋ž‘ ๋ฝ‘์€ 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()

game์„ ์‹œ์ž‘ํ•˜๋Š” ํ•จ์ˆ˜.

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

scoreBoard์˜ ์ ์ˆ˜, ์‹œ๊ฐ„๋“ฑ ์ดˆ๊ธฐํ™”์‹œํ‚ค๊ณ , 10์ดˆํ›„์— timeUp์„ true๋กœ ๋ฐ”๊ฟ” ์ •์ง€์‹œํ‚จ๋‹ค.

๐Ÿ‘‰ 5. bonk

ํด๋ฆญํ–ˆ์„ ๋•Œ ์ ์ˆ˜๋ฅผ ์ฆ๊ฐ€์‹œํ‚ค๋Š” ํ•จ์ˆ˜

upํด๋ž˜์Šค๋ฅผ ์ง€์›Œ์„œ ๋‹ค์‹œ ๋“ค์–ด๊ฐ€๊ฒŒํ•จ.

scoreBoard์˜ ์ ์ˆ˜๋ฅผ ์ฆ๊ฐ€์‹œํ‚จ๋‹ค.

๋งˆ์ง€๋ง‰์— ๋ชจ๋“  mole๋“ค์— 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));

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ