자동차 경주 게임

문제 출처 - 엘리스 SW 엔지니어 트랙 2기

개요

버튼을 클릭하면 자동차 요소들이 경주를 진행하고, 어떤 차가 이기는지 확인 후 초기화 하는 코드

Html, CSS

<button>경주 시작</button>
<br>
<div class="car1"></div>
<br>
<div class="car2"></div>

div {
    width: 50px;
    height: 50px;
    display: inline-block;
}
.car1 {
    background-color: yellow;
}
.car2 {
    background-color: purple;
}
.car1, .car2 {
    margin-left: 0;
}

JavaScript

var button = document.querySelector("button");
var car1 = document.querySelector(".car1");
var car2 = document.querySelector(".car2");
car1.style.marginLeft = 0;
car2.style.marginLeft = 0;

reset 함수로 초기화

두 자동차의 경주가 끝나고 다시 초기화하는 함수

function reset(car1, car2) {
  clearTimeout(car1.timer);
  clearTimeout(car2.timer);
  car1.style.marginLeft = 0;
  car2.style.marginLeft = 0;
  button.disabled = false;
}

• clearTimeout 을 이용해 타이머를 초기화합니다.
  • clearTimeout

• car1.timer 에서 timer는 임의로 지정한 변수입니다.

• CSS :disabled 의사 클래스는 모든 비활성 요소를 나타냅니다. 비활성 요소란 활성(선택, 클릭, 입력 등등)하거나 포커스를 받을 수 없는 요소를 말합니다. 반대 상태인 활성 요소도 존재합니다.
  • :disabled
    

click 이벤트로 경주 진행

이제 버튼 click 이벤트를 등록하여, 경주를 진행하고 어떤 차가 이기는지 확인해봅니다.

button.addEventListener("click", function (event) {
  button.disabled = true;
  
  // car1 코드
  // car2 코드
  
})

setInterval로 차 움직이기

car1의 timer에 setInterval 함수를 이용해 주기적으로 차가 앞으로 나아가게 합니다.

car1.timer = setInterval(function () {
  car1.style.marginLeft =
    parseInt(car1.style.marginLeft) + Math.random() * 60 + "px";
  if (parseInt(car1.style.marginLeft) > window.innerWidth) {
    alert("Car 1 wins!");
    reset(car1, car2);
  }
}, 60);

• setInterval : 일정 시간마다 반복적으로 코드를 실행하고자 할 때 사용됩니다.

setInterval(function(){
	...
}, 3000); // 3초간격으로반복적으로코드실행

• margin 을 이용해 차가 앞으로 진행하는 것처럼 보이게 합니다.
• car1.style.marginLeft 에 현재 가지고 있는 값과 Math.random() 을 이용한 랜덤한 값을 넣어 더해줍니다.
• 만약 그 값이 현재 윈도우의 크기(window.innerWidth)보다 커지는 경우, 해당 차가 이긴 것으로 간주하고 경고문을 띄웁니다.
• car2 도 동일한 방법으로 구현하면 됩니다.

JS 전체코드

var button = document.querySelector("button");
var car1 = document.querySelector(".car1");
var car2 = document.querySelector(".car2");
car1.style.marginLeft = 0;
car2.style.marginLeft = 0;

function reset(car1, car2) {
  clearTimeout(car1.timer);
  clearTimeout(car2.timer);
  car1.style.marginLeft = 0;
  car2.style.marginLeft = 0;
  button.disabled = false;
}

button.addEventListener("click", function (event) {
  button.disabled = true;
  
  //car1
  car1.timer = setInterval(function() {
    car1.style.marginLeft = parseInt(car1.style.marginLeft) + Math.random() * 60 + "px";
    if (parseInt(car1.style.marginLeft) > window.innerWidth) {
      alert("Car 1 wins!");
      reset(car1, car2);
    }
  }, 60);
  
  //car2
  car2.timer = setInterval(function () {
      car2.style.marginLeft =
        parseInt(car2.style.marginLeft) + Math.random() * 60 + "px";
      if (parseInt(car2.style.marginLeft) > window.innerWidth) {
        alert("Car 2 wins!");
        reset(car1, car2);
      }
    }, 60);
})