[TIL] 211002

dev·2021년 10월 2일

JavaScript TIL

TIL

목록 보기

45/204

📝 오늘 한 것

미니 게임 구현 중 (1차 수정 완료)

📚 배운 것

당근만 클릭해야 하는 게임(?)

⭐ 강의 참고해 코드 수정

처음 완성 코드
어제 풀이에서 이어서

3. 게임 시작하기

게임 시작 버튼을 클릭하면

1) field 내부가 리셋된 후, 필드 안에 당근 10개과 벌레 7마리가 랜덤한 위치에 배치되어야 한다.
2) 타이머가 작동해야 한다. (10초부터 시작)
3) 클릭 가능 횟수가 10으로 바뀌어야 한다.
4) 게임 시작 버튼 안의 아이콘이 중지 아이콘으로 바뀌어야 한다.

📌 내가 처음 작성한 코드

따로 없었다. 아래와 같이 그냥 바로 startBtn 이벤트 리스너 안에 if 구문을 만들어서 쭉 써줬음.

startBtn.addEventListener('click', function startTimer () {
  if (document.querySelector('i[class$="stop"]') === null) { // 게임 시작 전, 게임 시작

    placeImgRandomly();

    timer.innerHTML = `0:10`;
    startWorkingTimer();

    clickLimit.innerHTML = 10;

    bg_mp3.play();

    startBtn.innerHTML = '<i class="fas fa-stop"></i>';

  } else { // 게임 시작 후, 게임 정지

    /* 코드 중략 */
  
  }
});

💡 기본 수정

