기본 코드
<!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>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>
목표
두더지잡기 게임을 만들어보자.
코드 분석
1. 사용할 변수들에 대해 선언한다.
const holes = document.querySelectorAll('.hole');
const scoreBoard = document.querySelector('.score');
const moles = document.querySelectorAll('.mole');
let lastHole;
let timeUp = false;
let score = 0;
2. 두더지가 튀어나오는 시간을 정하는 함수를 정한다.
function randTime(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
Math.round는 저번에 언급했던 것처럼 반올림을 하는 메서드이고, Math.random()은 랜덤하게 값을 고르는 것이다.
이 두개를 바탕으로 정리해보면, 정해놓은 최소시간과 최대시간 사이에서 랜덤하게 시간값이 나오도록 하는 함수이다.
3. 두더지가 튀어나오는 홀을 정하는 함수를 정한다.
function randomHole(holes) {
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);
}
lastHole = hole;
return hole;
}
idx라는 변수를 0과 5사이의 값중에서 랜덤하게 값이 출력되도록 지정하고 이 값을 holes[]의 배열번호에 넣어 랜덤하게 6개의 홀중 하나가 선택되도록 지정한다. 그 다음 중복으로 나오는 경우를 제외하기 위해 if문을 이용하여 중복될 경우에는 멘트가 콘솔에 나오는 동시에 새로 뽑은 값을 반환하도록 하고, 중복이 아니게 되면 그때 그 값인 hole이 lastHole이 된다.
4. 두더지가 튀어나오는 함수를 정한다.
function peep() {
const time = randomTime(200, 1000);
const hole = randomHole(holes);
hole.classList.add('up');
setTimeout(() => {
hole.classList.remove('up');
if (!timeUp) peep();
}, time);
}
랜덤한 시간과 랜덤한 홀을 지정한 다음, 랜덤하게 지정된 홀에 'up'이라는 클래스를 추가해준다. 그리고 랜덤한 시간이 지나면 다시 'up'클래스를 지워주도록 지정하되 timeUP값이 true일 경우에는 peep을 다시 실행한다.
5. 게임을 시작하는 함수를 정한다.
function startGame() {
scoreBoard.textContent = 0;
timeUp = false;
score = 0;
peep();
setTimeout(() => timeUp = true, 10000)
}
스코어보드에 값을 0으로 지정하고 timeUp값도 false로 지정해놓는다. 그 다음 peep을 실행하면서 10초가 지나면 timeUp값을 true로 해주어 위의 함수에서 지정한 것처럼 peep이 다시 실행될 수 있도록 해준다.
6. 두더지를 잡았을 때의 함수를 정한다.
function bonk(e) {
if(!e.isTrusted) return;
score++;
this.classList.remove('up');
scoreBoard.textContent = score;
}
.isTrusted에 따라 이벤트가 사용자 생성에 의해 발생하지 않은 경우에는 바로 리턴해주고, 그렇지 않으면 점수를 올리고, 'up'클래스를 지워주는 동시에 점수판에 올라간 점수를 반영해 주는 함수이다.
7. 이벤트 리스너를 지정해준다.
moles.forEach(mole => mole.addEventListener('click', bonk));
두더지를 클릭하면 bonk함수가 실행되도록 연결해준다.
마무리
두더지잡기를 자바스크립트를 이용해 구현해 보니 역시 프론트엔드쪽이 재미있는것같다는 생각이 들었다.
내용은 크게 어렵지 않았다.
끝.
'개발 > JavaScript 30' 카테고리의 다른 글
| 31. JavaScript 30을 마치며 (1) | 2017.04.27 |
|---|---|
| 29. CountDown Timer (0) | 2017.04.27 |
| 28. Video Speed Controller (0) | 2017.04.27 |
| 27. Click and Drag (0) | 2017.04.26 |
| 26. Stripe Follow Along Nav (0) | 2017.04.26 |
