422,538 Members | 2,055 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 422,538 IT Pros & Developers. It's quick & easy.

Please help!!!

P: 1
Hi, I am very new in coding and I need to submit this assignment in 3 hours. It's a memory game and I did all the required JS coding but I can't figure out how to put a alert pop-up when the game ends with a congratulations message and a restart option (it doesn't need to say restart, when clicking OK it should create a new game, that's all). I am about to fail this class and any help greatly appreciated. I put all my js coding below.

Expand|Select|Wrap|Line Numbers
  1.  
  2.  
  3. const $controls = document.querySelector(".controls");
  4. const $controlBtns = $controls.children;
  5. const $game = document.querySelector(".game");
  6.  
  7. const status = {
  8.     level: undefined,
  9.     arrAllLetters: ["A", "B", "C", "D", "E", "F"],
  10.     arrSelectedLetters: [],
  11.     pair: [],
  12.     symbols: [],
  13.     guessed: []
  14. };
  15.  
  16.  
  17. function resetGame() {
  18.     status.level = undefined;
  19.     status.arrSelectedLetters = [];
  20.     status.guessed = [];
  21. }
  22.  
  23.  
  24. function shuffleArray(array) {
  25.     for (let x = array.length - 1; x > 0; x--) {
  26.         let holder = Math.floor(Math.random() * array.length);
  27.         var itemValue = array[x];
  28.         array[x] = array[holder];
  29.         array[holder] = itemValue;
  30.     }
  31.     return array;
  32. }
  33.  
  34. // 
  35. function flipCard(ev) {
  36.     let clickedCard = ev.currentTarget;
  37.     let letter = clickedCard.lastElementChild.firstElementChild.textContent;
  38.  
  39.     clickedCard.classList.add("flip");
  40.  
  41.     // check if pair doesn't contain the clicked element
  42.     if (!status.pair.includes(clickedCard)) {
  43.         status.pair.push(clickedCard);
  44.         status.symbols.push(letter);
  45.  
  46.         // check if you have 2 elements in the pair
  47.         if (status.pair.length === 2) {
  48.  
  49.             // compare letters
  50.             if (status.symbols[0] === status.symbols[1]) {
  51.  
  52.                 // match found
  53.                 status.guessed.push(status.symbols[0]);
  54.  
  55.                 status.pair[0].removeEventListener("click", flipCard);
  56.                 status.pair[1].removeEventListener("click", flipCard);
  57.  
  58.                 // if the number of guessed cards is equal to the number of 
  59.                 // arrSelectedLetters, there is nothing left to guess - game over
  60.                 if (status.guessed.length === status.arrSelectedLetters.length) {
  61.  
  62.                     let timer_3 = window.setTimeout(function () {
  63.  
  64.                         // reset the status object
  65.                         resetGame();
  66.  
  67.                         // remove all cards from your game div
  68.                         $game.innerHTML = "";
  69.  
  70.                         // reveal the control panel again
  71.                         $controls.classList.remove("hide-content");
  72.  
  73.                         window.clearTimeout(timer_3);
  74.                     }, 1000);
  75.                 }
  76.  
  77.             } else {
  78.  
  79.                 // unflip the cards - needs to be delayed
  80.                 let timer_1 = window.setTimeout(function () {
  81.                     status.pair[0].classList.remove("flip");
  82.                     status.pair[1].classList.remove("flip");
  83.                     window.clearTimeout(timer_1);
  84.                 }, 1000);
  85.             }
  86.  
  87.             // empty pair and symbols after comparison
  88.             // make it ready for the next comparison
  89.             let timer_2 = window.setTimeout(function () {
  90.                 status.pair = [];
  91.                 status.symbols = [];
  92.                 window.clearTimeout(timer_2);
  93.             }, 1000);
  94.         }
  95.     }
  96.  
  97.     console.log(status);
  98. }
  99.  
  100.  
  101. function createElements() {
  102.  
  103.     // append fragment to the DOM only once!
  104.     const fragment = document.createDocumentFragment();
  105.  
  106.     // display each card twice
  107.     for (let i = 0; i < 2; i++) {
  108.  
  109.         status.arrSelectedLetters = shuffleArray(status.arrSelectedLetters);
  110.  
  111.         // create your cards
  112.         for (let j = 0; j < status.level; j++) {
  113.  
  114.             // create your elements here
  115.             const cardHolder = document.createElement("div");
  116.             cardHolder.classList.add("card-holder");
  117.  
  118.             const card = document.createElement("div");
  119.             card.classList.add("card");
  120.  
  121.             const front = document.createElement("div");
  122.             front.classList.add("front", "side");
  123.  
  124.             const back = document.createElement("div");
  125.             back.classList.add("back", "side");
  126.  
  127.             const span = document.createElement("span");
  128.             span.textContent = status.arrSelectedLetters[j];
  129.  
  130.  
  131.             // card structure created here:
  132.             back.appendChild(span);
  133.             card.appendChild(front);
  134.             card.appendChild(back);
  135.             cardHolder.appendChild(card);
  136.             fragment.appendChild(cardHolder);
  137.  
  138.             card.addEventListener("click", flipCard);
  139.         }
  140.     }
  141.  
  142.     // append the entire set of cards to the DOM
  143.     $game.appendChild(fragment);
  144. }
  145.  
  146. // choose the level to play
  147. function chooseLevel(ev) {
  148.  
  149.     // save the number of cards
  150.     status.level = parseInt(ev.target.dataset.level);
  151.  
  152.     // hide your controls here
  153.     $controls.classList.add("hide-content");
  154.  
  155.     // prepare your array
  156.     for (let i = 0; i < status.level; i++) {
  157.         status.arrSelectedLetters.push(status.arrAllLetters[i])
  158.     }
  159.  
  160.     // create cards
  161.     createElements();
  162. }
  163. for (let b of $controlBtns) {
  164.     b.addEventListener("click", chooseLevel);
  165. }
  166.  
  167.  
3 Weeks Ago #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.