게임 상태를 기억하는 전역 변수를 추가했다. (started, timer, limit) 게임 진행 상태에 따라 그 값을 바꿔줘야 하는 변수이므로 let을 사용해 global scope에 선언해야 한다.
startBtn의 이벤트 리스너 본문을 수정했다.
- if 구문의 조건식을, started 변수를 이용해 바꿨다.
  if (document.querySelector('[class$="stop"]') → if (started)
- 여기저기 써놓은 코드들을 수정 및 정리해 global scope에 startGame 함수와 stopGame 함수를 만들었다.
field를 리셋하기 위해 적었던 코드를 간결하게 바꿨다. 아래 코드를 field.innerHTML = '' 로 바꿔서 '당근, 벌레 이미지 랜덤 배치 함수 안'에 삽입함. ~~최고로 비효율적이었~~

// 당근, 벌레 제거 & replay 창 제거
function init ()  {
  const carrots = document.querySelectorAll('img[alt="carrot"]');
  const bugs = document.querySelectorAll('img[alt="bug"]');

  for (let i = 0; i < carrots.length; i++) {
    carrots[i].remove();
  }

  for (let i = 0; i < bugs.length; i++) {
    bugs[i].remove();
  }

  const result = document.querySelector('.result');
  result.remove();
}

💡 당근, 벌레 랜덤 배치 함수

[TIL] 211001 참고

💡 타이머 시작 함수

🔎 내가 처음 작성한 코드

타이머를 10초부터 시작하면 게임 시작하고 1초가 지나야 10이 뜸. 그래서 내가 작성할 때는 10을 초기값으로 따로 표시해준 후 타이머는 9부터 시작하는 일종의 꼼수를 사용했다.

// 각 이벤트 리스너 함수에 적어줌
timer.innerHTML = `0:10`;

// 타이머 관련
let time = 9;
let decreNum;

function startWorkingTimer () {
  decreNum = setInterval(function () {
    const second = time % 60;
    timer.innerHTML = `0:${second}`;
    time--;

    if (time < 0) {
      clearInterval(decreNum);

      bg_mp3.pause();

      startBtn.style.visibility = 'hidden';

      displayResult('YOU LOST 💩');
    }
  }, 1000);
}

🔎 강의를 참고해 처음 수정한 코드

게임을 시작한 후 1초가 지나야만 10이 뜨는 문제 발생

// 타이머 시작 함수
function startTimer() {
  let remainingSec = 10;
  const decNum = setInterval(function () {
    let minute = Math.floor(remainingSec / 60);
    let second = remainingSec % 60;
    timer.innerHTML = `${minute}:${second}`;
    remainingSec--;
  }, 1000);
}

🔎 수정 및 완성

displayTime 함수를 setInterval 메서드보다 먼저 써줘야, 게임 시작 후 1초를 기다리지 않고도 10초가 화면에 표기된다.
그 후 setInterval 메서드 안의 diplayTime(--reaminingTime) 을 통해 1초씩 줄어든 시간을 표기할 수 있다.

// 게임 상태를 기억하는 전역 변수들
let timer = undefined;

// 숫자 관련 전역 변수들
const GAME_DURATION_TIME = 10; // 초 단위

// 타이머 시작 함수
function startTimer() {
  let remainingSec = GAME_DURATION_TIME;
  displayTime(remainingSec);
  timer = setInterval(() => {
    if (remainingSec <= 0) {
      clearInterval(timer);
      return;
    }
    displayTime(--remainingSec);
  }, 1000);
}

// 남은 시간 표기 함수
function displayTime (time) {
  let minutes = Math.floor(time / 60);
  let seconds = time % 60;
  gameTimer.innerHTML = `${minutes}:${seconds}`;
}

💡 클릭 제한 횟수 10으로 설정

🔎 내가 처음 작성한 코드

startBtn.addEventListener('click', function () {
  clickLimit.innerHTML = 10;
});

🔎 강의를 참고해 수정 및 완성

'당근, 벌레 이미지 랜덤 배치 함수'인 placeRandomly 함수의 이름을 initGame으로 이름을 바꾸고, 클릭 제한 횟수를 10 즉, 당근의 개수로 설정하는 코드까지 함께 넣어주었다.

// 게임 초기화 (당근과 벌레 이미지 랜덤 배치 / 클릭 제한 횟수 10으로 설정)
function initGame () {
  field.innerHTML = '';

  makeImg('carrot', CARROT_COUNT, 'img/carrot.png', CARROT_SIZE);
  makeImg('bug', BUG_COUNT, 'img/bug.png', BUG_SIZE);

  gameLimit.innerHTML = CARROT_COUNT;
  
  bg_mp3.play();
}

💡 게임 시작 버튼 → 중지 버튼

🔎 내가 처음 작성한 코드

startBtn.addEventListener('click', function () {
  startBtn.innerHTML = '<i class="fas fa-stop"></i>';
});

🔎 강의를 참고해 수정 및 완성

// 게임 중지 아이콘 표기 함수
function showStopIcon () {
  const icon = document.querySelector('.fa-play');
  icon.classList.add('fa-stop');
  icon.classList.remove('fa-play');
}

📌 '게임 시작하기' 최종 수정 코드

'use strict';

// html에서 받아온 요소들
const startBtn = document.querySelector('.setting-startBtn');
const gameTimer = document.querySelector('.setting-timer');
const gameLimit = document.querySelector('.setting-limit');
const field = document.querySelector('.field');

// 게임 상태를 기억하는 전역 변수들
let started = false;
let timer = undefined;
let limit = 0;

// 숫자 관련 전역 변수들
const CARROT_COUNT = 10;
const BUG_COUNT = 7;
const CARROT_SIZE = 120;
const BUG_SIZE = 80;
const GAME_DURATION_TIME = 10;


// 게임 시작 버튼 클릭 시
startBtn.addEventListener('click', () => {
  if (started) {
    stopGame();
  } else {
    startGame();
  }
  started = !started;
});

// 게임 시작 함수
function startGame () {
  // 게임 초기화
  initGame();

  // 타이머 시작
  startTimer();

  // 게임 시작 아이콘 → 게임 중지 아이콘
  showStopIcon();
}


// 게임 초기화 (당근과 벌레 이미지 랜덤 배치 / 클릭 제한 횟수 10으로 설정 )
function initGame () {
  makeImg('carrot', CARROT_COUNT, 'img/carrot.png', CARROT_SIZE);
  makeImg('bug', BUG_COUNT, 'img/bug.png', BUG_SIZE);

  gameLimit.innerHTML = CARROT_COUNT;
}

// 이미지 생성 함수
function makeImg (name, count, src, size) {
  for (let i = 0; i < count; i++) {
    const item = document.createElement('img');
    item.setAttribute('class', `${name}`);
    item.setAttribute('src', `${src}`);

    const coord = randomCoord(size);
    item.style.left = coord[0] + 'px';
    item.style.top = coord[1] + 'px';
    item.style.width = size + 'px';

    field.appendChild(item);
  }
}

// 랜덤 좌표 생성 함수
function randomCoord (size) {
  const fieldRect = field.getBoundingClientRect();

  return [ ( fieldRect.width - size ) * Math.random(),
           ( fieldRect.height - size ) * Math.random() ];
}

// 타이머 시작 함수
function startTimer() {
  let remainingSec = GAME_DURATION_TIME;
  displayTime(remainingSec);
  timer = setInterval(() => {
    if (remainingSec <= 0) {
      clearInterval(timer);
      return;
    }
    displayTime(--remainingSec);
  }, 1000);
}

// 남은 시간 표기 함수
function displayTime (time) {
  let minutes = Math.floor(time / 60);
  let seconds = time % 60;
  gameTimer.innerHTML = `${minutes}:${seconds}`;
}

// 게임 중지 아이콘 표기 함수
function showStopIcon () {
  const icon = document.querySelector('.fa-play');
  icon.classList.add('fa-stop');
  icon.classList.remove('fa-play');
}

4. 게임 정지하기

게임 정지 버튼을 클릭하면

1) 타이머가 멈춰야 한다.
2) 게임 시작 버튼이 없어져야 한다.
3) REPLAY 문구와 함께 재시작 버튼이 떠야 한다.

