diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..7295cdc Binary files /dev/null and b/.DS_Store differ diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..88bcb41 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +Back-up_Files \ No newline at end of file diff --git a/images/.DS_Store b/images/.DS_Store new file mode 100644 index 0000000..daa5916 Binary files /dev/null and b/images/.DS_Store differ diff --git a/images/alien-lego.png b/images/alien-lego.png new file mode 100644 index 0000000..742f6f7 Binary files /dev/null and b/images/alien-lego.png differ diff --git a/images/goofy-lego.jpeg b/images/goofy-lego.jpeg new file mode 100644 index 0000000..2d5bad7 Binary files /dev/null and b/images/goofy-lego.jpeg differ diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 0000000..1c8a484 Binary files /dev/null and b/images/logo.png differ diff --git a/images/motorcycle-lego.jpeg b/images/motorcycle-lego.jpeg new file mode 100644 index 0000000..3cb72ba Binary files /dev/null and b/images/motorcycle-lego.jpeg differ diff --git a/images/pirate-lego.jpeg b/images/pirate-lego.jpeg new file mode 100644 index 0000000..a4988dc Binary files /dev/null and b/images/pirate-lego.jpeg differ diff --git a/images/r2d2-lego.jpeg b/images/r2d2-lego.jpeg new file mode 100644 index 0000000..6e84d36 Binary files /dev/null and b/images/r2d2-lego.jpeg differ diff --git a/images/sf-lego.jpeg b/images/sf-lego.jpeg new file mode 100644 index 0000000..901cff1 Binary files /dev/null and b/images/sf-lego.jpeg differ diff --git a/images/shuttle-lego.jpeg b/images/shuttle-lego.jpeg new file mode 100644 index 0000000..eab6ab3 Binary files /dev/null and b/images/shuttle-lego.jpeg differ diff --git a/images/spaceship-lego.jpeg b/images/spaceship-lego.jpeg new file mode 100644 index 0000000..67322e9 Binary files /dev/null and b/images/spaceship-lego.jpeg differ diff --git a/images/truck-lego.jpeg b/images/truck-lego.jpeg new file mode 100644 index 0000000..b19e265 Binary files /dev/null and b/images/truck-lego.jpeg differ diff --git a/index.html b/index.html index e69de29..ede1b3a 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,32 @@ + + + + + + + + RPesterW3Hw + + + + + +

Lego Memory Card Game

+

Turn the cards and match the images.

+

Score:

+

Timer: 00:00

