[TIL] 211001

Lee Syong·2021년 10월 1일

JavaScript TIL

TIL

목록 보기

44/204

📝 오늘 한 것

미니 게임 구현 중

📚 배운 것

당근만 클릭해야 하는 게임

어제 풀이에서 이어서

📌 직접 구현

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

재시작 버튼을 클릭하면

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

💡 동적으로 생성한 요소에 이벤트 바인딩 하는 방법

이벤트 위임 응용

💡 오디오 처음부터 다시 재생하는 방법

Audio.pause();

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

📌 8번째 요구 사항 - 코드 모음

// field 안을 클릭했을 때
field.addEventListener('click', function (event) {
  // 8. 클릭된 게 재시작 버튼이면
  if (event.target.className === 'fas fa-redo') {
    // 🔎 1) 이전 게임의 당근과 벌레가 없어져야 한다.
    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();
    }

    // 🔎 2) replay ❓ 창이 없어져야 한다.
    const result = document.querySelector('.result');
    result.remove();

    // 🔎 3) 다시 2.가 일어나야 한다. - (1), (3), (4)만
    // (1) field 안에 당근 10개와 벌레 7마리가 랜덤한 위치에 배치되어야 한다.
    const rect = field.getBoundingClientRect();

    for (let i = 0; i < 10; i++) {
      const carrot = document.createElement('img');
      carrot.setAttribute('src', 'img/carrot.png');
      carrot.setAttribute('alt', 'carrot');

      carrot.style.left = (rect.width - 120) * Math.random() + 'px';
      carrot.style.top = (rect.height - 120) * Math.random() + 'px';

      carrot.style.width = '120px';
      field.appendChild(carrot);
    }

    for (let i = 0; i < 7; i++) {
      const bug = document.createElement('img');
      bug.setAttribute('src', 'img/bug.png');
      bug.setAttribute('alt', 'bug');

      bug.style.left = (rect.width - 80) * Math.random() + 'px';
      bug.style.top = (rect.height - 80) * Math.random() + 'px';

      bug.style.width = '80px';
      field.appendChild(bug);
    }

    // (3) 클릭 가능 횟수가 10으로 바뀌어야 한다.
    clickLimit.innerHTML = 10;

    // (4) bg.mp3 배경음이 재생되어야 한다.
    bg_mp3.currentTime = 0;
    bg_mp3.play();

    // 🔎 4) 게임 시작 버튼이 다시 보여야 한다.
    startBtn.style.visibility = 'visible';

    // 🔎 5) 타이머가 '다시 처음부터' 작동해야 한다.
    timer.innerHTML = `0:10`;
    time = 9;
    startWorkingTimer();
  }
});

9. 테스트 및 점검

💡 setting에 위, 아래 margin 값을 추가하니까 의미 없는 scrollbar가 생긴다.
→ 문제를 해결하기 위해 margin 대신 top을 이용해 setting의 위치를 조절했다.

📌 중간 완성 코드

일단 모든 내용을 구현 완료했고, 모두 오류 없이 정상 작동은 된다

🔎 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>
  </body>
</html>

🔎 CSS

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

button:hover {
  transform: scale(1.1);
  transition: all 200ms ease;
}

img {
  position: absolute;
}

img:hover {
  transform: scale(1.2);
  transition: all 200ms ease;
}

/* 시작 */

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

.setting {
  height: 450px;
  position: relative;
}

.setting-box {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translate(-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;
}

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

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

🔎 JavaScript

field에 등록해준 클릭 이벤트 리스너를 정리해야 하는데 어차피 리팩토링 하면서 다시 대대적으로 풀어야 될 거 같아서 그냥 그대로 둠. 작동은 되는데 정말 작동만 되는 코드다. 리팩토링 필수..

'use strict';

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

// 오디오 파일을 변수에 할당
const bg_mp3 = new Audio('sound/bg.mp3');
const win_mp3 = new Audio('sound/game_win.mp3');

// 당근, 벌레 랜덤 배치
function placeImgRandomly () {
  const rect = field.getBoundingClientRect();

  for (let i = 0; i < 10; i++) {
    const carrot = document.createElement('img');
    carrot.setAttribute('src', 'img/carrot.png');
    carrot.setAttribute('alt', 'carrot');

    carrot.style.left = (rect.width - 120) * Math.random() + 'px';
    carrot.style.top = (rect.height - 120) * Math.random() + 'px';

    carrot.style.width = '120px';
    field.appendChild(carrot);
  }

  for (let i = 0; i < 7; i++) {
    const bug = document.createElement('img');
    bug.setAttribute('src', 'img/bug.png');
    bug.setAttribute('alt', 'bug');

    bug.style.left = (rect.width - 80) * Math.random() + 'px';
    bug.style.top = (rect.height - 80) * Math.random() + 'px';

    bug.style.width = '80px';
    field.appendChild(bug);
  }
}

// 당근, 벌레 제거 & 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();
}

// 타이머 관련
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);
}

