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 += - `