Memory Game

by alirizaadiyahsi

HTML

<script src="https://cdn.rawgit.com/nnattawat/flip/v1.0.16/dist/jquery.flip.min.js"></script>
<div id="board"></div>

CSS

#board {
    background-color:#000;
    padding: 0 0 4px 4px;
    overflow: hidden;
}
.square {
    float:left;
    margin:4px 4px 0 0;
}
.square-inner {
}
.front {
    background-color:#999;
}
.back {
    background-color:red;
}

JavaScript

var SQUARES_ARRAY = [];
var MATCH_ARRAY = [];
var SQUARE_COUNT = 6;
var COLUMN_COUNT = 3;
var MATCH_COUNT = 2;
var SQUARE_PADDING = 4 * COLUMN_COUNT;

// dizin içinden rastgele seçtiği bir
// elemanı diziden çıkararak döner
Array.prototype.randSplice = function () {
    var ri = Math.floor(Math.random() * this.length);
    var rs = this.splice(ri, 1);
    return rs;
}

function initializeSquares() {
    // eşleşme sayısına göre kaç farklı eleman
    // olacağı hesaplanıyor. örn; 2 li eşleşme olacaksa
    // kare sayısının yarısı kadar dizi elemanı olur.
    for (i = 0; i < (SQUARE_COUNT / MATCH_COUNT); i++) {
        SQUARES_ARRAY.push({
            val: i,
            src: 'aa_' + i
        });
    }

    // var olan diziyi 2 katına çıkarıyoruz eğer
    // 3 lü eşleşme olacaksa 3 katına çıkarmak gerekiyor
    SQUARES_ARRAY = SQUARES_ARRAY.concat(SQUARES_ARRAY);
}

function initializeBoard() {
    initializeSquares();

    for (i = 0; i < SQUARE_COUNT; i++) {

        // rastgele seçilen dizi elemanı
        var randSquare = SQUARES_ARRAY.randSplice()[0];

        // board'ın kenarı
        var boardEdge = $('#board').width();

        // karenin kenanerı
        var squareEdge = (boardEdge - SQUARE_PADDING) / COLUMN_COUNT;

        $('<div/>', {
            id: 'square_' + i,
            class: 'square',
            width: squareEdge,
            height: squareEdge
        })
            .append($('<div/>', {
            id: 'front_' + i,
            class: 'square-inner front',
            width: squareEdge,
            height: squareEdge,
                'data-val': randSquare.val
        }))
            .append($('<div/>', {
            id: 'back_' + i,
            class: 'square-inner back',
            text: randSquare.src,
            width: squareEdge,
            height: squareEdge
        }))
            .appendTo('#board');
    }
}

$(function () {

    initializeBoard();

    $(".square").flip({
        trigger: 'manual'
    });

   ...