즐거운 자바스크립트 미니게임 만들기

자바스크립트를 배우고 있는 모든 분들에게 추천하는 미니게임 프로젝트입니다. 이 프로젝트를 따라하면서 놀이공원에서 즐기는 게임들과 비슷한 게임들을 자바스크립트로 구현해볼 수 있습니다. 이 게임은 자바스크립트의 기초적인 문법을 이해하며, 적용할 수 있는 좋은 예제가 됩니다.

게임 시작 화면 구현

const startBtn = document.querySelector('#startBtn');
const gameContainer = document.querySelector('#gameContainer');

startBtn.addEventListener('click', () => {
  startBtn.setAttribute('disabled', true);
  const countdown = document.createElement('div');
  countdown.setAttribute('class', 'countdown');
  gameContainer.appendChild(countdown);
  let timeLeft = 3;
  countdown.textContent = timeLeft;

  const timerId = setInterval(() => {
    timeLeft -= 1;
    countdown.textContent = timeLeft;
    if (timeLeft === 0) {
      clearInterval(timerId);
      gameContainer.removeChild(countdown);
      startGame();
      startBtn.removeAttribute('disabled');
    }
  }, 1000);
});

게임 시작 화면을 구현한 코드입니다. 게임 시작 버튼을 클릭하면 카운트다운 화면이 나오며, 3초 뒤에 게임이 시작됩니다.

게임 로직 구현

const moleHoles = document.querySelectorAll('.mole-hole');
let score = 0;

function startGame() {
  let moleInterval = setInterval(() => {
    moleHoles.forEach((moleHole) => {
      moleHole.classList.remove('mole');
    });
    let randomIdx = Math.floor(Math.random() * moleHoles.length);
    moleHoles[randomIdx].classList.add('mole');
  }, 500);

  setTimeout(() => {
    clearInterval(moleInterval);
    alert(`Game Over! Your score is ${score}`);
    score = 0;
  }, 10000);

  moleHoles.forEach((moleHole) => {
    moleHole.addEventListener('click', () => {
      moleHole.classList.remove('mole');
      score += 1;
      document.querySelector('#score').textContent = score;
    });
  });
}

게임 로직을 구현한 코드입니다. 게임이 시작되면 랜덤한 구멍에 두더지가 나옵니다. 그리고 0.5초마다 다른 구멍으로 이동합니다. 게임 종료 시 10초가 지났음을 알리며, 점수를 보여줍니다. 새로운 게임을 시작하려면 게임 시작 버튼을 다시 눌러주세요.

이렇게 간단한 자바스크립트 미니게임을 구현해보았습니다. 프로그래밍 초보자들도 쉽게 따라할 수 있도록 꼼꼼한 설명을 추가했습니다. 자바스크립트 실력을 향상시킬 수 있는 좋은 기회이니, 이번 주말에 한 번 도전해보세요!

키워드: 자바스크립트 미니게임, 프로그래밍 초보자, 놀이공원 게임