자바스크립트로 두더지잡기 게임 만들기 - clearInterval()

그동안 자잘한 프로젝트를 만들며 배운 메서드들을 복습하기 위해 애니메이션 효과 없이 간단하게 두더지 잡기 게임을 만들었다. 다른 프로젝트들이 기본 2,3일 소요된 걸 생각하면 하루만에 완성한 간단한 프로젝트다.

 

필요한 기능

• n초마다 두더지가 랜덤한 위치에 나타나고, 다시 사라지기
• 두더지를 클릭하면 점수가 오르게 하기
• 시간이 종료되면 승리/패배여부와 리셋버튼 나타내기

 

제작기간

약 3시간

 

완성코드

마땅한 이미지가 없어 두더지 대신 여우 이미지를 썼다. 본의아니게 여우잡기가 돼버렸다.

See the Pen Untitled by beren-105 (@beren-105) on CodePen.

깃허브에서 전체 코드 보기 https://github.com/beren-105/Mini-Project/tree/main/7_Whack_a_mole

 

 

---

 

1. 틀 만들기

먼저 필요한 엘리먼트들을 가져오고, 점수와 시간을 세팅했다.

화면이 처음 시작되면 가로 5개 세로 5개 총 25개의 칸이 나타나게 만들었다. 이 25개의 칸에서 두더지가 랜덤하게 나올 예정이다.

const scoreSpan = document.querySelector('.score')
const timeSpan = document.querySelector('.time')
const start = document.querySelector('button')
const win = document.querySelector('.win')
const lose = document.querySelector('.lose')
const reset = document.querySelectorAll('.reset')

let score = 0
let time = 30
let randonsF
let timerF


document.addEventListener('DOMContentLoaded', loaded)

function loaded() {
    const grid = document.querySelector('.grid')
    
    scoreSpan.innerText = score
    timeSpan.innerText = time
    for (let i=0; i<25; i++) {
        const div = document.createElement('div')
        div.classList.add('card')
        grid.appendChild(div)
    }
}

 

2. 랜덤하게 두더지 나타내기 / 사라지게 하기

버튼을 클릭할 시 두가지 setInterval() 함수가 실행된다. 첫번째는 랜덤하게 두더지를 나타내주고, 두번째는 시간이 감소하는 이벤트다. 시간 감소는 추후 추가하고 먼저 두더지를 나타나고 사라지게 해보자.

1. Math.random()을 사용해 25개의 칸에서 두더지가 나올 칸을 랜덤으로 결정한다.
2. 해당 칸에 img를 추가한다. 
3. setTimeout()을 사용해 0.7초 뒤에 이미지를 다시 지워버린다.

randons 함수에는 스코어를 계산할 함수를 넣기위해 클릭 이벤트를 추가했다.

start.addEventListener('click', gameStart)

// 시작버튼 클릭
function gameStart() {
    randonsF = setInterval(randons, 1500)
    timerF = setInterval(timer, 1000)
}

// 랜덤으로 두더지 나타나기
function randons() {
    let randomNub = Math.floor(Math.random() * 24)
    const card = document.querySelectorAll('.card')
    const img = document.createElement('img')
    img.setAttribute('src', './image/fox.png')

    console.log(randomNub)
    card[randomNub].appendChild(img)
    img.addEventListener('click', imgclick)
    setTimeout(remove, 700);
}

// 두더지 다시 사라지기
function remove() {
    const img = document.querySelector('img')
    img.remove()
}

 

3. 점수, 타이머 표시하기

제일 간단한 이벤트다. 이미지를 클릭하면 score가 올라가고, 해당 score는 span 태그에 나타난다.

시간은 반대로 1초마다 줄어들고, 0이 되면 게임이 끝났음을 알리는 함수가 작동된다.

// 두더지 클릭
function imgclick() {
    score++
    scoreSpan.innerText = score
}

// 타이머 이벤트
function timer() {
    time--
    timeSpan.innerText = time
    if (time === 0) {
        gameOver()
    }
}

 

4. 결과 표시하기

게임이 종료되면 두더지가 나오는 이벤트와 타이머 이벤트가 종료된다. 이때 사용하는 것이 clearInterval()다.

 

clearInterval()

setInterval()를 중단하는 이벤트다. setInterval()를 변수로 선언하고, 선언한 키를 () 안에 넣어주면 된다.

let interval = setInterval(() => {}, 1000)
clearInterval(interval)

 

clearInterval()로 함수를 정지시키고, if문을 사용해 점수에 따라 결과가 다르게 출력되도록 만들었다.

마지막으로 리셋버튼을 만들어 버튼 클릭 시 다시 게임을 진행할 수 있도록 세팅했다.

// 게임종료
function gameOver () {
    clearInterval(timerF)
    clearInterval(randonsF)
    
    if (score >= 10) {
        win.classList.remove('hidden')
    } else {
        lose.classList.remove('hidden')
    }

    reset.forEach((reset)=> {
        reset.addEventListener('click', resetBtn)
    })
}

// 리셋버튼
function resetBtn() {
    win.classList.add('hidden')
    lose.classList.add('hidden')
    score = 0
    time = 30
    scoreSpan.innerText = score
    timeSpan.innerText = time
}