📌 내가 처음 작성한 코드

startBtn.addEventListener('click', function startTimer () {
  if (document.querySelector('i[class$="stop"]') === null) { // 게임 시작 전, 게임 시작
  
    /* 코드 중략 */
 
  } else { // 게임 시작 후, 게임 정지
    bg_mp3.pause();

    const alert_wav = new Audio('sound/alert.wav');
    alert_wav.play();

    clearInterval(decreNum);

    startBtn.style.visibility = 'hidden';

    displayResult('REPLAY ❓');
  }
});

📌 '게임 정지하기' 최종 수정 코드

✔ HTML

div.result 위치를 field 안에서 밖으로 수정했다.

<html>
  <body>
    <div class="setting">
      <div class="setting-box">
        <button class="setting-startBtn" type="button"><i class="fas fa-play"></i></button>
        <div class="setting-timer">00:00</div>
        <div class="setting-limit">0</div>
      </div>
    </div>
    <div class="field"></div>
    <div class="result">
      <button class="replayBtn" type="button"><i class="fas fa-redo"></i></button>
      <p class="notice"></p>
    </div>
  </body>
</html>

✔ CSS

.field {
  height: calc(100vh - 450px);
  position: relative;
}

.result {
  width: 50%;
  margin: 0 auto;
  padding: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  font-size: 3em;
  color: white;
  z-index: 1;
  display: none;
}

✔ JavaScript

const field = document.querySelector('.field');
const gameResult = document.querySelector('.result');
const replayBtn = document.querySelector('.replayBtn');
const notice = document.querySelector('.notice');

// 게임 시작 버튼 클릭 시
startBtn.addEventListener('click', () => {
  if (started) {
    stopGame();
  } else {
    startGame();
  }
  started = !started;
});

// 게임 중지 함수 (started 값이 true인 상태에서 startBtn을 다시 클릭하면)
function stopGame () {
  // 게임 시작 버튼 숨김
  hideStartBtn();

  // 타이머 정지
  stopTimer();

  // REPLAY 문구, 재시작 버튼 표기
  showGameResult('Replay ❓');
}

// 타이머 정지 함수
function stopTimer () {
  clearInterval(timer);
}

// 게임 시작 버튼 숨김 함수
function hideStartBtn () {
  startBtn.style.visibility = 'hidden';
}

// 결과 문구, 재시작 버튼 표기 함수
function showGameResult (text) {
  gameResult.style.display = 'block';
  notice.innerHTML = text;
}

5. 재시작 버튼을 클릭하면

재시작 버튼을 클릭하면

1) 이전 게임의 당근과 벌레가 없어져야 한다.
2) replay ❓ 창이 없어져야 한다.
3) 다시 2.가 일어나야 한다. - (1), (3)만
4) 타이머가 '다시 처음부터' 작동해야 한다.
5) 게임 시작 버튼이 다시 보여야 한다.

📌 내가 처음 작성한 코드

// field 안을 클릭했을 때
field.addEventListener('click', function (event) {
  // 8. 클릭된 게 재시작 버튼이면
  if (event.target.className === 'fas fa-redo') {

    init();

    placeImgRandomly();

    clickLimit.innerHTML = 10;

    timer.innerHTML = `0:10`;
    time = 9;
    startWorkingTimer();

    bg_mp3.currentTime = 0;
    bg_mp3.play();

    startBtn.style.visibility = 'visible';
  }
});

💡 강의를 보기 전 수정한 코드

// 재시작 버튼 클릭
replayBtn.addEventListener('click', () => {
  started = true;
  // 이전 당근과 벌레 이미지 없애고, 새롭게 당근 벌레 이미지 랜덤 배치 & 클릭 제한 횟수 10으로 설정
  initGame();

  // 타이머 다시 처음부터 작동
  startTimer ();

  // 결과 문구, 재시작 버튼 숨김
  hideGameResult();
});

📌 강의를 참고해 수정한 코드

initGame 함수와 startTimer 함수 대신에 startGame 함수를 넣어줬다. 이렇게 하니까 startGame 함수 안에 있는 showStopBtn 함수에서 오류가 발생했다. 처음 startBtn을 눌러서 없애버린 fa-play라는 class를, 다시 replayBtn을 눌러서 찾으려고 하니 오류가 발생한 것이다. 오류 해결을 위해 showStopBtn 함수에서 fa-play 대신에 fas를 적어주었다.

// 재시작 버튼 클릭
replayBtn.addEventListener('click', () => {
  started = true;
  // 게임 시작
  startGame();

  // 결과 문구, 재시작 버튼 숨김
  hideGameResult();
});

6. 당근과 벌레를 클릭하면

📌 내가 처음 작성한 코드

// field 안을 클릭했을 때
field.addEventListener('click', function (event) {
  // 3. 클릭된 게 당근이면
  if (event.target.alt === 'carrot') {

    const carrot_mp3 = new Audio('sound/carrot_pull.mp3');
    carrot_mp3.play();

    clickLimit.innerHTML = clickLimit.innerHTML - 1;

    event.target.remove();

    // 5. 제한 시간 내에 모든 당근을 클릭하면
    if (time > 0) {
      if (document.querySelectorAll('img[alt="carrot"]').length === 0) {

        bg_mp3.pause();

        win_mp3.play();

        clearInterval(decreNum);

        startBtn.style.visibility = 'hidden';

        displayResult('YOU WON 🎉');
      }
    }
  }
});

// field 안을 클릭했을 때
field.addEventListener('click', function (event) {
  // 4. 클릭된 게 벌레라면
  if (event.target.alt === 'bug') {

    bg_mp3.pause();

    const bug_mp3 = new Audio('sound/bug_pull.mp3');
    bug_mp3.play();

    clearInterval(decreNum);

    startBtn.style.visibility = 'hidden';

    displayResult('YOU LOST 💩');
  }
});

💡 강의를 보기 전 수정한 코드

강의에서는 시작부터 score를 사용했는데 나는 처음 적었던 대로 계속 limit를 사용했더니 작동이 제대로 안 되는 부분이 나왔다.

// 필드 클릭
field.addEventListener('click', event => {
  if (!started) {
    return;
  } else {
    if (event.target.className === 'carrot') {
      clickCarrot(event);
    } else if (event.target.className === 'bug') {
      clickBug();
    }
  }
});

// 당근 클릭
function clickCarrot (event) {
  // 당근 제거
  event.target.remove();

  // 클릭 제한 횟수 1 감소
  let clickLimit = CARROT_COUNT;
  clickLimit = clickLimit - 1;
  gameLimit.innerHTML = clickLimit;
}

// 벌레 클릭
function clickBug () {
  started = false;

  // 게임 시작 버튼 숨김
  hideStartBtn();

  // 타이머 정지
  stopTimer();

  // YOU LOST 문구, 재시작 버튼 표기
  showGameResult('YOU LOST');
}