// 문구 & 재시작 버튼 관련
function displayResult (text) {
  const gameResult = document.createElement('div');
  gameResult.classList.add('result');
  gameResult.innerHTML = `
    <button class="replayBtn" type="button"><i class="fas fa-redo"></i></button>
    <p>${text}</p>
  `;
  field.appendChild(gameResult);
}



// 2. 게임 시작 버튼을 클릭하면
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 {
    bg_mp3.pause();

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

    clearInterval(decreNum);

    startBtn.style.visibility = 'hidden';

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



// 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 💩');
  }
});



// 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';
  }
});

📌 강의 참고해서 코드 수정

강의를 참고해 내 코드를 리팩토링 한 후, 실행되지 않을 경우 오류 파악 및 원인 분석

1. HTML 마크업 & CSS 스타일링

HTML 마크업을 하면서 아예 replay 창을 만들어준 후 CSS에서 display: none 을 적용함. (그 후 버튼에 class를 'pop-up pop-up-hide'라고 지정해줌.)

2. 당근과 벌레 랜덤 배치

1) 내가 처음 작성한 코드

// 당근, 벌레 랜덤 배치
function placeImgRandomly () {
  const rect = field.getBoundingClientRect();

  for (let i = 0; i < 10; i++) {
    const carrot = document.createElement('img');
    carrot.setAttribute('src', 'img/carrot.png');
    carrot.setAttribute('alt', 'carrot');

    carrot.style.left = (rect.width - 120) * Math.random() + 'px';
    carrot.style.top = (rect.height - 120) * Math.random() + 'px';

    carrot.style.width = '120px';
    field.appendChild(carrot);
  }

  for (let i = 0; i < 7; i++) {
    const bug = document.createElement('img');
    bug.setAttribute('src', 'img/bug.png');
    bug.setAttribute('alt', 'bug');

    bug.style.left = (rect.width - 80) * Math.random() + 'px';
    bug.style.top = (rect.height - 80) * Math.random() + 'px';

    bug.style.width = '80px';
    field.appendChild(bug);
  }
}

2) 1차 수정

아래와 같이 했으나
coordArray is not defined 오류 발생

// 당근, 벌레 랜덤 배치
function placeImgRandomly () {
  makeImg('carrot', 10, 120);
  makeImg('bug', 7, 80);
}

// 당근, 벌레 이미지 생성
function makeImg (name, num, size) {
  for (let i = 0; i < num; i++) {
    randomCoord(size);

    const item = document.createElement('img');
    item.setAttribute('src', `img/${name}.png`);
    item.setAttribute('alt', `${name}`);

    item.style.left = coordArray[0] + 'px';
    item.style.top = coordArray[1] + 'px';

    item.style.width = `${size}px`;

    field.appendChild(item);
  }
}

// 랜덤한 좌표 생성
function randomCoord (size) {
  const rect = field.getBoundingClientRect();

  const x = (rect.width - size) * Math.random();
  const y = (rect.height - size) * Math.random();

  const coordArray = [x, y];
  return coordArray;
}

3) 오류 원인 분석 💡

makeImg 함수에서 coordArray[0]과 coordArray[1]의 값을 쓰기 위해서는, randomCoord 함수를 makeImg 함수에서 '변수에 할당'해줘야 한다.
즉, randomCoord(size); → const coord = randomCoord(size);
randomCoord 함수의 return 값을 받은 변수 coord를 바탕으로 makeImg 함수 내에서 randomCoord 함수의 coordArray 값을 쓸 수 있다.
coordArray[0] / coordArray[1] → coord[0] / coord[1]
randomCoord(size) 라고만 쓰면, makeImg 함수와 randomCoord 함수가 연결이 안 돼서 randomCoord 함수로부터 coordArray 값, 즉 return 값을 받아올 수 없다!

4) 2차 수정

정상 작동 확인
숫자는 그냥 쓰지 말고, 변수에 할당해서 변수를 쓰도록 한다

// 당근, 벌레 이미지 개수 & 크기
const CARROT_COUNT = 10;
const BUG_COUNT = 7;
const CARROT_SIZE = 120;
const BUG_SIZE = 80;

// 당근, 벌레 이미지 랜덤 배치
function placeImgRandomly () {
  makeImg('carrot', CARROT_COUNT, CARROT_SIZE);
  makeImg('bug', BUG_COUNT, BUG_SIZE);
}

// 당근, 벌레 이미지 생성
function makeImg (name, num, size) {
  for (let i = 0; i < num; i++) {
    const coord = randomCoord(size);

    const item = document.createElement('img');
    item.setAttribute('src', `img/${name}.png`);
    item.setAttribute('alt', `${name}`);

    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()];
}

✨ 내일 할 것

이번엔 리팩토링 함수화를 염두에 두고, 처음부터 다시 구현해볼 것 ❕

Lee Syong

능동적으로 살자, 행복하게😁

이전 포스트

[TIL] 210930

다음 포스트