2. 당근게임 - 재생버튼클릭 /당근과벌레 생성/ timer/score

 

 

1. DOM요소로 게임 버튼/타이머/스코어를 가져온다.

const gameBtn = document.querySelector('.game__button');
const timerIndicator = document.querySelector('.game__timer');
const gameScore = document.querySelector('.game__score');

 

2. 게임을 하기전 상태를 기억하고 있는 변수를 선언 해야한다.

let started = false; //게임이 시작 되었는지 안 되었는지
let score = 0; //최종 점수가 몇인지
let timer = undefined; //시간이 얼마 남았는지(시작하지 않으면 undefined)

 

3.  게임시작버튼을 이벤트 리스너를 이용해 클릭하면 ~

gameBtn.addEventListener('click', () => {
  if (started) {
    stopGame();
  } else {
    startGame();
  }
  started = !started; //?
});

 

 

4.시작하면 {stopGame()}  -> 게임시작, pause버튼, 타이머와 스코어 시작

function startGame() {
  initGame();
  showStopButton();
  showTimerAndScore();
}

 

5. 끝나면 {startGame()}

function stopGame() {}

 

 

6. pause 버튼

function showStopButton() {
  const icon = gameBtn.querySelector('.fas');
  icon.classList.add('fa-stop');
  icon.classList.remove('fa-play');
  gameBtn.style.visibility = 'visible';
}

7. 타이머&스코어 

function showTimerAndScore() {
  timerIndicator.style.visibility = 'visible';
  gameScore.style.visibility = 'visible';
}

 

 

 

 

 

'use strict';

const CARROT_SIZE = 80;
const CARROT_COUNT = 5;
const BUG_COUNT = 5;

const field = document.querySelector('.game__field');
const fieldRect = field.getBoundingClientRect();
const gameBtn = document.querySelector('.game__button');
const timerIndicator = document.querySelector('.game__timer');
const gameScore = document.querySelector('.game__score');

//게임 상태를 기억하고 있는 변수
let started = false; //게임이 시작 되었는지 안 되었는지
let score = 0; //최종 점수가 몇인지
let timer = undefined; //시간이 얼마 남았는지(시작하지 않으면 undefined)

function initGame() {
  field.innerHTML = ''; //게임을 새로시작할때 늘 필드는 빈곳으로~
  gameScore.innerText = CARROT_COUNT;
  //벌레와 당근을 생성한 뒤 필드에 추가해줌.
  addItem('carrot', CARROT_COUNT, 'img/carrot.png');
  addItem('bug', BUG_COUNT, 'img/bug.png');
}
gameBtn.addEventListener('click', () => {
  if (started) {
    stopGame();
  } else {
    startGame();
  }
  started = !started; //?
});

function startGame() {
  initGame();
  showStopButton();
  showTimerAndScore();
}

function stopGame() {}

function showStopButton() {
  const icon = gameBtn.querySelector('.fas');
  icon.classList.add('fa-stop');
  icon.classList.remove('fa-play');
  gameBtn.style.visibility = 'visible';
}

function showTimerAndScore() {
  timerIndicator.style.visibility = 'visible';
  gameScore.style.visibility = 'visible';
}

function addItem(className, count, imgPath) {
  //필드 안에서 아이템들을 absolute로 설정해서 랜덤하게 뿌려주기
  const x1 = 0;
  const y1 = 0;
  const x2 = fieldRect.width - CARROT_SIZE;
  const y2 = fieldRect.height - CARROT_SIZE;
  for (let i = 0; i < count; i++) {
    const item = document.createElement('img');
    item.setAttribute('class', className);
    item.setAttribute('src', imgPath);
    item.style.position = 'absolute';
    const x = randomNumber(x1, x2);
    const y = randomNumber(y1, y2);
    item.style.left = `${x}px`;
    item.style.top = `${y}px`;
    field.appendChild(item);
  }
}

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

initGame();