The text below is selected, press Ctrl+C to copy to your clipboard. (⌘+C on Mac) No line numbers will be copied.
Guest
Editted JS File
By Guest on 13th March 2019 07:24:40 PM | Syntax: JAVASCRIPT | Views: 5



New paste | Download | Show/Hide line no. | Copy text to clipboard
  1. /*
  2.  * Create a list that holds all of your cards
  3.  */
  4.  
  5. var deck = ["fa fa-diamond","fa fa-anchor","fa fa-bolt","fa fa-cube",
  6.             "fa fa-leaf","fa fa-bicycle","fa fa-bomb","fa fa-paper-plane-o",
  7.             "fa fa-diamond","fa fa-anchor","fa fa-bolt","fa fa-cube",
  8.             "fa fa-leaf","fa fa-bicycle","fa fa-bomb","fa fa-paper-plane-o"]; // List of cards
  9. var openCards = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]; // 0 Close , 1 Open, 2 Locked
  10.  
  11. var starElement = document.querySelector(".stars");
  12. const h=starElement.innerHTML;
  13. var s = 0;
  14. var c=1;
  15.  
  16. /*
  17.  * Display the cards on the page
  18.  *   - shuffle the list of cards using the provided "shuffle" method below
  19.  *   - loop through each card and create its HTML
  20.  *   - add each card's HTML to the page
  21.  */
  22.  
  23. function arrangeCards (deckA) { // To update the sorted cards in the HTML
  24.       var element = document.getElementsByClassName('deck');
  25.       var cards = element[0].getElementsByClassName('card');
  26.       var newCard ;
  27.  
  28.       for (var i = 0; i < deckA.length; i++) {
  29.         newCard  = cards[i].getElementsByTagName('i');
  30.         cards[i].className = "card"
  31.         newCard.item(0).className = deckA[i] // To add each card's HTML to the page
  32.       }
  33.       //To set moves to zero every time we start the game
  34.       var moves=document.querySelector('.moves');
  35.       moves.textContent =0;
  36.          
  37.          
  38. }
  39.  
  40. //To Restart the Game
  41. const startOver = document.querySelector(".restart i");
  42. startOver.addEventListener("click",restart);
  43.  
  44. function restart(){
  45.         console.log("reset")
  46.     deck = shuffle(deck);
  47.     openCards = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
  48.     arrangeCards(deck);
  49.        
  50.         //Reset Moves
  51.         c=1;
  52.        
  53.         //Reset Stars
  54.         document.querySelector(".stars").innerHTML = '';
  55.         document.querySelector(".stars").innerHTML = h
  56.  
  57. //Restar Time
  58. clearTimeout(timerReset)
  59. timePassed = 0;
  60. timerReset = setTimeout(startTimer, 1000);
  61.  
  62. }
  63.  
  64. // Shuffle function from http://stackoverflow.com/a/2450976
  65. function shuffle(array) {
  66.     var currentIndex = array.length, temporaryValue, randomIndex;
  67.  
  68.     while (currentIndex !== 0) {
  69.         randomIndex = Math.floor(Math.random() * currentIndex);
  70.         currentIndex -= 1;
  71.         temporaryValue = array[currentIndex];
  72.         array[currentIndex] = array[randomIndex];
  73.         array[randomIndex] = temporaryValue;
  74.     }
  75.     return array;
  76. }
  77.  
  78.  
  79. function checkForOpenCards (){
  80.   var arr=[];
  81.   var fulldeck=0;
  82.   var y=0;
  83.  
  84.     for (var i = 0; i <16 ; i++){
  85.       if (openCards[i]==1) {
  86.           arr[y]= i;
  87.           y = y+1;
  88.       }
  89.  
  90.       if (openCards[i]==2) {
  91.         fulldeck =fulldeck+1;
  92.       }
  93.     }
  94.  
  95.     if (y>=2) {
  96.  
  97.     if (deck[arr[0]] === deck[arr[1]]) {
  98.       theCards= document.querySelectorAll(".card");
  99.       indice1 = arr[0];
  100.       indice2 = arr[1];
  101.       theCards[indice1].classList.add("match");
  102.       openCards[indice1]=2;
  103.       theCards[indice2].classList.add("match");
  104.       openCards[indice2]=2;
  105.       if (fulldeck == 14){
  106.         fulldeck=fulldeck+2;
  107.       }
  108. //End of the Game
  109.       if (fulldeck==16) {
  110.         window.alert("Good Job!!!")
  111.       }
  112.     } else {
  113.       theCards= document.querySelectorAll(".card");
  114.       var timer= setTimeout(function(){ //To add a delay to the unmatching cards
  115.         indice1 = arr[0];
  116.         indice2 = arr[1];
  117.         openCards[indice1]=0;
  118.         openCards[indice2]=0;
  119.         theCards[indice1].classList.remove("open","show");
  120.         theCards[indice2].classList.remove("open","show");
  121.         c = c+1; //to count how many times are selected the cards
  122.       }, 800);
  123.  
  124. // To get HTML collection from stars
  125.      var starElement = document.getElementsByClassName("score-panel");
  126.      var starFig = starElement[0].getElementsByClassName("stars");
  127.      var score = starFig[0].getElementsByTagName("i");
  128.  
  129.     if (c==0||c==4||c==8) { // To remove the Stars
  130.       score[1].remove();
  131.     }
  132.     }
  133.     }
  134. //To count the Moves
  135.     var moves=document.querySelector(".moves");
  136.         moves.textContent= c;
  137. }
  138.  
  139.  
  140. // To do the clicking and fliping
  141. var theCards= document.querySelectorAll(".card"); //To select all de elements in cards
  142.     theCards.forEach(function(card,index) { //index to store card's temporary value
  143.   var cardTurned = card.addEventListener("click",function(e) {
  144.          
  145.       if (openCards[index]==0) {
  146.                  
  147.         card.classList.add("open","show"); // To add "open" (is the color blue) and "show" (is the logo) to HTML element card
  148.         openCards[index]=1; // To add the clicked cards to openCards
  149.                 console.log(openCards);
  150.         checkForOpenCards();
  151.       }
  152.     });
  153. });
  154.  
  155.  
  156. //Timer
  157.  
  158. timePassed = 0;
  159. const timer = document.querySelector(".timer");
  160. function startTimer(){
  161.     timePassed += 1;
  162.     timer.innerHTML = timePassed;
  163.     timerReset = setTimeout(startTimer, 1000);
  164. }
  165. startTimer();
  166. deck = shuffle(deck); // To shuffle cards.
  167. arrangeCards(deck);
  168.  
  169. //TODO Timer : When the player starts a game, a displayed timer should also start.
  170. //Once the player wins the game, the timer stops.
  171. //var timer= setTimeout(function(){ }, 1000);//Timing event
  172.  
  173. /*
  174.  * set up the event listener for a card. If a card is clicked:
  175.  *  - display the card's symbol (put this functionality in another function that you call from this one)
  176.  *  - add the card to a *list* of "open" cards (put this functionality in another function that you call from this one)
  177.  *  - if the list already has another card, check to see if the two cards match
  178.  *    + if the cards do match, lock the cards in the open position (put this functionality in another function that you call from this one)
  179.  *    + if the cards do not match, remove the cards from the list and hide the card's symbol (put this functionality in another function that you call from this one)
  180.  *    + increment the move counter and display it on the page (put this functionality in another function that you call from this one)
  181.  *    + if all cards have matched, display a message with the final score (put this functionality in another function that you call from this one)
  182.  */



  • Recent Pastes