+ + + + +
+ + + + \ No newline at end of file diff --git a/index.js b/index.js index e69de29..03a33f3 100644 --- a/index.js +++ b/index.js @@ -0,0 +1,192 @@ +/* Identy the images to be used (6 matching and 1 for back of card) */ +document.addEventListener("DOMContentLoaded", function() { + + const imageArray = [{ + name: 'pirate', + img: "images/pirate-lego.jpeg" + }, + { + name: 'pirate', + img: "images/pirate-lego.jpeg" + }, + { + name: 'goofy', + img: "images/goofy-lego.jpeg" + }, + { + name: 'goofy', + img: "images/goofy-lego.jpeg" + }, + { + name: 'motorcycle', + img: "images/motorcycle-lego.jpeg" + }, + { + name: 'motorcycle', + img: "images/motorcycle-lego.jpeg" + }, + { + name: 'r2d2', + img: "images/r2d2-lego.jpeg" + }, + { + name: 'r2d2', + img: "images/r2d2-lego.jpeg" + }, + { + name: 'sf', + img: "images/sf-lego.jpeg" + }, + { + name: 'sf', + img: "images/sf-lego.jpeg" + }, + { + name: 'shuttle', + img: "images/shuttle-lego.jpeg" + }, + { + name: 'shuttle', + img: "images/shuttle-lego.jpeg" + } + ] + + imageArray.sort(() => 0.5 - Math.random()) + + const resetButton = document.getElementById('reset') + const timerDOMElement = document.getElementById('timer') + let isTimerRunning = false + let timeInSeconds = 0 + let timeKeepingInterval + timerDOMElement.innerHTML = prettyPrintTime() + let isModalDisplayed = false + const modal = document.getElementById('modal') + + modal.addEventListener('click', toggleModal) + resetButton.addEventListener('click', onResetButtonClicked) + const gameboard = document.getElementById("gameboard") // Identify the board area + const scoreDisplay = document.getElementById("score") + let cardsChosen = [] // an array of cards chosen + let cardsChosenId = [] // an array for card IDs + let cardsWon = [] + + // create the board environment + function createBoard() { + for (let i = 0; i < imageArray.length; i++) { + let card = document.createElement('img') + card.setAttribute('src', 'images/logo.png') + card.setAttribute('data-id', i) + gameboard.appendChild(card) + card.addEventListener('click', flipCard) + } + } + + //reset button + function onResetButtonClicked() { + console.log("did my button click") + cardsChosen = [] // reset to empty + cardsChosenId = [] // reset to empty + cardsWon = [] // reset to empty + scoreDisplay.textContent = cardsWon.length + gameboard.innerHTML = '' + clearInterval(timeKeepingInterval) + timeInSeconds = 0 + timerDOMElement.innerHTML = "00:00" + isTimerRunning = false + imageArray.sort(() => 0.5 - Math.random()) + if (isModalDisplayed) { + toggleModal() + } + createBoard() + } + + // make the time function look better + function prettyPrintTime() { + let minutes = Math.floor(timeInSeconds / 60); + let seconds = Math.floor(timeInSeconds - (minutes * 60)); + + if (minutes < 10) { + minutes = `0${minutes}`; + } + + if (seconds < 10) { + seconds = `0${seconds}`; + } + + return `${minutes}:${seconds}`; + } + + // timer functionality + function startTimer() { + isTimerRunning = true + timeKeepingInterval = setInterval(() => { + timeInSeconds += 1 + + timerDOMElement.innerHTML = prettyPrintTime() + }, 1000); + + + } + + //Find matches + + function checkForMatch() { + let cards = document.querySelectorAll('img') + const optionOneId = cardsChosenId[0] + const optionTwoId = cardsChosenId[1] + if (cardsChosen[0] === cardsChosen[1]) { + // alert("You found a match!") + cardsWon.push(cardsChosen) + } else { + cards[optionOneId].setAttribute('src', 'images/logo.png') + cards[optionTwoId].setAttribute('src', 'images/logo.png') + // alert("Sorry, try again!") + } + cardsChosen = [] + cardsChosenId = [] + scoreDisplay.textContent = cardsWon.length + if (cardsWon.length === imageArray.length / 2) { + toggleModal() + clearInterval(timeKeepingInterval) + } + } + + // Toggle the modal at end of game + function toggleModal() { + if (isModalDisplayed) { + // set as display None and update the variable + modal.style.display = "none" + } else { + // set display to initial + modal.style.display = "flex" //display modal + const modalTimeElement = document.getElementById('timeAnchor') + const modalScoreElement = document.getElementById('finalScore') + + modalTimeElement.innerHTML = prettyPrintTime() + modalScoreElement.innerHTML = cardsWon.length + } + isModalDisplayed = !isModalDisplayed //update isModalDisplayed variable + + + } + + //flip the cards + + function flipCard() { + // check if timer is runnning, if not, then call startTimer + if (!isTimerRunning) { + startTimer() + } + let cardId = this.getAttribute("data-id") + cardsChosen.push(imageArray[cardId].name) + cardsChosenId.push(cardId) + this.setAttribute('src', imageArray[cardId].img) + if (cardsChosen.length === 2) { + setTimeout(checkForMatch, 700) + } + + } + + createBoard() + +}) \ No newline at end of file diff --git a/style.css b/style.css deleted file mode 100644 index e69de29..0000000 diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..5dab079 --- /dev/null +++ b/styles.css @@ -0,0 +1,74 @@ +body { + display: flex; + flex-direction: column; + align-items: center; + background-color: blueviolet; +} + +h1 { + font-family: cursive; + color: red; + margin: 10px; +} + +h2 { + font-family: cursive; + color: red; + margin: 10px; +} + +h3 { + margin: 0; +} + +#reset { + background-color: blue; + border: solid 5px green; + color: white; + font-size: 16px; + margin-top: 20px; + margin-bottom: 30px; +} + +#gameboard { + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 800px; + border: solid 10px red; +} + +img { + width: 200px; + cursor: pointer; +} + +#modal { + display: none; + position: fixed; + justify-content: center; + height: 100vh; + width: 100vw; + background: rgb(0, 0, 0, .5); + cursor: pointer; +} + +.modalcontainer { + align-self: center; + height: 400px; + width: 300px; + color: crimson; + font-size: large; + text-align: center; + font-weight: bold; + background: white; + border: solid 5px green; +} + +#modalpic { + margin-left: 20px; + height: 90%; + justify-content: center; + background-image: url(images/alien-lego.png); + background-repeat: no-repeat; +} \ No newline at end of file