473,324 Members | 2,002 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

Please help!!!

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.  
Apr 28 '18 #1
0 1775

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

Similar topics

2
by: m3ckon | last post by:
Hi there, had to rush some sql and am now going back to it due to a slow db performance. I have a db for sales leads and have created 3 views based on the data I need to produce. However one...
6
by: James Walker | last post by:
Can some one help I get an error of 'checkIndate' is null or not an object can someone please help. I can't work out why Thanks in advance James <form> <td height="24" colspan="7"...
0
by: Kurt Watson | last post by:
I’m having a different kind of problem with Hotmail when I sign in it says, "Web Browser Software Limitations Your Current Software Will Limit Your Ability to Use Hotmail You are using a web...
7
by: Alan Bashy | last post by:
Please, guys, In need help with this. It is due in the next week. Please, help me to implement the functions in this programm especially the first three constructor. I need them guys. Please, help...
1
by: Steve | last post by:
Hi, I've asked this question a couple of times before on this forum but no one seems to be nice enough to point me to the right direction or help me out with any information, if possible. Please...
22
by: KitKat | last post by:
I need to get this to go to each folders: Cam 1, Cam 2, Cam 4, Cam 6, Cam 7, and Cam 8. Well it does that but it also needs to change the file name to the same folder where the file is being...
17
by: Saps | last post by:
Hi all. Can anyone help me here. I have loads of .sql files and i need a way to call these from my asp page so the user can run them from the browser. Meaning i have a page with a list of all...
8
by: CM | last post by:
Hi, Could anyone please help me? I am completing my Master's Degree and need to reproduce a Webpage in Word. Aspects of the page are lost and some of the text goes. I would really appreciate it....
1
SKJoy2001
by: SKJoy2001 | last post by:
PLEASE HELP ME!!! P E R L!!! I have a CGI (PERL) file namely 'test.cgi' and it has the correct permission (755) on the FTP server and it is within the CGI path. I have the following code in it:...
6
by: jenipriya | last post by:
Hi all... its very urgent.. please........i m a beginner in oracle.... Anyone please help me wit dese codes i hv tried... and correct the errors... The table structures i hav Employee (EmpID,...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.