Skip to content

Commit

Permalink
scrpt.js : corrected the issue with startbuttom - wrote new code on site
Browse files Browse the repository at this point in the history
  • Loading branch information
@Camdah77
Camdah77 committed Oct 12, 2023
1 parent 40633db commit 0945b91
Show file tree
Hide file tree
Showing 2 changed files with 130 additions and 151 deletions.
5 changes: 3 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
276 changes: 127 additions & 149 deletions assets/js/script.js
View file
Original file line number Diff line number Diff line change
@@ -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");
Expand All @@ -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"
Expand Down Expand Up @@ -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 = `<span>Time:</span>${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 = `<span>Time:</span>${minutesValue}:${secondsValue}`;
};

/*For calculating moves*/
const movesCounter = () => {
movesCount += 1;
moves.innerHTML = `<span>Moves:</span>${movesCount}`;
movesCount += 1;
moves.innerHTML = `<span>Moves:</span>${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 +=
`<div class="card-container" data-card-value="${cardValues[i].name}">
<div class="card-before"> </div>
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 += `
<div class="card-container" data-card-value="${cardValues[i].name}">
<div class="card-before"></div>
<div class="card-after">
<img src="${cardValues[i].image}" class="image"/> </div></div> `;

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 */

<img src="${cardValues[i].image}" class="image"/></div>
</div>
`;
}
/*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 = `<h2>Hurray - You won!</h2>
<h4>Moves: ${movesCount}</h4>`;
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 = `<h2>Hurray - You won!</h2>
<h4>Moves: ${movesCount}</h4>`;
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);
Expand All @@ -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 = `<span>Moves:</span> ${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 = `<span>Moves:</span> ${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);
};
}})
})

0 comments on commit 0945b91

Please sign in to comment.