📌 강의를 참고해 수정한 코드

계속 limit를 사용해서 작성해 봄. 의도한 대로 실행되는 걸 확인했다.
게임의 승패에 따라 화면을 바꾸기 위해 finishGame 함수를 추가했다. 조건부 삼항 연산자를 이용했다. 타이머 함수에도 finishGame 함수를 추가했다.

// 숫자 관련 전역 변수들
const CARROT_COUNT = 10;
const GAME_DURATION_TIME = 10;

// 게임 상태를 기억하는 전역 변수들
let started = false;
let timer = undefined;
let limit = CARROT_COUNT;

// 타이머 시작 함수
function startTimer () {
  let remainingSec = GAME_DURATION_TIME;
  displayTime(remainingSec);
  timer = setInterval(() => {
    if (remainingSec <= 0) {
      clearInterval(timer);
      finishGame(limit === 0); // 게임 종료
      return;
    }
    displayTime(--remainingSec);
  }, 1000);
}

// field 클릭
field.addEventListener('click', onFieldClick);

function onFieldClick (event) {
  if (!started) { // start 값이 false이면 클릭이 먹지 않음
    return;
  }
  const target = event.target;
  if (target.matches('.carrot')) {
    // 당근 제거
    target.remove();

    // 클릭 제한 횟수 감소
    showGameLimit(--limit);

    // 게임 종료 (WON)
    if (limit === 0) {
      finishGame(true);
    }
  } else if (target.matches('.bug')) {
    // 게임 종료 (LOST)
    finishGame(false);
  }
}

// 클릭 제한 횟수 표기 함수
function showGameLimit (num) {
  gameLimit.innerHTML = num;
}

// 게임 종료 함수 (WON 또는 LOST)
function finishGame (win) {
  // 게임 시작 버튼 숨김
  hideStartBtn();

  // 타이머 정지
  stopTimer();

  // ~ 문구, 재시작 버튼 표기
  showGameResult(win? 'YOU WON 🎉' :'YOU LOST 💩');
}

7. 음악 재생

📌 내가 처음에 작성한 코드

play()와 currentTime = 0 그리고 pause() 를 하나하나 다 써줬다.

📌 강의를 참고해 수정 및 완성

이렇게 묶는 방법은 생각했는데 혹시나 음악 재생과 정지를 한꺼번에 묶는 방법이 있을까 해서 수정하지 않고 있었다. 그런데 없나 보다. 많이 짧은 내용까지 함수로 써야 하나 궁금했는데 쓴다는 걸 알았다.

// 음악 재생
function playSound (sound) {
  sound.currentTime = 0;
  sound.play();
}

// 음악 정지
function stopSound (sound) {
  sound.pause();
}

8. 강의를 참고해 수정한 최종 코드

🔎 HTML

<html>
  <body>
    <div class="setting">
      <div class="setting-box">
        <button class="setting-startBtn" type="button"><i class="fas fa-play"></i></button>
        <div class="setting-timer">00:00</div>
        <div class="setting-limit">0</div>
      </div>
    </div>
    <div class="field"></div>
    <div class="result">
      <button class="replayBtn" type="button"><i class="fas fa-redo"></i></button>
      <p class="notice"></p>
    </div>
  </body>
</html>

🔎 CSS

추가적으로 타이머와 클릭 제한 횟수 위에 커서 올렸을 때 텍스트가 선택되지 않도록 CSS 수정했다. user-select: none 을 사용함.
div.setting과 div.field의 height를 450px 고정 값에서 % 값으로 수정했다. html과 body에도 height: 100% 를 추가함.

.setting {
  height: 50%;
  position: relative;
}

.field {
  height: calc(100vh - 50%);
  position: relative;
}

transition 속성의 위치를 수정했다. 요소:hover 가 아니라 요소 자체에 걸어야 마우스가 올라갈 때와 내려갈 때 모두 애니메이션이 적용돼서 더 자연스럽다.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

button {
  border: 5px solid black;
  border-radius: 20px;
  background-color: wheat;
  width: 100px;
  height: 100px;
  cursor: pointer;
  display: block;
  margin: 0 auto;
  transition: all 200ms ease;
}

