ToyProject #01 가위바위보 게임 - 2

며칠전에 기초 작업을 해둔 가위바위보 게임을 주말을 맞아서 완성을 하였습니다.

가위바위보 게임

가위바위보 게임 바로가기
가위바위보 게임 코드 보러가기

저번에 생각했던 것처럼 디자인을 전체적으로 수정을 하였고, 호버 이벤트를 이용하여 사용자와 상호작용 할 수 있도록 하였습니다.
누구나 다 아는 가위바위보 게임이지만, 그래도 사용자에게 한번 더 알려주기 위해 게임설명서를 모달창으로 만들어서 추가하였습니다.

그리고 기능적인 면을 신경을 써서 추가하였고 이부분은 코드로 설명드리겠습니다.

주요 코드

사용성 문제

const gameStart = (e) => {
  const target = e.target;

  resetImg();

  setTimeout( () => {
    switch(target.textContent) {
      case "가위" :
        myImg.style.backgroundImage = imglist[0].url
        myImgText.textContent = imglist[0].name
        selectIndex = 0;
        break;
      case "바위" :  
        myImg.style.backgroundImage = imglist[1].url
        myImgText.textContent = imglist[1].name
        selectIndex = 1;
        break;
      case "보" :  
        myImg.style.backgroundImage = imglist[2].url
        myImgText.textContent = imglist[2].name
        selectIndex = 2;
        break;
    }
  }, 100);

  setTimeout(randomImg, 300);
}

게임이 시작되고 버튼을 누르면 내가 선택한 이미지가 바뀌도록 하였는데 초기 같은 동작을 선택했을때 이미지가 변하지 않아 클릭이 된건지에 대한 사용성이 부족하다고 느껴서 이부분을 resetImg() 함수를 만들어서 전체 이미지를 한번 지우고, 내 이미지도 setTimeout() 함수에 넣어 딜레이가 걸렸다가 작동이 되게끔 하여 이 부분을 해결하였습니다.

Re Game

function gameOver() {
  if(myPoint.textContent == "10") {
    result = confirm("WIN! 대단해요👍 가위바위보의 달인이시군요😎");
    reGame()
  } else if (yourPoint.textContent == "10") {
    result = confirm("LOSE! 아쉬워요😭 다시한번 도전해봐요!👍");
    reGame()
  }
}

function reGame() {
  if(result) {
    myImg.style.backgroundImage = "none";
    myImgText.textContent = "";

    yourImg.style.backgroundImage = "none"
    yourImgText.textContent = "";

    myPoint.textContent = 0;
    yourPoint.textContent = 0;
  } else {
    scissors.removeEventListener("click", gameStart);
    rock.removeEventListener("click", gameStart);
    paper.removeEventListener("click", gameStart);
  }
}

게임이 무한대로 진행이 되었던 것을 10승을 먼저 하는 방식으로 수정을 하였고 여기서 변수 result에 Boolean 값을 저장해 비교하여true이면 게임이 리셋되어 다시 진행 할 수 있도록 하였고 false이면 게임이 멈추도록 하였습니다.

쿠키

이번 토이프로젝트를 하면서 가장 부족한면이지 않나 싶은게 바로 이 쿠키 부분입니다.

// 쿠키설정
function setCookie(name, value, expires) {
  let now = new Date(Date.now() + (expires*24*60*60*1000));
  // now = now.getDate() + expires;
  document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + "; path=/; expires=" + now.toUTCString();
}

// 쿠키 가져오기
function getCookie(name) {
  let matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
    ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}

모달창을 매번 시작할때마다 보여주는 부분은 기존 한번이라도 설명서를 본 사용자에게는 불편함으로 다가올 것 이라고 생각하였고,
이부분을 해결할 수 있는 방법으로 Local Storage와 cookie 이 두 방법을 생각하였고, 여기에 더욱 적합한 것은 유효기간이 지나면 지워지는 cookie를 사용하는게 좋다라고 판단하여 선택하게 되었습니다.

우선 쿠키를 저장하는 함수를 만들어 쿠키에 이름과 값 그리고 유효기간을 매개변수로 받아서 작동되게 하였고, 공부차원에서 쿠키에 바로 저장을 할 수 있지만 특수 값이 들어갔을때 인코딩처리를 해야하기 때문에 encodeURIComponent() 함수로 작성하였습니다.

쿠키가져오기도 함수로 작업을 하였는데, 이부분은 아직 정규표현식에 대한 이해도가 부족하여... 이부분은 조금 더 공부가 필요한 상황이고 모던자바스크립트에서 이부분은 가지고 와서 작업을 하였습니다.

느낀점

처음으로 사이트가 아닌 웹이지만 작동하는 미니게임을 만들어보니 상당히 재미가 있었고, 포트폴리오에 집중이 덜 될때 다시 집중력을 올려줄 아주 좋은 프로젝트였다고 생각합니다.
앞에서도 코드에대해 설명하면서 많은 느낀점을 적었지만, 따로 정리를 하자면

• 우선 쿠키에대한 공부가 더 필요하다
• 함수에는 하나의 작동만 넣고 콜백함수로 작업을 하니까 조금더 정리가 된거같은 느낌을 받았다.
• 정답은 아니지만 그래도 사용자가 느끼기에 어느부분이 불편하고 어색한 부분일지 항상 생각하며 작업을 해야겠다.

라고 생각하게 되는 프로젝트였습니다.

---

참고

• https://ko.javascript.info/cookie
• https://thereclub.tistory.com/59