16_ 두더지잡기

Javascript

by 모모87 2021. 4. 26. 11:34

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <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.css" />
    </head>
    <body>
        <h1>두더지를 잡아라!! <span class="score">0</span></h1>
        <button onClick="startGame()" class="btn-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');
            let lastHole;
            lastTimeUp = 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('또나왔네');
                    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;
                score++;
                this.classList.remove('up');
                scoreBoard.textContent = score;
            }
            moles.forEach((mole) => mole.addEventListener('click', bonk));
        </script>
    </body>
</html>

'Javascript' 카테고리의 다른 글

물리엔진 js Matter.js (0)	2021.08.13
jquery 모달 바깥영역 클릭시 닫기 (0)	2021.06.17
전체체크 / 부분체크 addClass, removeClass 조건식 넣기 (0)	2021.04.26
웹 페이지 스크롤 부드럽게 동작하게 만들기 (0)	2021.03.24
마우스 방향에 따라 움직이는 패럴럭스 효과 (0)	2021.03.24