button:hover {
  transform: scale(1.1);
}

img {
  position: absolute;
  transition: all 200ms ease;
}

img:hover {
  transform: scale(1.2);
}

html {
  height: 100%;
}

body {
  height: 100%;
  background: url("img/background.png") no-repeat center / cover;
  font-family: "Gowun Batang", serif;
}

.setting {
  height: 50%;
  position: relative;
}

.setting-box {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
}

.setting-timer {
  border: 5px solid black;
  border-radius: 20px;
  background-color: white;
  width: 260px;
  height: 80px;
  margin: 15px auto;
  text-align: center;
  font-size: 2.5em;
  line-height: 1.3;
  user-select: none;
}

.fas {
  font-size: 40px;
}

.setting-limit {
  border: 4px solid black;
  border-radius: 50%;
  background-color: orange;
  color: white;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.5;
  font-size: 3em;
  font-weight: bold;
  user-select: none;
}

.field {
  height: calc(100vh - 50%);
  position: relative;
}

.result {
  width: 50%;
  margin: 0 auto;
  padding: 40px;
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -50%);
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  font-size: 3em;
  color: white;
  z-index: 1;
  display: none;
}

🔎 JavaScript

'use strict';

const startBtn = document.querySelector('.setting-startBtn');
const gameTimer = document.querySelector('.setting-timer');
const gameLimit = document.querySelector('.setting-limit');

const field = document.querySelector('.field');
const gameResult = document.querySelector('.result');
const replayBtn = document.querySelector('.replayBtn');
const notice = document.querySelector('.notice');

const CARROT_COUNT = 10;
const BUG_COUNT = 7;
const CARROT_SIZE = 120;
const BUG_SIZE = 80;
const GAME_DURATION_TIME = 10;

let started = false;
let timer = undefined;
let limit = CARROT_COUNT;

const bgSound = new Audio('sound/bg.mp3');
const alertSound = new Audio('sound/alert.wav');
const carrotSound = new Audio('sound/carrot_pull.mp3');
const bugSound = new Audio('sound/bug_pull.mp3');
const winSound = new Audio('sound/game_win.mp3');



startBtn.addEventListener('click', () => {
  if (started) {
    stopGame();
  } else {
    startGame();
  }
});

replayBtn.addEventListener('click', () => {
  started = true;
  startGame();
  hideGameResult();
  playSound(bgSound);
});

function stopGame () {
  started = false;
  hideStartBtn();
  stopTimer();
  showGameResult('Replay ❓');
  stopSound(bgSound);
  playSound(alertSound);
}

function startGame () {
  started = true;
  initGame();
  startTimer();
  showStopIcon();
  playSound(bgSound);
}



field.addEventListener('click', onFieldClick);

function onFieldClick (event) {
  if (!started) {
    return;
  }
  
  const target = event.target;
  
  if (target.matches('.carrot')) {
    target.remove();
    showGameLimit(--limit);
    playSound(carrotSound);
    
    if (limit === 0) {
      finishGame(true);
    }
  } else if (target.matches('.bug')) {
    finishGame(false);
  }
}

function showGameLimit (num) {
  gameLimit.innerHTML = num;
}

function finishGame (win) {
  hideStartBtn();
  stopTimer();
  
  showGameResult(win? 'YOU WON 🎉' :'YOU LOST 💩');
  if (win) {
    stopSound(bgSound);
    playSound(winSound);
  } else {
    stopSound(bgSound);
    playSound(bugSound);
  }
}



function initGame () {
  limit = CARROT_COUNT;
  field.innerHTML = '';

  makeImg('carrot', CARROT_COUNT, 'img/carrot.png', CARROT_SIZE);
  makeImg('bug', BUG_COUNT, 'img/bug.png', BUG_SIZE);

  gameLimit.innerHTML = CARROT_COUNT;
}

function makeImg (name, count, src, size) {
  for (let i = 0; i < count; i++) {
    const item = document.createElement('img');
    item.setAttribute('class', `${name}`);
    item.setAttribute('src', `${src}`);

    const coord = randomCoord(size);
    item.style.left = coord[0] + 'px';
    item.style.top = coord[1] + 'px';
    item.style.width = size + 'px';

    field.appendChild(item);
  }
}

