[JavaScript30] Day 30

Whack A Mole

 

const holes = document.querySelectorAll('.hole');
const scoreBoard = document.querySelector('.score');
const moles = document.querySelectorAll('.mole');

function randomTime(min, max) {
  return Math.round(Math.random() * (max- min) + min);
}

Math.round() 사용 전

Math.round() 사용 후

Math.random()으로 숫자를 가져오면 숫자가 정수로 나오지 않는다.

그래서 Math.round()으로 정수로 만들어 준다.

 

function randomHole(holes) {
  console.log(holes.length);
}

 

function randomHole(holes) {
  const idx = Math.floor(Math.random() * holes.length);
  const hole = holes[idx];
  console.log(hole);
}

이경우에는 연속으로 똑같은 Hole이 선택될 수도 있다.

 

let lastHole;

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;
}

방금 선택되었던 hole이 또 선택되지 않도록한다.

console창에는 메시지가 뜨지만 실제 화면에서는 아무 반응이 없다.

 

function peep() {
  const time = randomTime(200, 1000);
  const hole = randomHole(holes);
  console.log(time, hole);
}

 

 

function peep() {
  const time = randomTime(200, 1000);
  const hole = randomHole(holes);
  hole.classList.add('up');
}

여러 번 반복될 경우, 두더지가 나온 후 들어가지 않아 나온 채로 유지되게 된다.

 

function peep() {
  const time = randomTime(200, 1000);
  const hole = randomHole(holes);
  hole.classList.add('up');
  setTimeout(() => {
    hole.classList.remove('up');
  }, time);
}

이렇게 하면 두더지가 나왔다가 일정 시간 후에 다시 들어가게 된다.

 

function peep() {
  const time = randomTime(200, 1000);
  const hole = randomHole(holes);
  hole.classList.add('up');
  setTimeout(() => {
    hole.classList.remove('up');
    peep();    
  }, time);
}

 setTimeout 안에  peep() 을 한번 더 넣어서 계속 반복하게 해 준다.

 

let tiemUp = false;

function peep() {
  const time = randomTime(200, 1000);
  const hole = randomHole(holes);
  hole.classList.add('up');
  setTimeout(() => {
    hole.classList.remove('up');
    if(!timeUp) peep();
  }, time);
}

계속 반복되는 것을 멈추기 위해서  timeUp 이라는 변수를 만들고 timeUp = false일때만 peep()이 작동하도록 한다.

 

function startGame() {
  scoreBoard.textContent = 0;
  timeUp = false;
  peep();
  setTimeout(() => timeUp = true, 10000);
}

시작이라는 버튼을 누르면 10초 동안 두더지가 나왔다 들어가는 것을 반복한다.

 

function bonk(e) {
  console.log(e);
}

moles.forEach(mole => mole.addEventListener('click', bonk));

나온 두더지를 클릭하면 많은 정보를 가질 수 있는데,

우리는 javascript 등으로 클릭이 이루어진 것이 아니라 진짜로 클릭해서 일어났음을 확인하기 위해  isTrusted 라는 정보를 이용한다.

 

 

let score = 0;

function bonk(e) {
  if(!e.isTrusted) return; //  cheaten;
  score++;
  this.classList.remove('up');
  scoreBoard.textContent = score;
}

점수를 넣은 변수를 생성하고, 

클릭을 할 때마다 1점씩 쌓이도록 한다.

 

 

최종 코드

const holes = document.querySelectorAll('.hole');
const scoreBoard = document.querySelector('.score');
const moles = document.querySelectorAll('.mole');
let lastHole;
let timeUp = false;
let score = 0;

function randomTime(min, max) {
  return Math.round(Math.random() * (max- min) + min);
}

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;
}

function peep() {
  const time = randomTime(200, 1000);
  const hole = randomHole(holes);
  hole.classList.add('up');
  setTimeout(() => {
    hole.classList.remove('up');
    if(!timeUp) peep();
  }, time);
}

function startGame() {
  scoreBoard.textContent = 0;
  timeUp = false;
  scroe = 0;
  peep();
  setTimeout(() => timeUp = true, 10000);
}

function bonk(e) {
  if(!e.isTrusted) return; //  cheaten;
  score++;
  this.classList.remove('up');
  scoreBoard.textContent = score;
}

moles.forEach(mole => mole.addEventListener('click', bonk));

 

 

JavaScript30 강의를 보고 공부한 글입니다. (https://javascript30.com/)