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 1775 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...
|
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"...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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....
|
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:...
|
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,...
|
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...
|
by: ryjfgjl |
last post by:
ExcelToDatabase: batch import excel into database automatically...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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....
|
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
| |