function randomCoord (size) {
  const fieldRect = field.getBoundingClientRect();

  return [ ( fieldRect.width - size ) * Math.random(),
           ( fieldRect.height - size ) * Math.random() ];
}



function startTimer () {
  let remainingSec = GAME_DURATION_TIME;
  displayTime(remainingSec);
  timer = setInterval(() => {
    if (remainingSec <= 0) {
      clearInterval(timer);
      finishGame(limit === 0);
      return;
    }
    displayTime(--remainingSec);
  }, 1000);
}

function stopTimer () {
  clearInterval(timer);
}

function displayTime (time) {
  let minutes = Math.floor(time / 60);
  let seconds = time % 60;
  gameTimer.innerHTML = `${minutes}:${seconds}`;
}



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

function hideStartBtn () {
  startBtn.style.visibility = 'hidden';
}



function showGameResult (text) {
  gameResult.style.display = 'block';
  notice.innerHTML = text;
}

function hideGameResult () {
  gameResult.style.display = 'none';
}



function playSound (sound) {
  sound.currentTime = 0;
  sound.play();
}

function stopSound (sound) {
  sound.pause();
}

⭐ 배운 내용 개괄 정리

게임 진행 상태를 나타내는 전역 변수를 활용할 것.
숫자는 대문자와 언더바를 이용해 변수로 적어줄 것.
아래 세 줄은 모두 같은 코드이다.

field.addEventListener('click', onFieldClick);

field.addEventListener('click', (event) => onFieldClick(event));

field.addEventListener('click', function (event) {
  onFieldClick(event);
})

setInterval 메서드 이용해서 타이머 만든 후 시간 표기하기.
한 줄짜리 짧은 코드라도 내용에 맞게 함수로 만들어 쓰도록 한다. 구구절절 if 구문을 늘어놓지 말고 함수를 활용할 것.
if 구문 조건식에서 변수 자체의 ture/false 값 활용하기. 조건부 삼항 연산자 다시 한 번 정리.
함수를 선언할 때 그 함수가 실행되어선 안 되는 경우가 있다면, 처음에 if 구문과 return을 이용하여 그 밑의 코드를 읽지 않고 바로 그 함수를 탈출하도록 하는 게 좋다.
강의에서는 구현해야 할 내용을 쪼갠 후, 그 내용을 담고 있는 함수의 이름을 먼저 적어서 호출해주고, 그 밑에 그 함수를 선언했다.
그동안 함수는 예전의 for 구문처럼 왠지 모르게 기피하고 싶은 것 중 하나였는데 이번 실습을 통해 전보다는 조금 익숙해진 거 같다. 이번 실습의 가장 큰 수확 같다. 이제 리팩토링 파트가 남았다.

✨ 내일 할 것

강의 계속 듣기 (리팩토링)

dev

dev log

이전 포스트

[TIL] 211001

다음 포스트

[TIL] 211002

TIL

📝 오늘 한 것

📚 배운 것

당근만 클릭해야 하는 게임(?)

⭐ 강의 참고해 코드 수정

3. 게임 시작하기

📌 내가 처음 작성한 코드

💡 기본 수정

💡 당근, 벌레 랜덤 배치 함수

💡 타이머 시작 함수

💡 클릭 제한 횟수 10으로 설정

💡 게임 시작 버튼 → 중지 버튼

📌 '게임 시작하기' 최종 수정 코드

4. 게임 정지하기

📌 내가 처음 작성한 코드

📌 '게임 정지하기' 최종 수정 코드

5. 재시작 버튼을 클릭하면

📌 내가 처음 작성한 코드

💡 강의를 보기 전 수정한 코드

📌 강의를 참고해 수정한 코드

6. 당근과 벌레를 클릭하면

📌 내가 처음 작성한 코드

💡 강의를 보기 전 수정한 코드

📌 강의를 참고해 수정한 코드

7. 음악 재생

📌 내가 처음에 작성한 코드

📌 강의를 참고해 수정 및 완성

8. 강의를 참고해 수정한 최종 코드

⭐ 배운 내용 개괄 정리

✨ 내일 할 것

[TIL] 211001

[TIL] 211003

0개의 댓글