Toy project - 카드맞추기 게임

재밌었다!

모처럼 과제가 없고, 나도 방학이고!

스각코 사람들과 안그래도 토이 프로젝트로 이거 해보자고 했는데,

바로 그 다음 날에 이 프로젝트를 ㅋ님이 추천해주셔서 놀라웠다.

 

• 시작 버튼을 누르면 게임을 시작할 수 있다. 
• 하나의 타일을 누를 때마다 숨겨졌던 그림이 보인다. 
• 두 개의 타일의 그림이 같다면 다시 숨겨지지 않는다. 
• 두 개의 타일의 그림이 틀리다면 일정 시간 후 다시 숨겨진다. 
• 점수를 알 수 있다.
• 재시작 기능이 있다.

이 것 역시 스각코 사람들과 3일만에 만들었는데, 다른 사람들은 더 멋지게 만들었다...

 

• 느낀 점 & 개선된 점
  • Math.floor(Math.random)으로 무작위 숫자를 뽑아낼 수 있게되었다!
  • dataset.value를 사용해 무작위 숫자가 두 개씩 타일에 배정되고, 이에 따라 심어놓은 이미지가 출력된다.
  • 이제 어느정도 EventListener를 붙일 수 있게 되었다. ev.target을 사용하다니!
  • setTimeout은 카드퀴즈 만들 때까지만해도 어색했었는데, 이젠 좀 쓸 수 있게 되었다.
• 개선할 점
  • 무조건 자바스크립트에서 제어해야한다는 강박관념? 이 있어서 자바스크립트에서 이미지를 불러왔는데, 
    html에서 이미지를 심어놓았다면 좀 더 깔끔한 코드가 될 수 있었을 것...!
  • 나는 오브젝트보다 배열을 많이 좋아한다. 오브젝트도 많이 다뤄봐야 익숙해질텐데.
  • 이미 뒤집힌 타일을 한 번 더 누르면 에러가 난다. 뒤집힌 타일이 다시 가려지기 전까지 value를 줘서 opened인 
    상태에서는 못 누르게 막는 기능이 필요했었다.

 

const images = [
  "angular.svg",
  "aurelia.svg",
  "backbone.svg",
  "ember.svg",
  "js-badge.svg",
  "react.svg",
  "vue.svg",
  "oing.png"
];
const $startButton = document.querySelector(".start");
const $restartButton = document.querySelector(".restart");
const $board = document.querySelector(".board");
const $tiles = document.querySelectorAll("td");
const $title = document.querySelector(".title");
let $choices = document.getElementsByClassName("choice");
 
let score = 0;
let number = [];
let randomNumber = [];
let choosedTile = {
  first: 0,
  second: 0
};
const TILENUMBER = 16;
 
$startButton.addEventListener("click", function start(){
  $startButton.classList.add("hide");
  $restartButton.classList.remove("hide");
  $title.textContent = `Progress: 0%`;
  $board.classList.remove("hide");
  randomize();
});
 
$board.addEventListener("click", function imgCheck(ev){
  let $targetValue = ev.target.dataset.value;
  let $img = document.createElement(`img`);
  $img.src = `${images[$targetValue - 1]}`;
  ev.target.appendChild($img);
  ev.target.classList.remove("covered");
  if(choosedTile.first === 0){
      choosedTile.first = $targetValue;
      ev.target.classList.add("choice");
  }else{
      choosedTile.second = $targetValue;
      ev.target.classList.add("choice");
  }
  setTimeout(function(){
    analysis();
  },2000);
  $title.textContent = `Progress: ${score / TILENUMBER * 200}%`;
})
 
$restartButton.addEventListener("click", function reset(){
  score = 0;
  $title.textContent = `Progress: 0%`;
  for(let i = 0; i < TILENUMBER; i++){
    $tiles[i].textContent = "";
    $tiles[i].classList.remove("matched");
    $tiles[i].classList.add("covered");
  }
  randomize();
})
 
function analysis() {
  if (score === TILENUMBER / 2) {
    $title.textContent = "You Win!"
  } else {
    if(choosedTile.first !== 0 && choosedTile.second !== 0 ) {
      if(choosedTile.first === choosedTile.second) {
        $choices[0].classList.add("matched");
        $choices[1].classList.add("matched");
        $choices[0].classList.remove("choice");
        $choices[0].classList.remove("choice");
        score++;
      } else {
        for(let i = 0; i < 2; i++){
          $choices[i].classList.add("covered");
          $choices[i].textContent = "";
        }
          $choices[0].classList.remove("choice");
          $choices[0].classList.remove("choice");
      }
      choosedTile.first = 0;
      choosedTile.second = 0;
    }
  }
return score;
}
 
function randomize(){
  for(let i = 1; i <= TILENUMBER / 2; i++){
    number.push(i,i); //[1,1,2,2,...,8,8]
  }
  for(let i = 0; i < TILENUMBER; i++){
    let j = Math.floor(Math.random() * number.length);  //랜덤으로 배열 순서 생성
    randomNumber.splice(j, 0, number[j]); //랜덤 순서에 따른 숫자 새 배열에 집어넣기
    $tiles[i].dataset.value = number[j];
    number.splice(j,1);
  }
}