From 0945b91e11b7ca8f94073d96d99234ec34401cc4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Camilla=20Dahlstr=C3=B6m?= Date: Thu, 12 Oct 2023 17:49:49 +0000 Subject: [PATCH] scrpt.js : corrected the issue with startbuttom - wrote new code on site --- README.md | 5 +- assets/js/script.js | 276 ++++++++++++++++++++------------------------ 2 files changed, 130 insertions(+), 151 deletions(-) diff --git a/README.md b/README.md index 0c10d3f..cdd7cce 100644 --- a/README.md +++ b/README.md @@ -32,10 +32,11 @@ Art of memory is a classic game for one player. The game contains 8 pairs and st ### Site Purpose: Welcome to Art of memory. This game is made as a student project at Code Institue´s education "Fullstack developer". The project includes the languages JavaScript, HTML and CSS. I hope the user find the game challenging and relaxing. The art are made by myself and while working with the project I realized that this kind of game is saleable to artists and photographers who wish to integrate -During the developing I have realized that this type of game can be useful for artists who are trying to sell their artwork on their websites - to make their users get to know their art and give added value to the homepage instead of a pure sales page. Anyway, My purpose of the page is to exercise the user's memory in a playful and colorful way. +During the process I have realized that this type of game can be useful for artists and photgraphers to increase the value on their websites instead of just having a clean sales. Anyway, MY purpose of the page is to exercise the user's memory in a playful and colorful way. ### Site Goal: -I want to give the user a +I have used my skills that I have learned when studying JavaScript into a simple and fun game. The goal is to engage both new user and + ### Audience: The artworks can be changes to diff --git a/assets/js/script.js b/assets/js/script.js index fb00310..add9e4d 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -1,6 +1,6 @@ document.addEventListener("DOMContentLoaded", function () { - /**Art of memory variables*/ + const moves = document.getElementById("moves-count"); const timeValue = document.getElementById("time"); const startButton = document.getElementById("start"); @@ -12,20 +12,14 @@ document.addEventListener("DOMContentLoaded", function () { let interval; let firstCard = false; let secondCard = false; - let seconds = 0; /**Initial Time:seconds*/ - let minutes = 0; /**Initial Time: minutes*/ - let movesCount = 0; /**Initial moves*/ - let winCount = 0; /**Initial win count*/ - - - /**Array for cards: - * Used in: - * - generateRandom - * - tempArray - * - randomIndex - * - matrixGenerator - * @return cardvalue */ - + let seconds = 0, + /*Initial Time:seconds*/ + minutes = 0; /*Initial Time: minutes*/ + let movesCount = 0, + /*Initial moves*/ + winCount = 0; /*Initial win count*/ + + /*Array for cards:*/ const items = [{ name: "Memo1", image: "assets/images/mem1.webp" @@ -60,119 +54,106 @@ document.addEventListener("DOMContentLoaded", function () { }, ]; - /**Time calcultor: - * Used in: - * timeGenerator - * Format time befor display - * @return ${minutesValue}:${secondsValue} */ - + /*Timegenerator*/ const timeGenerator = () => { - seconds += 1; - if (seconds >= 60) { - minutes += 1; - seconds = 0; + seconds += 1; + /*minutes logic*/ + if (seconds >= 60) { + minutes += 1; + seconds = 0; } - let secondsValue = seconds < 10 ? `0${seconds}` : seconds; - let minutesValue = minutes < 10 ? `0${minutes}` : minutes; - timeValue.innerHTML = `Time:${minutesValue}:${secondsValue}`; -}; - -/**Move counter: - * Used in: - * movesCounter - * @return ${movesCount} */ + + /*format time before displaying*/ + let secondsValue = seconds < 10 ? `0${seconds}` : seconds; + let minutesValue = minutes < 10 ? `0${minutes}` : minutes; + timeValue.innerHTML = `Time:${minutesValue}:${secondsValue}`; + }; + + /*For calculating moves*/ const movesCounter = () => { - movesCount += 1; - moves.innerHTML = `Moves:${movesCount}`; + movesCount += 1; + moves.innerHTML = `Moves:${movesCount}`; }; - /**select cards in ArtMemeory: - * Used in: - * generateRandom - * tempArray - * randomIndex - * matrixGenerator - * once selected remove the object from temp array in tempArray.splice - * @return cardValues*/ - + /*Pick random objects from the items array*/ const generateRandom = (size = 4) => { - let tempArray = [...items]; - let cardValues = []; - size = (size * size) / 2; - for (let i = 0; i < size; i++) { - const randomIndex = Math.floor(Math.random() * tempArray.length); - cardValues.push(tempArray[randomIndex]); - tempArray.splice(randomIndex, 1); + + /*temporary array*/ + let tempArray = [...items]; + + /*initializes cardValues array*/ + let cardValues = []; + + /*size should be double (4*4 matrix)/2 since pairs of objects would exist*/ + size = (size * size) / 2; + + /*Random object selection*/ + for (let i = 0; i < size; i++) { + const randomIndex = Math.floor(Math.random() * tempArray.length); + cardValues.push(tempArray[randomIndex]); + + /*once selected remove the object from temp array*/ + tempArray.splice(randomIndex, 1); } - return cardValues; + return cardValues; }; -/**Shuffle cards in ArtMemeory: - * Used in: - * matrixGenerator : Generate card from Cardarray > Random index - * shuffle cards: cardValues.sort(() => Math.random() - 0.5) - * @return cardValues*/ - + /*Generate card from Cardarray > Random index*/ const matrixGenerator = (cardValues, size = 4) => { - gameContainer.innerHTML = ""; - cardValues = [...cardValues, ...cardValues]; - - cardValues.sort(() => Math.random() - 0.5); - for (let i = 0; i < size * size; i++) { - -/**Display cards in game container: - * Card before => front side - * Card after => back side (selected card when flipped) - * Eventlistener active: onclick */ - - - gameContainer.innerHTML += - `
-
+ gameContainer.innerHTML = ""; + cardValues = [...cardValues, ...cardValues]; + + /* shuffle cards*/ + cardValues.sort(() => Math.random() - 0.5); + for (let i = 0; i < size * size; i++) { + + /* Card before => front side + Card after => back side (contains actual image)*/ + gameContainer.innerHTML += ` +
+
-
`; - - gameContainer.style.gridTemplateColumns = `repeat(${size},auto)`; - cards = document.querySelectorAll(".card-container"); - cards.forEach((card) => { - card.addEventListener("click", () => { - -/** functions when match and no match: - * If: firstCardValue == secondCardValue - * increment moves since user selected second card - * increase wincount if match - * if: winCount == half of cardValues - * if no match: flip back to front card */ - +
+ + `; + } + /*Grid*/ + gameContainer.style.gridTemplateColumns = `repeat(${size},auto)`; + /*Cards*/ + cards = document.querySelectorAll(".card-container"); + cards.forEach((card) => { + card.addEventListener("click", () => { + + /*Events match vs no match */ if (!card.classList.contains("matched")) { - card.classList.add("flipped"); + card.classList.add("flipped"); /*Flip card*/ - if (!firstCard) { + /*Cards match */ + if (!firstCard) { firstCard = card; - firstCardValue = card.getAttribute("data-card-value"); } - else { - movesCounter(); - secondCard = card; - - let secondCardValue = card.getAttribute("data-card-value"); + firstCardValue = card.getAttribute("data-card-value"); + } else { + movesCounter(); /*increment moves since user selected second card*/ + secondCard = card; /*Second card and value*/ + let secondCardValue = card.getAttribute("data-card-value"); if (firstCardValue == secondCardValue) { - firstCard.classList.add("matched"); - secondCard.classList.add("matched"); - firstCard = false; - winCount += 1; - - if (winCount == Math.floor(cardValues.length / 2)) { - result.innerHTML = `

Hurray - You won!

-

Moves: ${movesCount}

`; - stopGame(); - } - - } - else { - let [tempFirst, tempSecond] = [firstCard, secondCard]; - firstCard = false; - secondCard = false; - let delay = setTimeout(() => { + firstCard.classList.add("matched"); + secondCard.classList.add("matched"); + firstCard = false; + winCount += 1; /*increase wincount*/ + //check if winCount ==half of cardValues + if (winCount == Math.floor(cardValues.length / 2)) { + result.innerHTML = `

Hurray - You won!

+

Moves: ${movesCount}

`; + stopGame(); + } + + /*Cards not match */ + } else { + let [tempFirst, tempSecond] = [firstCard, secondCard]; + firstCard = false; + secondCard = false; + let delay = setTimeout(() => { tempFirst.classList.remove("flipped"); tempSecond.classList.remove("flipped"); }, 900); @@ -182,43 +163,40 @@ document.addEventListener("DOMContentLoaded", function () { }); }); }; - - - /** functions when user start game: - * When click on startbutton: control visibility of startbutton - * Timer and moves counter shows in game area*/ - - startButton.addEventListener("click", () => { - movesCount = 0; - seconds = 0; - minutes = 0; - - controls.classList.add("hide"); - stopButton.classList.remove("hide"); - startButton.classList.add("hide"); - - interval = setInterval(timeGenerator, 1000); - moves.innerHTML = `Moves: ${movesCount}`; - initializer(); + //Start game + startButton.addEventListener("click", () => { + movesCount = 0; + seconds = 0; + minutes = 0; + + //Control the visibility buttons + controls.classList.add("hide"); + stopButton.classList.remove("hide"); + startButton.classList.add("hide"); + + //Start timer + interval = setInterval(timeGenerator, 1000); + + //Counting moves + moves.innerHTML = `Moves: ${movesCount}`; + initializer(); }); - - /** functions when user stop the game: - * When click on stop button: control visibility of buttons - * Goes back to welcome page*/ - - stopButton.addEventListener( "click", (stopGame = () => { - controls.classList.remove("hide"); - stopButton.classList.add("hide"); - startButton.classList.remove("hide"); - clearInterval(interval); + //Stop game- goes back to welcome page + stopButton.addEventListener( + "click", + (stopGame = () => { + controls.classList.remove("hide"); + stopButton.classList.add("hide"); + startButton.classList.remove("hide"); + clearInterval(interval); }) ); - /** Inizilize function and call of values */ - const initializer = () => { - result.innerText = ""; - winCount = 0; - let cardValues = generateRandom(); - console.log(cardValues); - matrixGenerator(cardValues); + //Initialize values and func calls + const initializer = () => { + result.innerText = ""; + winCount = 0; + let cardValues = generateRandom(); + console.log(cardValues); + matrixGenerator(cardValues); }; - }}) \ No newline at end of file +}) \ No newline at end of file