[2015.12.29] javascript pairs games - 짝맞추기 게임

오늘은 sass, javascript 를 활용한 간단한 짝맞추기 게임을 한 번 살펴보겠습니다.

간단하게 핵심 모듈만 개발되어 있네요 ㅎ

우선 scss 문법 중 반복문 처리 부분을 간단히 봅시다.

이렇게 사용할 수 있구요...

/* Icons */
$cards: sass, gulp, grunt, git, css3;

@each $card in $cards  {

  .correct[data-item="#{$card}"],
  .flipped[data-item="#{$card}"]{
    background:url("http://www.cathydutton.co.uk/wp-content/themes/cd/images/#{$card}.jpg") left center no-repeat $white;
    background-size: contain;
  }

}

compile 된 CSS 는 이렇게 나오게 됩니다.

/* Icons */
.correct[data-item="sass"],
.flipped[data-item="sass"] {
  background: url("http://www.cathydutton.co.uk/wp-content/themes/cd/images/sass.jpg") left center no-repeat #fff;
  background-size: contain;
}

.correct[data-item="gulp"],
.flipped[data-item="gulp"] {
  background: url("http://www.cathydutton.co.uk/wp-content/themes/cd/images/gulp.jpg") left center no-repeat #fff;
  background-size: contain;
}

.correct[data-item="grunt"],
.flipped[data-item="grunt"] {
  background: url("http://www.cathydutton.co.uk/wp-content/themes/cd/images/grunt.jpg") left center no-repeat #fff;
  background-size: contain;
}

.correct[data-item="git"],
.flipped[data-item="git"] {
  background: url("http://www.cathydutton.co.uk/wp-content/themes/cd/images/git.jpg") left center no-repeat #fff;
  background-size: contain;
}

.correct[data-item="css3"],
.flipped[data-item="css3"] {
  background: url("http://www.cathydutton.co.uk/wp-content/themes/cd/images/css3.jpg") left center no-repeat #fff;
  background-size: contain;
}

자, 그럼 게임 로직에 대하여 간단히 살펴보겠습니다.

var images = ['sass','git','gulp','css3','grunt'];

var clone = images.slice(0); // duplicate array
var cards = images.concat(clone); // merge to arrays

slice 함수를 사용해서 배열을 복제했군요 ( 0 만 인자로 전달하는 경우에는 0번째 인덱스부터 끝가지 선택입니다. )

  - 사용법 : array.slice(start [, end]) 

concat 함수를 사용해서 기존 cards 배열에 복사한 cards 배열을 추가로 연결하여 2쌍을 만들었구요..

  - 사용법 : array1.concat(array2 [,array3,array4, ... , arrayX])

다음과 같은 함수를 사용하여 카드를 섞어 줍니다.

// Shufffel function
function shuffle(o){
  for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i],   o[i] = o[j], o[j] = x);
  return o;
}
shuffle(cards);

변수 3개를 선언하여 각각 cards 배열 길이만큼 초기값을 할당하구요...

조건절에는 i 값만 써주었네요 계속 루프돌면서 i가 0이 될때까지 반복하겠지요

루프를 돌며 랜덤으로 카드를 대체시킨다.

  j : i값 이하의 정수 랜덤 대입 (Math.floor : 무조건 올림, Math.random : 0 이상 1 미만의 실수 반환 )

  x : cards 배열에서 (i - 1) 번째 card를 선택

  cards 배열의 1 감소된 i 번째 카드는 j 번째 카드로 대체한다.

  cards 배열의 j 번째 카드는 (i - 1) 번째 카드였던 x 로 대체한다.

card 는 DIV 로 엘리먼트를 생성하면서 data 속성, class을 통해서 css 적용 및 상태변경을 하네요.

for (var i = 0; i < cards.length; i++) {
  card = document.createElement('div');
  card.dataset.item = cards[i];
  card.dataset.view = "card";
  myCards.appendChild(card);

  card.onclick = function () {

    if (this.className != 'flipped' && this.className != 'correct'){
        this.className = 'flipped';
        var result = this.dataset.item;
        resultsArray.push(result);
        clearInterval(Interval);
        Interval = setInterval(startTimer, 10);
    }

    if (resultsArray.length > 1) {

      if (resultsArray[0] === resultsArray[1]) {
        check("correct");
        counter ++;
        win();
        resultsArray = [];
      } else {
        check("reverse");
        resultsArray = [];
      }

    }

  }

};

​

이상 간단한 코드 리뷰였구요..

아래에서 직접 해보시기바랍니다~ㅎ

간단한 사용 예제 및 Demo

See the Pen JavaScript Pairs Game by Cathy Dutton (@cathydutton) on CodePen.