[JavaScript30] ๐น 30. Whake A Mole
๐น 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));
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ([JavaScript30] ๐น 30. Whake A Mole), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@cjh951114/JavaScript30-30.-Whake-A-Mole์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค