473,626 Members | 3,201 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Please help!!!

1 New Member
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 1781

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

Similar topics

2
1924
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 o the views, which has subqueries to the other views is VERY slow and it needs to be speeded up, but am unsure how, can anyone help... below is the sql?
6
1781
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" valign="top"><form name="booknow"><select
0
1693
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 browser that Hotmail does not support. If you continue to use your current browser software we cannot guarantee that Hotmail will work correctly for you". Please help, this is very annoying. I have been searching for help on
7
2381
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 me. This was inspired by Exercise 7 and Programming Problem 8 in Chapter 3 of our text. I have done Exercise 7 for you: Below you will find the ADT specification for a string of characters. It represents slightly more that a minimal string...
1
1377
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 help me out with this because this is a very serious issue for me and I need to learn more about this. And here it is again: I've been running postgres on my server for over a year now and the tables have become huge. I have 3 tables that have...
22
2177
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 grabbed, BUT it doesn't. I have tried and tried.....please help example: C:\Projects\Darryl\Queue Review Files\2-24\Cam 7\Cam7-20060224170000-01.jpg Cam7 but all I keep getting is Cam1, as the beginning of the jpg name,...:( HELP!
17
2279
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 scripts. each when clicked i am able to run the script. so HOW and what do i do to call and run the .sql Thanks
8
3151
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. The link to the document is http://www.surveymonkey.com/s.asp?u=689952259313 I have spent 15 hours trying to sort this but to no avail.
1
1527
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: =================================== 1: #!/usr/bin/perl 2: 3: $cr = '???';
6
3310
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, EmpName,DeptID,DateOfJoin, Sal, Addr) Finance (EmpID, Sal) Club (Clubname, EmpID, Fee, DateOfJoin) Leave (EmpID, Date) Department (DeptID, DeptName, NoOfEmployees)...
0
8637
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8364
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8504
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7193
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6125
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4092
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
2625
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1808
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
2
1511
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.