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. -
-
-
const $controls = document.querySelector(".controls");
-
const $controlBtns = $controls.children;
-
const $game = document.querySelector(".game");
-
-
const status = {
-
level: undefined,
-
arrAllLetters: ["A", "B", "C", "D", "E", "F"],
-
arrSelectedLetters: [],
-
pair: [],
-
symbols: [],
-
guessed: []
-
};
-
-
-
function resetGame() {
-
status.level = undefined;
-
status.arrSelectedLetters = [];
-
status.guessed = [];
-
}
-
-
-
function shuffleArray(array) {
-
for (let x = array.length - 1; x > 0; x--) {
-
let holder = Math.floor(Math.random() * array.length);
-
var itemValue = array[x];
-
array[x] = array[holder];
-
array[holder] = itemValue;
-
}
-
return array;
-
}
-
-
//
-
function flipCard(ev) {
-
let clickedCard = ev.currentTarget;
-
let letter = clickedCard.lastElementChild.firstElementChild.textContent;
-
-
clickedCard.classList.add("flip");
-
-
// check if pair doesn't contain the clicked element
-
if (!status.pair.includes(clickedCard)) {
-
status.pair.push(clickedCard);
-
status.symbols.push(letter);
-
-
// check if you have 2 elements in the pair
-
if (status.pair.length === 2) {
-
-
// compare letters
-
if (status.symbols[0] === status.symbols[1]) {
-
-
// match found
-
status.guessed.push(status.symbols[0]);
-
-
status.pair[0].removeEventListener("click", flipCard);
-
status.pair[1].removeEventListener("click", flipCard);
-
-
// if the number of guessed cards is equal to the number of
-
// arrSelectedLetters, there is nothing left to guess - game over
-
if (status.guessed.length === status.arrSelectedLetters.length) {
-
-
let timer_3 = window.setTimeout(function () {
-
-
// reset the status object
-
resetGame();
-
-
// remove all cards from your game div
-
$game.innerHTML = "";
-
-
// reveal the control panel again
-
$controls.classList.remove("hide-content");
-
-
window.clearTimeout(timer_3);
-
}, 1000);
-
}
-
-
} else {
-
-
// unflip the cards - needs to be delayed
-
let timer_1 = window.setTimeout(function () {
-
status.pair[0].classList.remove("flip");
-
status.pair[1].classList.remove("flip");
-
window.clearTimeout(timer_1);
-
}, 1000);
-
}
-
-
// empty pair and symbols after comparison
-
// make it ready for the next comparison
-
let timer_2 = window.setTimeout(function () {
-
status.pair = [];
-
status.symbols = [];
-
window.clearTimeout(timer_2);
-
}, 1000);
-
}
-
}
-
-
console.log(status);
-
}
-
-
-
function createElements() {
-
-
// append fragment to the DOM only once!
-
const fragment = document.createDocumentFragment();
-
-
// display each card twice
-
for (let i = 0; i < 2; i++) {
-
-
status.arrSelectedLetters = shuffleArray(status.arrSelectedLetters);
-
-
// create your cards
-
for (let j = 0; j < status.level; j++) {
-
-
// create your elements here
-
const cardHolder = document.createElement("div");
-
cardHolder.classList.add("card-holder");
-
-
const card = document.createElement("div");
-
card.classList.add("card");
-
-
const front = document.createElement("div");
-
front.classList.add("front", "side");
-
-
const back = document.createElement("div");
-
back.classList.add("back", "side");
-
-
const span = document.createElement("span");
-
span.textContent = status.arrSelectedLetters[j];
-
-
-
// card structure created here:
-
back.appendChild(span);
-
card.appendChild(front);
-
card.appendChild(back);
-
cardHolder.appendChild(card);
-
fragment.appendChild(cardHolder);
-
-
card.addEventListener("click", flipCard);
-
}
-
}
-
-
// append the entire set of cards to the DOM
-
$game.appendChild(fragment);
-
}
-
-
// choose the level to play
-
function chooseLevel(ev) {
-
-
// save the number of cards
-
status.level = parseInt(ev.target.dataset.level);
-
-
// hide your controls here
-
$controls.classList.add("hide-content");
-
-
// prepare your array
-
for (let i = 0; i < status.level; i++) {
-
status.arrSelectedLetters.push(status.arrAllLetters[i])
-
}
-
-
// create cards
-
createElements();
-
}
-
for (let b of $controlBtns) {
-
b.addEventListener("click", chooseLevel);
-
}
-
-
0 1781 Sign in to post your reply or Sign up for a free account.
Similar topics |
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?
|
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
|
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
|
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...
|
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...
| |
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!
|
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
|
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.
|
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 = '???';
|
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)...
|
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...
| |
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,...
|
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...
|
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...
|
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...
|
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...
|
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
| |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
|
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...
| |