SHARE
TWEET

【4K用JS】 gmindex3.js

basictomonokai Oct 3rd, 2016 56 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. $(document).ready(function(){
  2.  
  3.     function memory(){
  4.         //tile Constructor function
  5.         function TileItem () {
  6.             this.tile_type;
  7.             this.addToScene = function(id, img) {
  8.                 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>';
  9.                 $('.tiles').append(tileItem);
  10.             };
  11.         }
  12.  
  13.         //vars
  14.         var tiles = [];
  15.         var tile = new TileItem();
  16.         var num_tiles = 32;
  17.         var openings = 0;
  18.         var attempts = 0;
  19.         var can_pick = true;
  20.         var picked_tiles = [];
  21.         var pictures = [
  22.                                     '<img src="kei17.jpg"</img>',
  23.                                     '<img src="kei18.jpg"</img>',
  24.                                     '<img src="kei19.jpg"</img>',
  25.                                     '<img src="kei20.jpg"</img>',
  26.                                     '<img src="kei21.jpg"</img>',
  27.                                     '<img src="kei22.jpg"</img>',
  28.                                     '<img src="kei23.jpg"</img>',
  29.                                     '<img src="kei24.jpg"</img>',
  30.                                     '<img src="kei17.jpg"</img>',
  31.                                     '<img src="kei18.jpg"</img>',
  32.                                     '<img src="kei19.jpg"</img>',
  33.                                     '<img src="kei20.jpg"</img>',
  34.                                     '<img src="kei21.jpg"</img>',
  35.                                     '<img src="kei22.jpg"</img>',
  36.                                     '<img src="kei23.jpg"</img>',
  37.                                     '<img src="kei24.jpg"</img>',
  38.                                     '<img src="kei17.jpg"</img>',
  39.                                     '<img src="kei18.jpg"</img>',
  40.                                     '<img src="kei19.jpg"</img>',
  41.                                     '<img src="kei20.jpg"</img>',
  42.                                     '<img src="kei21.jpg"</img>',
  43.                                     '<img src="kei22.jpg"</img>',
  44.                                     '<img src="kei23.jpg"</img>',
  45.                                     '<img src="kei24.jpg"</img>',
  46.                                     '<img src="kei17.jpg"</img>',
  47.                                     '<img src="kei18.jpg"</img>',
  48.                                     '<img src="kei19.jpg"</img>',
  49.                                     '<img src="kei20.jpg"</img>',
  50.                                     '<img src="kei21.jpg"</img>',
  51.                                     '<img src="kei22.jpg"</img>',
  52.                                     '<img src="kei23.jpg"</img>',
  53.                                     '<img src="kei24.jpg"</img>',
  54.  
  55.  
  56.                                     ];
  57.         //retrieves an img from pictures array
  58.         function givePic(i) {
  59.             return pictures[i];
  60.         }
  61.        
  62.         //loop that creates tiles                                    
  63.         for(var i=0; i<num_tiles; i++) {
  64.             tiles.push(Math.floor(i/2));
  65.         }
  66.  
  67.         //loop that randomizes the tiles within array
  68.         var randomize, temp;
  69.         for(var k=num_tiles-1; k>0; k--) {
  70.             randomize = Math.floor(Math.random()*k);
  71.             temp = tiles[k];
  72.             tiles[k] = tiles[randomize];
  73.             tiles[randomize] = temp;
  74.         }
  75.  
  76.     //loop to place tiles with a random id
  77.         for(var p=0; p<num_tiles; p++) {
  78.             tile = new TileItem();
  79.             var id = Math.floor(Math.random()*300);
  80.             var img = givePic(p);
  81.             tile.tile_type = tiles[p];
  82.             tile.addToScene(id, img);
  83.         }
  84.  
  85.         //tile click
  86.         function clicked() {
  87.  
  88.             if(can_pick) {
  89.                 var picked = $(this);
  90.                 // console.log(picked[0].id.replace(" data-type=",""));
  91.                 picked.find('.tile').addClass('flipped');
  92.  
  93.                 //add tiles selected to picked_tiles array
  94.                 if(picked_tiles.indexOf(picked) === -1) {
  95.                     picked_tiles.push(picked);
  96.                 }
  97.  
  98.  
  99.                 //checks if 2 tiles have been clicked
  100.                 if(picked_tiles.length === 2) {
  101.                     console.log('2 have been picked');
  102.  
  103.                     //checks if 2 tiles match
  104.                     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)) {
  105.                         console.log(picked_tiles[0]);
  106.                         //if 2 selections didn't match
  107.                     } else {
  108.                         //keep track of attempts
  109.                         attempts++;
  110.                         setTimeout(function() {
  111.                             // console.log(picked_tiles[0][0].id);
  112.                             // console.log(picked_tiles[1][0].id);
  113.                             console.log('they didnt match');
  114.                             //reset our array that collects the selected tiles
  115.                             picked_tiles[0].children().removeClass('flipped');
  116.                             picked_tiles[1].children().removeClass('flipped');
  117.                             picked_tiles = [];
  118.                             can_pick = true;
  119.                         }, 1000);
  120.                     }
  121.                 }
  122.  
  123.  
  124.                 //checks if 3 tiles have been clicked
  125.                 if(picked_tiles.length === 3) {
  126.                     console.log('3 have been picked');
  127.  
  128.                     //checks if 3 tiles match
  129.                     if((picked_tiles[0].find('img').attr('src')===picked_tiles[1].find('img').attr('src')) &&
  130.                        (picked_tiles[1].find('img').attr('src')===picked_tiles[2].find('img').attr('src')) &&
  131.                        ((picked_tiles[0][0].id != picked_tiles[1][0].id) ||
  132.                        (picked_tiles[1][0].id != picked_tiles[2][0].id) ||
  133.                        (picked_tiles[0][0].id != picked_tiles[2][0].id))
  134.                      ) {
  135.                         console.log(picked_tiles[0]);
  136.                         //if 2 selections didn't match
  137.                     } else {
  138.                         attempts++;
  139.                         setTimeout(function() {
  140.                             // console.log(picked_tiles[0][0].id);
  141.                             // console.log(picked_tiles[1][0].id);
  142.                             console.log('they didnt match');
  143.                             //reset our array that collects the selected tiles
  144.                             picked_tiles[0].children().removeClass('flipped');
  145.                             picked_tiles[1].children().removeClass('flipped');
  146.                             picked_tiles[2].children().removeClass('flipped');
  147.                             picked_tiles = [];
  148.                             can_pick = true;
  149.                         }, 1000);
  150.                     }
  151.                 }
  152.  
  153.  
  154.                 //checks if 4 tiles have been clicked
  155.                 if(picked_tiles.length === 4) {
  156.                     console.log('4 have been picked');
  157.                     //don't allow more tiles to be picked yet
  158.                     can_pick = false;
  159.                     //keep track of attempts
  160.                     attempts++;
  161.  
  162.                     //checks if 4 tiles match
  163.                     if((picked_tiles[0].find('img').attr('src')===picked_tiles[1].find('img').attr('src')) &&
  164.                        (picked_tiles[1].find('img').attr('src')===picked_tiles[2].find('img').attr('src')) &&
  165.                        (picked_tiles[2].find('img').attr('src')===picked_tiles[3].find('img').attr('src')) &&
  166.                        ((picked_tiles[0][0].id != picked_tiles[1][0].id) ||
  167.                        (picked_tiles[0][0].id != picked_tiles[2][0].id) ||
  168.                        (picked_tiles[0][0].id != picked_tiles[3][0].id) ||
  169.                        (picked_tiles[1][0].id != picked_tiles[2][0].id) ||
  170.                        (picked_tiles[1][0].id != picked_tiles[3][0].id) ||
  171.                        (picked_tiles[2][0].id != picked_tiles[3][0].id))
  172.                      ) {
  173.                         console.log(picked_tiles[0]);
  174.                         setTimeout(function(){
  175.                             console.log('match');
  176.                             picked_tiles[0].addClass('disabled');
  177.                             picked_tiles[1].addClass('disabled');
  178.                             picked_tiles[2].addClass('disabled');
  179.                             picked_tiles[3].addClass('disabled');
  180.                             picked_tiles = [];
  181.                             can_pick = true;
  182.                             //keeps track of pairs 'opened', if all pairs open, resetGame() is called
  183.                             openings++;
  184.                             if(openings === (num_tiles/4)) {
  185.                                 resetGame();
  186.                             }
  187.                         }, 1000);
  188.                         //if 2 selections didn't match
  189.                     } else {
  190.                         setTimeout(function() {
  191.                             // console.log(picked_tiles[0][0].id);
  192.                             // console.log(picked_tiles[1][0].id);
  193.                             console.log('they didnt match');
  194.                             //reset our array that collects the selected tiles
  195.                             picked_tiles[0].children().removeClass('flipped');
  196.                             picked_tiles[1].children().removeClass('flipped');
  197.                             picked_tiles[2].children().removeClass('flipped');
  198.                             picked_tiles[3].children().removeClass('flipped');
  199.                             picked_tiles = [];
  200.                             can_pick = true;
  201.                         }, 1000);
  202.                     }
  203.                 }
  204.             }
  205.         }
  206.        
  207.         //shuffle DOM list
  208.         $('ul li').shuffle();
  209.         //add event listeners to tiles
  210.         var elements = $('li');
  211.         for(var q=0; q<elements.length; q++){
  212.             elements[q].addEventListener('click',clicked);
  213.         }
  214.  
  215.         function resetGame(){
  216.             // alert("Congratulations! You took "+attempts+" attempts to complete.");
  217.             doDataLink(attempts);
  218.             $('.tiles').children().remove();
  219.             memory();
  220.         }
  221.     }
  222.  
  223.     memory();
  224.  
  225. });
  226.              
  227.               //http://james.padolsey.com/javascript/shuffling-the-dom/
  228.               //shuffle plugin
  229.              
  230.               (function($){
  231.  
  232.     $.fn.shuffle = function() {
  233.  
  234.         var allElems = this.get(),
  235.             getRandom = function(max) {
  236.                 return Math.floor(Math.random() * max);
  237.             },
  238.             shuffled = $.map(allElems, function(){
  239.                 var random = getRandom(allElems.length),
  240.                     randEl = $(allElems[random]).clone(true)[0];
  241.                 allElems.splice(random, 1);
  242.                 return randEl;
  243.            });
  244.  
  245.         this.each(function(i){
  246.             $(this).replaceWith($(shuffled[i]));
  247.         });
  248.  
  249.         return $(shuffled);
  250.  
  251.     };
  252.  
  253. })(jQuery);
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top