자바스크립트 미니게임 제작하기: 초보자를 위한 가이드

무엇을 만들 것인가?

우리는 이번에 자바스크립트를 사용하여 간단한 미니게임을 만들어 보려고 합니다! 이번 게임은 ‘반응 속도 측정 게임’ 입니다. 즉, 사용자가 버튼을 누르는 속도를 측정하는 게임입니다.

어디서 시작할까요?

우리는 HTML, CSS 및 JavaScript를 사용하여 게임을 만들 것입니다. 먼저 HTML 파일을 작성하고, 게임을 위한 필요한 CSS를 작성할 것입니다. 그런 다음 JavaScript 파일을 작성하여 게임의 논리를 구현해 볼 것입니다.

CSS 작성하기

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
.button {
    padding: 20px;
    font-size: 2rem;
    background-color: #fcba03;
    border: none;
    border-radius: 25px;
    color: #fff;
    cursor: pointer;
}

이 CSS 코드에서는 먼저 body 태그에 대해 중앙 정렬을 설정하도록 하고, 그 안에 버튼의 스타일을 지정한 후, 해당 버튼을 클릭할 수 있는 커서를 추가합니다.

JavaScript 작성하기

//variables
let start_time, end_time;

//DOM References
const button = document.querySelector('.button');

//functions
const startGame = () => {
  setTimeout(() => {
    button.innerText = "Click Now!";
    button.addEventListener(('click'), () => {
      end_time = new Date().getTime();
      calculateTime(start_time, end_time);
    });
  },  Math.random() * 3000);
}

const calculateTime = (start, end) => {
  const time = (end - start) / 1000;
  alert(`Your time is ${time} seconds`);
}

//event listener
button.addEventListener('click', () => {
  button.setAttribute('disabled', '');
  button.innerText = "Wait for Green Color";
  setTimeout(() => {
    start_time = new Date().getTime();
    button.style.backgroundColor = '#00b300';
    button.removeAttribute('disabled');
    startGame();
  }, Math.random() * 3000);
});

이 코드에서는 먼저 필요한 변수를 선언한 후, DOM을 사용하여 버튼에 대한 참조를 가져옵니다. startGame 함수는 게임의 주요 논리를 담당합니다. 버튼을 누르기 전에 1-3 초 사이의 랜덤한 시간 동안 프로그램이 대기하도록 설정됩니다. 그 후, 버튼이 클릭되면 end_time 변수가 설정되고 calculateTime 함수가 호출됩니다. calculateTime 함수는 버튼 클릭 시간과 시작 시간을 계산하고, 사용자에게 경고 메시지를 보여줍니다. 마지막으로, 버튼 클릭이 이루어지면 모든 것이 리셋됩니다.

자바스크립트 미니게임은 자바스크립트를 활용한 놀이적인 프로그래밍의 대표적인 예입니다. 이번 게임을 만들면서 그동안 배운 지식을 복습하고, 실제로 적용할 수 있는 좋은 기회가 될 것입니다.

키워드: 자바스크립트 미니게임, 초보자 가이드, 반응 속도 측정