Color Game

예전에 velog에서 타일중 하나만 다른 색을 찾는 게임을 만든 사람을 보았다.
무척 인상 깊게 보아서 비슷하게나마 만들어 보았다.

대략 이런 모습으로

이렇게 작동한다. 단계는 총 5다섯 가지이며 갈수록 점점 어려워 진다.

타일들은 flex나 다른 방법보다는 얼마전 배운 grid를 사용하는 것이 좋을 거라 생각해 사용하였다.

.grids {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.grids div {
  width: 100%;
  height: 100%;
  padding: 50px;
  border: 2px solid #111;
}

게임을 시작 하기 위해서 start 버튼을 자바스크립트로 이벤트를 넣었다.
click에 반응하여 먼저 버튼이 사라지고 level이 나오도록 하였다.
그리고 다음으로 startGame함수를 실행하게 하였다.

btn.addEventListener("click", () => {
  btn.classList.add("started");
  Level.classList.add("started");
  startGame();
});

startGame함수에는 타일의 랜덤 rgb를 정하는 기능과 level의 기능들이 들어가 있다.
처음에는 querySelectorAll를 사용해 for문을 사용하였으나 작동은 되나 자꾸 오류가 나 구글을 뒤저서 forEach를 사용하면 사라진다고 하여 바꾸었다.

function startGame() {
  if (count < 10) {
    num = 100;
    currentLevel = 1;
  } else if (count < 20) {
    num = 50;
    currentLevel = 2;
  } else if (count < 30) {
    num = 25;
    currentLevel = 3;
  } else if (count < 40) {
    num = 10;
    currentLevel = 4;
  } else if (count < 50) {
    num = 5;
    currentLevel = "max";
  }
  Level.innerHTML = `<p class="level started">Level : ${currentLevel}</p>`;
  randomR = Math.floor(Math.random() * 255);
  randomG = Math.floor(Math.random() * 255);
  randomB = Math.floor(Math.random() * 255);
  randomRGB = `rgb(${randomR}, ${randomG}, ${randomB})`;
  randomtile = Math.floor(Math.random() * 8);
  randomtileRGB = Math.floor(Math.random() * 2);
  grid.forEach((grids) => {
    grids.style.background = randomRGB;
    if (randomtileRGB === 0) {
      if (randomR + num > 255) {
        grid[randomtile].style.background = `rgb(
          ${randomR - num},
          ${randomG},
          ${randomB})`;
      } else {
        grid[randomtile].style.background = `rgb(
          ${randomR + num},
          ${randomG},
          ${randomB})`;
      }
    } else if (randomtileRGB === 1) {
      if (randomG + num > 255) {
        grid[randomtile].style.background = `rgb(
          ${randomR},
          ${randomG - num},
          ${randomB})`;
      } else {
        grid[randomtile].style.background = `rgb(
          ${randomR},
          ${randomG + num},
          ${randomB})`;
      }
    } else if (randomtileRGB === 2) {
      if (randomB + num > 255) {
        grid[randomtile].style.background = `rgb(
          ${randomR},
          ${randomG},
          ${randomB - num})`;
      } else {
        grid[randomtile].style.background = `rgb(
          ${randomR},
          ${randomG},
          ${randomB + num})`;
      }
    }
  });
  //   for (let color in grid) {
  //     grid[color].style.background = randomRGB;
  //     if (randomtileRGB === 0) {
  //       grid[randomtile].style.background = `rgb(
  //         ${randomR + add},
  //         ${randomG},
  //         ${randomB})`;
  //     } else if (randomtileRGB === 1) {
  //       grid[randomtile].style.background = `rgb(
  //         ${randomR},
  //         ${randomG + add},
  //         ${randomB})`;
  //     } else if (randomtileRGB === 2) {
  //       grid[randomtile].style.background = `rgb(
  //         ${randomR},
  //         ${randomG},
  //         ${randomB + add})`;
  //     }
  //   }
}

그리고 위 함수의 level기능과 하나만 다른 색을 넣는 작업이 생각 보다 힘들었는데,

처음엔 하나만 다른 rgb에서 특정 숫자를 더하면 된다고 단순히 생각했다.
하지만 하다가 보니 1단계에서 다른 rgb와 10정도 만 차이나는 경우 가 생겼는데
이는 랜덤 rgb가 255에 가까운 수가 생겼을 경우 100을 더하든 50을 더하든 255를 넘지 못하여 비슷하게 되는 경우었다.

ex) 랜덤 rgb (123,245,34)이면 중간 값을 100을 더하면 정답 타일의 rgb는 (123,255,34)이다.

그래서 그런 경우는

if (randomtileRGB === 0) {
      if (randomR + num > 255) {
        grid[randomtile].style.background = `rgb(
          ${randomR - num},
          ${randomG},
          ${randomB})`;
      } else {
        grid[randomtile].style.background = `rgb(
          ${randomR + num},
          ${randomG},
          ${randomB})`;
      }
    } else if (randomtileRGB === 1) {
      if (randomG + num > 255) {
        grid[randomtile].style.background = `rgb(
          ${randomR},
          ${randomG - num},
          ${randomB})`;
      } else {
        grid[randomtile].style.background = `rgb(
          ${randomR},
          ${randomG + num},
          ${randomB})`;
      }
    } else if (randomtileRGB === 2) {
      if (randomB + num > 255) {
        grid[randomtile].style.background = `rgb(
          ${randomR},
          ${randomG},
          ${randomB - num})`;
      } else {
        grid[randomtile].style.background = `rgb(
          ${randomR},
          ${randomG},
          ${randomB + num})`;
      }
    }

더한 값이 255를 넘기면 빼는 걸로 if를 넣었다.

grids.addEventListener("click", clickHandler);

function clickHandler(e) {
  const tile = e.target.style.background;
  if (tile !== randomRGB) {
    startGame();
    count++;
  }
}

그리고 정답은 맞추는 기능은 간단하게 해당 타일의 rgb와 정답 타일 rgb 를 if문을 썻다.
level를 위해 count또한 올리고
다시 색이 변경되도록 startGame함수도 실행했다.

코딩하다가 변수때문에 사소한 문제가 있었는데 clickHandler의 randomRGB를 써야하는 데 처음은 startGame에 변수 선언을해 스코프가 되지 않아 곤란했지만

let randomR;
let randomG;
let randomB;
let randomRGB;
let randomtile;
let randomtileRGB;
let num;
let count = 0;
let currentLevel;

변수들은 먼저 선연에 전역변수로 써서 해결하였다.

오랜만에 무언갈 만들어 보아서 즐거웠다. 나도 한다면 하는 사람이라는 걸 확인 한것 같아 기쁜 작업이었다.

https://github.com/leaftha/color-game