Advertisement
CreadPag

Juego de memoria.html

Sep 8th, 2015
189
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.49 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div#memory_board{
  6.         background:#CCC;
  7.         border:#999 1px solid;
  8.         width:800px;
  9.         height:540px;
  10.         padding:24px;
  11.         margin:0px auto;
  12. }
  13. div#memory_board > div{
  14.         background: url(tile_bg.jpg) no-repeat;
  15.         border:#000 1px solid;
  16.         width:71px;
  17.         height:71px;
  18.         float:left;
  19.         margin:10px;
  20.         padding:20px;
  21.         font-size:64px;
  22.         cursor:pointer;
  23.         text-align:center;
  24. }
  25. </style>
  26. <script>
  27. var memory_array = ['A','A','B','B','C','C','D','D','E','E','F','F','G','G','H','H','I','I','J','J','K','K','L','L'];
  28. var memory_values = [];
  29. var memory_tile_ids = [];
  30. var tiles_flipped = 0;
  31. Array.prototype.memory_tile_shuffle = function(){
  32.     var i = this.length, j, temp;
  33.     while(--i > 0){
  34.         j = Math.floor(Math.random() * (i+1));
  35.         temp = this[j];
  36.         this[j] = this[i];
  37.         this[i] = temp;
  38.     }
  39. }
  40. function newBoard(){
  41.         tiles_flipped = 0;
  42.         var output = '';
  43.     memory_array.memory_tile_shuffle();
  44.         for(var i = 0; i < memory_array.length; i++){
  45.                output += '<div id="tile_'+i+'" onclick="memoryFlipTile(this,\''+memory_array[i]+'\')"></div>';
  46.         }
  47.         document.getElementById('memory_board').innerHTML = output;
  48. }
  49. function memoryFlipTile(tile,val){
  50.         if(tile.innerHTML == "" && memory_values.length < 2){
  51.                tile.style.background = '#FFF';
  52.                 tile.innerHTML = val;
  53.                 if(memory_values.length == 0){
  54.                         memory_values.push(val);
  55.                         memory_tile_ids.push(tile.id);
  56.                 } else if(memory_values.length == 1){
  57.                         memory_values.push(val);
  58.                         memory_tile_ids.push(tile.id);
  59.                         if(memory_values[0] == memory_values[1]){
  60.                                 tiles_flipped += 2;
  61.                                 // Clear both arrays
  62.                                 memory_values = [];
  63.                 memory_tile_ids = [];
  64.                                 // Check to see if the whole board is cleared
  65.                                 if(tiles_flipped == memory_array.length){
  66.                                         alert("Board cleared... generating new board");
  67.                                         document.getElementById('memory_board').innerHTML = "";
  68.                                         newBoard();
  69.                                 }
  70.                         } else {
  71.                                 function flip2Back(){
  72.                                     // Flip the 2 tiles back over
  73.                                     var tile_1 = document.getElementById(memory_tile_ids[0]);
  74.                                     var tile_2 = document.getElementById(memory_tile_ids[1]);
  75.                                     tile_1.style.background = 'url(tile_bg.jpg) no-repeat';
  76.                     tile_1.innerHTML = "";
  77.                                     tile_2.style.background = 'url(tile_bg.jpg) no-repeat';
  78.                     tile_2.innerHTML = "";
  79.                                     // Clear both arrays
  80.                                     memory_values = [];
  81.                     memory_tile_ids = [];
  82.                                 }
  83.                                 setTimeout(flip2Back, 700);
  84.                         }
  85.                 }
  86.         }
  87. }
  88. </script>
  89. </head>
  90. <body>
  91. <div id="memory_board"></div>
  92. <script>newBoard();</script>
  93. </body>
  94. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement