【4K用JS】 gmindex3.js

$(document).ready(function(){

    function memory(){
        //tile Constructor function
        function TileItem () {
            this.tile_type;
            this.addToScene = function(id, img) {
                var tileItem = '<li id="'+id+' data-type="'+this.tile_type+'"><div class="tile"><div class="tile-front"></div><div class="tile-back">'+img+'</div</div</li>';
                $('.tiles').append(tileItem);
            };
        }

        //vars
        var tiles = [];
        var tile = new TileItem();
        var num_tiles = 32;
        var openings = 0;
        var attempts = 0;
        var can_pick = true;
        var picked_tiles = [];
        var pictures = [
                                    '<img src="kei17.jpg"</img>',
                                    '<img src="kei18.jpg"</img>',
                                    '<img src="kei19.jpg"</img>',
                                    '<img src="kei20.jpg"</img>',
                                    '<img src="kei21.jpg"</img>',
                                    '<img src="kei22.jpg"</img>',
                                    '<img src="kei23.jpg"</img>',
                                    '<img src="kei24.jpg"</img>',
                                    '<img src="kei17.jpg"</img>',
                                    '<img src="kei18.jpg"</img>',
                                    '<img src="kei19.jpg"</img>',
                                    '<img src="kei20.jpg"</img>',
                                    '<img src="kei21.jpg"</img>',
                                    '<img src="kei22.jpg"</img>',
                                    '<img src="kei23.jpg"</img>',
                                    '<img src="kei24.jpg"</img>',
                                    '<img src="kei17.jpg"</img>',
                                    '<img src="kei18.jpg"</img>',
                                    '<img src="kei19.jpg"</img>',
                                    '<img src="kei20.jpg"</img>',
                                    '<img src="kei21.jpg"</img>',
                                    '<img src="kei22.jpg"</img>',
                                    '<img src="kei23.jpg"</img>',
                                    '<img src="kei24.jpg"</img>',
                                    '<img src="kei17.jpg"</img>',
                                    '<img src="kei18.jpg"</img>',
                                    '<img src="kei19.jpg"</img>',
                                    '<img src="kei20.jpg"</img>',
                                    '<img src="kei21.jpg"</img>',
                                    '<img src="kei22.jpg"</img>',
                                    '<img src="kei23.jpg"</img>',
                                    '<img src="kei24.jpg"</img>',


                                    ];
        //retrieves an img from pictures array
        function givePic(i) {
            return pictures[i];
        }

        //loop that creates tiles
        for(var i=0; i<num_tiles; i++) {
            tiles.push(Math.floor(i/2));
        }

        //loop that randomizes the tiles within array
        var randomize, temp;
        for(var k=num_tiles-1; k>0; k--) {
            randomize = Math.floor(Math.random()*k);
            temp = tiles[k];
            tiles[k] = tiles[randomize];
            tiles[randomize] = temp;
        }

    //loop to place tiles with a random id
        for(var p=0; p<num_tiles; p++) {
            tile = new TileItem();
            var id = Math.floor(Math.random()*300);
            var img = givePic(p);
            tile.tile_type = tiles[p];
            tile.addToScene(id, img);
        }

        //tile click
        function clicked() {

            if(can_pick) {
                var picked = $(this);
                // console.log(picked[0].id.replace(" data-type=",""));
                picked.find('.tile').addClass('flipped');

                //add tiles selected to picked_tiles array
                if(picked_tiles.indexOf(picked) === -1) {
                    picked_tiles.push(picked);
                }


                //checks if 2 tiles have been clicked
                if(picked_tiles.length === 2) {
                    console.log('2 have been picked');

                    //checks if 2 tiles match
                    if((picked_tiles[0].find('img').attr('src')===picked_tiles[1].find('img').attr('src')) && (picked_tiles[0][0].id != picked_tiles[1][0].id)) {
                        console.log(picked_tiles[0]);
                        //if 2 selections didn't match
                    } else {
                        //keep track of attempts
                        attempts++;
                        setTimeout(function() {
                            // console.log(picked_tiles[0][0].id);
                            // console.log(picked_tiles[1][0].id);
                            console.log('they didnt match');
                            //reset our array that collects the selected tiles
                            picked_tiles[0].children().removeClass('flipped');
                            picked_tiles[1].children().removeClass('flipped');
                            picked_tiles = [];
                            can_pick = true;
                        }, 1000);
                    }
                }


                //checks if 3 tiles have been clicked
                if(picked_tiles.length === 3) {
                    console.log('3 have been picked');

                    //checks if 3 tiles match
                    if((picked_tiles[0].find('img').attr('src')===picked_tiles[1].find('img').attr('src')) &&
                       (picked_tiles[1].find('img').attr('src')===picked_tiles[2].find('img').attr('src')) &&
                       ((picked_tiles[0][0].id != picked_tiles[1][0].id) ||
                       (picked_tiles[1][0].id != picked_tiles[2][0].id) ||
                       (picked_tiles[0][0].id != picked_tiles[2][0].id))
                     ) {
                        console.log(picked_tiles[0]);
                        //if 2 selections didn't match
                    } else {
                        attempts++;
                        setTimeout(function() {
                            // console.log(picked_tiles[0][0].id);
                            // console.log(picked_tiles[1][0].id);
                            console.log('they didnt match');
                            //reset our array that collects the selected tiles
                            picked_tiles[0].children().removeClass('flipped');
                            picked_tiles[1].children().removeClass('flipped');
                            picked_tiles[2].children().removeClass('flipped');
                            picked_tiles = [];
                            can_pick = true;
                        }, 1000);
                    }
                }


                //checks if 4 tiles have been clicked
                if(picked_tiles.length === 4) {
                    console.log('4 have been picked');
                    //don't allow more tiles to be picked yet
                    can_pick = false;
                    //keep track of attempts
                    attempts++;

                    //checks if 4 tiles match
                    if((picked_tiles[0].find('img').attr('src')===picked_tiles[1].find('img').attr('src')) &&
                       (picked_tiles[1].find('img').attr('src')===picked_tiles[2].find('img').attr('src')) &&
                       (picked_tiles[2].find('img').attr('src')===picked_tiles[3].find('img').attr('src')) &&
                       ((picked_tiles[0][0].id != picked_tiles[1][0].id) ||
                       (picked_tiles[0][0].id != picked_tiles[2][0].id) ||
                       (picked_tiles[0][0].id != picked_tiles[3][0].id) ||
                       (picked_tiles[1][0].id != picked_tiles[2][0].id) ||
                       (picked_tiles[1][0].id != picked_tiles[3][0].id) ||
                       (picked_tiles[2][0].id != picked_tiles[3][0].id))
                     ) {
                        console.log(picked_tiles[0]);
                        setTimeout(function(){
                            console.log('match');
                            picked_tiles[0].addClass('disabled');
                            picked_tiles[1].addClass('disabled');
                            picked_tiles[2].addClass('disabled');
                            picked_tiles[3].addClass('disabled');
                            picked_tiles = [];
                            can_pick = true;
                            //keeps track of pairs 'opened', if all pairs open, resetGame() is called
                            openings++;
                            if(openings === (num_tiles/4)) {
                                resetGame();
                            }
                        }, 1000);
                        //if 2 selections didn't match
                    } else {
                        setTimeout(function() {
                            // console.log(picked_tiles[0][0].id);
                            // console.log(picked_tiles[1][0].id);
                            console.log('they didnt match');
                            //reset our array that collects the selected tiles
                            picked_tiles[0].children().removeClass('flipped');
                            picked_tiles[1].children().removeClass('flipped');
                            picked_tiles[2].children().removeClass('flipped');
                            picked_tiles[3].children().removeClass('flipped');
                            picked_tiles = [];
                            can_pick = true;
                        }, 1000);
                    }
                }
            }
        }

        //shuffle DOM list
        $('ul li').shuffle();
        //add event listeners to tiles
        var elements = $('li');
        for(var q=0; q<elements.length; q++){
            elements[q].addEventListener('click',clicked);
        }

        function resetGame(){
            // alert("Congratulations! You took "+attempts+" attempts to complete.");
            doDataLink(attempts);
            $('.tiles').children().remove();
            memory();
        }
    }

    memory();

});

              //http://james.padolsey.com/javascript/shuffling-the-dom/
              //shuffle plugin

              (function($){

    $.fn.shuffle = function() {

        var allElems = this.get(),
            getRandom = function(max) {
                return Math.floor(Math.random() * max);
            },
            shuffled = $.map(allElems, function(){
                var random = getRandom(allElems.length),
                    randEl = $(allElems[random]).clone(true)[0];
                allElems.splice(random, 1);
                return randEl;
           });

        this.each(function(i){
            $(this).replaceWith($(shuffled[i]));
        });

        return $(shuffled);

    };

})(jQuery);