From e503b5d580f21b79e9fa90b88879a344b5aabadf Mon Sep 17 00:00:00 2001 From: gracethedragon Date: Thu, 13 Jan 2022 22:03:20 +0800 Subject: [PATCH 1/6] set Timeout, Match Game Match, Match Game win Message --- index.html | 11 ++- package-lock.json | 2 +- script.js | 233 ++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 38 +++++++- 4 files changed, 280 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 25a06fd..2fe7e8b 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,19 @@ + - SWE101 + So You Think You Can Match + + + -

SWE101! 🚀

+

🤔 So You Think You Can Match 🤔

diff --git a/package-lock.json b/package-lock.json index 4e29994..36e87f3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "match-game-swe1", + "name": "match-game-bootcamp", "version": "1.0.0", "lockfileVersion": 1, "requires": true, diff --git a/script.js b/script.js index e2d0297..508a4d8 100644 --- a/script.js +++ b/script.js @@ -1 +1,234 @@ // Please implement exercise logic here +// Global variables +// boardSize has to be an even number +const boardSize = 4; +const board = []; +let firstCard = null; +let firstCardElement; +let deck; +let canClick = true +let matchedCards = 0; + +//gameplay +const squareClick = (cardElement, column, row) => { + + console.log(cardElement); + + console.log('FIRST CARD DOM ELEMENT', firstCard); + + console.log('BOARD CLICKED CARD', board[row][column]); + + const clickedCard = board[row][column]; + if(canClick === false){ + return + } + // the user already clicked on this square + if( cardElement.innerText !== '' ){ + return; + } + + if (firstCard === null) { + console.log('first turn'); + firstCard = clickedCard; + // turn this card over + cardElement.innerText = firstCard.name; + + // hold onto this for later when it may not match + firstCardElement = cardElement; + // second turn + } + else + { + console.log('second turn'); + + cardElement.innerText = clickedCard.name + + if ( + clickedCard.name === firstCard.name && + clickedCard.suit === firstCard.suit + ) { + matchedCards +=2 + + if(matchedCards == boardSize*boardSize){ + messageOutput.innerText = "YOU WIN!" + return + } + + messageOutput.innerText = "🎉🎉🎉" + console.log('match'); + canClick = false + setTimeout(() => { + messageOutput.innerText = "" + canClick = true + }, 3000); + + // turn this card over + cardElement.innerText = clickedCard.name; + // check that all card elements have inner text + + + + } else { + console.log('NOT a match'); + + canClick = false + messageOutput.innerText = "❌❌❌" + setTimeout(() => { + firstCardElement.innerText = ''; + cardElement.innerText = '' + messageOutput.innerText = "" + canClick = true + }, 3000); + + } + // reset the first card + firstCard = null; + +} +}; + + +// create all the board elements that will go on the screen +//build message output board + const messageOutput = document.createElement ('div') + messageOutput.classList.add("message") + document.body.appendChild(messageOutput) + +// return the built board +const buildBoardElements = (board) => { + // create the element that everything will go inside of + const boardElement = document.createElement('div'); + + // give it a class for CSS purposes + boardElement.classList.add('board'); + + // use the board data structure we passed in to create the correct size board + for (let i = 0; i < board.length; i += 1) { + // make a var for just this row of cards + const row = board[i]; + + // make an element for this row of cards + const rowElement = document.createElement('div'); + rowElement.classList.add('row'); + + // make all the squares for this row + for (let j = 0; j < row.length; j += 1) { + // create the square element + const square = document.createElement('div'); + + // set a class for CSS purposes + square.classList.add('square'); + + // set the click event + // eslint-disable-next-line + square.addEventListener('click', (event) => { + // we will want to pass in the card element so + // that we can change how it looks on screen, i.e., + // "turn the card over" + squareClick(event.currentTarget, i, j); + }); + + rowElement.appendChild(square); + } + boardElement.appendChild(rowElement); + } + + return boardElement; +}; + + + +//game initialisation +const initGame = () => { + // create this special deck by getting the doubled cards and + // making a smaller array that is ( boardSize squared ) number of cards + let doubleDeck = makeDeck(); + let deckSubset = doubleDeck.slice(0, boardSize * boardSize); + deck = shuffleCards(deckSubset); + + // deal the cards out to the board data structure + for (let i = 0; i < boardSize; i += 1) { + board.push([]); + for (let j = 0; j < boardSize; j += 1) { + board[i].push(deck.pop()); + } + } + + const boardEl = buildBoardElements(board); + + document.body.appendChild(boardEl); + +}; + +// Get a random index ranging from 0 (inclusive) to max (exclusive). +const getRandomIndex = (max) => Math.floor(Math.random() * max); + + +// Shuffle an array of cards +const shuffleCards = (cards) => { + // Loop over the card deck array once + for (let currentIndex = 0; currentIndex < cards.length; currentIndex += 1) { + // Select a random index in the deck + const randomIndex = getRandomIndex(cards.length); + // Select the card that corresponds to randomIndex + const randomCard = cards[randomIndex]; + // Select the card that corresponds to currentIndex + const currentCard = cards[currentIndex]; + // Swap positions of randomCard and currentCard in the deck + cards[currentIndex] = randomCard; + cards[randomIndex] = currentCard; + } + // Return the shuffled deck + return cards; +}; + +//Make deck +//const makeDeck = (cardAmount) +const makeDeck = () => { + // create the empty deck at the beginning + const newDeck = []; + const suits = ['hearts', 'diamonds', 'clubs', 'spades']; + + for (let suitIndex = 0; suitIndex < suits.length; suitIndex += 1) { + // make a variable of the current suit + const currentSuit = suits[suitIndex]; + console.log(`current suit: ${currentSuit}`); + + // loop to create all cards in this suit + // rank 1-13 + for (let rankCounter = 1; rankCounter <= 13; rankCounter += 1) { + // Convert rankCounter to string + let cardName = `${rankCounter}`; + + // 1, 11, 12 ,13 + if (cardName === '1') { + cardName = 'A'; + } else if (cardName === '11') { + cardName = 'J'; + } else if (cardName === '12') { + cardName = 'Q'; + } else if (cardName === '13') { + cardName = 'K'; + } + + // make a single card object variable + const card = { + name: cardName, + suit: currentSuit, + rank: rankCounter, + }; + + console.log(`rank: ${rankCounter}`); + + // add the card to the deck + newDeck.push(card); // add double the cards to the deck + newDeck.push(card); + } + + } + return newDeck; +}; + + +window.addEventListener('load', initGame) +// crossOriginIsolated.log(cardAmount) \ No newline at end of file diff --git a/styles.css b/styles.css index 04e7110..11951a5 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,39 @@ +#header { + font-size: 50px; + color: slategrey; +} + body { - background-color: pink; + background-color: lightblue; + text-align: center; + font-family: "ZCOOL QingKe HuangYou", cursive; + color: lightskyblue; +} +.square { + padding: 10px; + margin: 10px; + background-color: slategrey; + display: inline-block; + height: 40px; + width: 40px; + vertical-align: top; + font-size: 30px; + border-radius: 10%; +} + +.div { + /* height: 10px; */ +} + +.board { + /* margin-top: 5%; */ +} + +.message { + min-height: 50px; + text-align: center; + font-size: 30px; + margin-top: 5%; + margin-bottom: 5%; + color: slategrey; } From 7c27a033e6c93e66dee7c0429cd56fcc27b35840 Mon Sep 17 00:00:00 2001 From: gracethedragon Date: Thu, 13 Jan 2022 22:34:25 +0800 Subject: [PATCH 2/6] added suits to the display --- script.js | 12 ++++++++---- styles.css | 2 +- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/script.js b/script.js index 508a4d8..39e2efc 100644 --- a/script.js +++ b/script.js @@ -18,6 +18,8 @@ const squareClick = (cardElement, column, row) => { console.log('BOARD CLICKED CARD', board[row][column]); + + const clickedCard = board[row][column]; if(canClick === false){ return @@ -31,7 +33,7 @@ const squareClick = (cardElement, column, row) => { console.log('first turn'); firstCard = clickedCard; // turn this card over - cardElement.innerText = firstCard.name; + cardElement.innerText = firstCard.name + '\n' + firstCard.suit; // hold onto this for later when it may not match firstCardElement = cardElement; @@ -41,7 +43,7 @@ const squareClick = (cardElement, column, row) => { { console.log('second turn'); - cardElement.innerText = clickedCard.name + cardElement.innerText = clickedCard.name + '\n' + clickedCard.suit if ( clickedCard.name === firstCard.name && @@ -63,7 +65,7 @@ const squareClick = (cardElement, column, row) => { }, 3000); // turn this card over - cardElement.innerText = clickedCard.name; + cardElement.innerText = clickedCard.name +'\n' + clickedCard.suit; // check that all card elements have inner text @@ -126,6 +128,8 @@ const buildBoardElements = (board) => { // that we can change how it looks on screen, i.e., // "turn the card over" squareClick(event.currentTarget, i, j); + + }); rowElement.appendChild(square); @@ -187,7 +191,7 @@ const shuffleCards = (cards) => { const makeDeck = () => { // create the empty deck at the beginning const newDeck = []; - const suits = ['hearts', 'diamonds', 'clubs', 'spades']; + const suits = ['♥', '♦', '♣', '♠']; for (let suitIndex = 0; suitIndex < suits.length; suitIndex += 1) { // make a variable of the current suit diff --git a/styles.css b/styles.css index 11951a5..f71d202 100644 --- a/styles.css +++ b/styles.css @@ -17,7 +17,7 @@ body { height: 40px; width: 40px; vertical-align: top; - font-size: 30px; + font-size: 15px; border-radius: 10%; } From d1bfb8ea734b648bcd8ab0a13faf8141f68c0956 Mon Sep 17 00:00:00 2001 From: gracethedragon Date: Fri, 14 Jan 2022 19:33:04 -0800 Subject: [PATCH 3/6] added timer --- script.js | 207 ++++++++++++++++++++++++++++------------------------- styles.css | 9 ++- 2 files changed, 115 insertions(+), 101 deletions(-) diff --git a/script.js b/script.js index 39e2efc..7ddd3d4 100644 --- a/script.js +++ b/script.js @@ -1,101 +1,87 @@ // Please implement exercise logic here // Global variables // boardSize has to be an even number + +// document.body.appendChild(output); + const boardSize = 4; const board = []; let firstCard = null; let firstCardElement; let deck; -let canClick = true +let canClick = true; let matchedCards = 0; +// create all the board elements that will go on the screen +// build message output board +const messageOutput = document.createElement('div'); +messageOutput.classList.add('message'); +document.body.appendChild(messageOutput); -//gameplay +// gameplay const squareClick = (cardElement, column, row) => { - - console.log(cardElement); - - console.log('FIRST CARD DOM ELEMENT', firstCard); - - console.log('BOARD CLICKED CARD', board[row][column]); - - - - const clickedCard = board[row][column]; - if(canClick === false){ - return - } - // the user already clicked on this square - if( cardElement.innerText !== '' ){ + console.log(cardElement); + console.log('FIRST CARD DOM ELEMENT', firstCard); + console.log('BOARD CLICKED CARD', board[row][column]); + const clickedCard = board[row][column]; + if (canClick === false) { + return; + } + // the user already clicked on this square + if (cardElement.innerText !== '') { + return; + } + if (firstCard === null) { + console.log('first turn'); + firstCard = clickedCard; + // turn this card over + cardElement.innerText = `${firstCard.name}\n${firstCard.suit}`; + + // hold onto this for later when it may not match + firstCardElement = cardElement; + // second turn + } + else + { + console.log('second turn'); + cardElement.innerText = `${clickedCard.name}\n${clickedCard.suit}`; + if ( + clickedCard.name === firstCard.name + && clickedCard.suit === firstCard.suit + ) { + matchedCards += 2; + if (matchedCards === boardSize * boardSize) { + messageOutput.innerText = 'YOU WIN!'; return; - } - - if (firstCard === null) { - console.log('first turn'); - firstCard = clickedCard; - // turn this card over - cardElement.innerText = firstCard.name + '\n' + firstCard.suit; - - // hold onto this for later when it may not match - firstCardElement = cardElement; - // second turn - } - else - { - console.log('second turn'); - - cardElement.innerText = clickedCard.name + '\n' + clickedCard.suit - - if ( - clickedCard.name === firstCard.name && - clickedCard.suit === firstCard.suit - ) { - matchedCards +=2 - - if(matchedCards == boardSize*boardSize){ - messageOutput.innerText = "YOU WIN!" - return - } - - messageOutput.innerText = "🎉🎉🎉" - console.log('match'); - canClick = false - setTimeout(() => { - messageOutput.innerText = "" - canClick = true - }, 3000); - - // turn this card over - cardElement.innerText = clickedCard.name +'\n' + clickedCard.suit; - // check that all card elements have inner text - - - - } else { - console.log('NOT a match'); - - canClick = false - messageOutput.innerText = "❌❌❌" - setTimeout(() => { - firstCardElement.innerText = ''; - cardElement.innerText = '' - messageOutput.innerText = "" - canClick = true - }, 3000); - } - // reset the first card - firstCard = null; - -} -}; + messageOutput.innerText = '🎉🎉🎉'; + console.log('match'); + canClick = false; + setTimeout(() => { + messageOutput.innerText = ''; + canClick = true; + }, 3000); + + // turn this card over + cardElement.innerText = `${clickedCard.name}\n${clickedCard.suit}`; + // check that all card elements have inner text + } else { + console.log('NOT a match'); + + canClick = false; + messageOutput.innerText = '❌❌❌'; + setTimeout(() => { + firstCardElement.innerText = ''; + cardElement.innerText = ''; + messageOutput.innerText = ''; + canClick = true; + }, 3000); + } + // reset the first card + firstCard = null; + } +}; -// create all the board elements that will go on the screen -//build message output board - const messageOutput = document.createElement ('div') - messageOutput.classList.add("message") - document.body.appendChild(messageOutput) - // return the built board const buildBoardElements = (board) => { // create the element that everything will go inside of @@ -128,26 +114,22 @@ const buildBoardElements = (board) => { // that we can change how it looks on screen, i.e., // "turn the card over" squareClick(event.currentTarget, i, j); - - }); rowElement.appendChild(square); } boardElement.appendChild(rowElement); } - + return boardElement; }; - - -//game initialisation +// game initialisation const initGame = () => { // create this special deck by getting the doubled cards and // making a smaller array that is ( boardSize squared ) number of cards - let doubleDeck = makeDeck(); - let deckSubset = doubleDeck.slice(0, boardSize * boardSize); + const doubleDeck = makeDeck(); + const deckSubset = doubleDeck.slice(0, boardSize * boardSize); deck = shuffleCards(deckSubset); // deal the cards out to the board data structure @@ -159,15 +141,12 @@ const initGame = () => { } const boardEl = buildBoardElements(board); - document.body.appendChild(boardEl); - }; // Get a random index ranging from 0 (inclusive) to max (exclusive). const getRandomIndex = (max) => Math.floor(Math.random() * max); - // Shuffle an array of cards const shuffleCards = (cards) => { // Loop over the card deck array once @@ -186,8 +165,8 @@ const shuffleCards = (cards) => { return cards; }; -//Make deck -//const makeDeck = (cardAmount) +// Make deck +// const makeDeck = (cardAmount) const makeDeck = () => { // create the empty deck at the beginning const newDeck = []; @@ -228,11 +207,41 @@ const makeDeck = () => { newDeck.push(card); // add double the cards to the deck newDeck.push(card); } - } return newDeck; }; +let milliseconds = 1 * 60 * 1000; + +// console.log(totalSeconds); +// console.log(minutes); +// console.log(seconds); + +const delayInMilliseconds = 1000; +const output = document.createElement('div'); +output.id = 'timer'; +output.innerText = 'Let\'s go!'; +document.body.appendChild(output); + +const ref = setInterval(() => { + const totalSeconds = Math.floor(milliseconds / 1000); + const minutes = Math.floor(totalSeconds / 60); + let seconds = totalSeconds - minutes * 60; + + if (seconds < 10) { + seconds = `0${seconds}`; + } + output.innerText = `${minutes}:${seconds} `; + console.log(milliseconds); + + if (milliseconds <= 0) { + clearInterval(ref); + messageOutput.innerText = 'GAME OVER!'; + canClick = false; + return; + } -window.addEventListener('load', initGame) -// crossOriginIsolated.log(cardAmount) \ No newline at end of file + milliseconds -= 1000; +}, delayInMilliseconds); +window.addEventListener('load', initGame); +// crossOriginIsolated.log(cardAmount) diff --git a/styles.css b/styles.css index f71d202..9abd6ca 100644 --- a/styles.css +++ b/styles.css @@ -22,7 +22,6 @@ body { } .div { - /* height: 10px; */ } .board { @@ -34,6 +33,12 @@ body { text-align: center; font-size: 30px; margin-top: 5%; - margin-bottom: 5%; + /* margin-bottom: 5%; */ color: slategrey; } + +#timer { + color: black; + font-size: 30px; + margin: 10px; +} From 311b2db99e3830e56629215631c51234c1860e3b Mon Sep 17 00:00:00 2001 From: gracethedragon Date: Fri, 14 Jan 2022 19:43:13 -0800 Subject: [PATCH 4/6] reload game after timer ends --- script.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/script.js b/script.js index 7ddd3d4..c104821 100644 --- a/script.js +++ b/script.js @@ -211,7 +211,7 @@ const makeDeck = () => { return newDeck; }; -let milliseconds = 1 * 60 * 1000; +let milliseconds = 0.2 * 60 * 1000; // console.log(totalSeconds); // console.log(minutes); @@ -236,8 +236,12 @@ const ref = setInterval(() => { if (milliseconds <= 0) { clearInterval(ref); - messageOutput.innerText = 'GAME OVER!'; + messageOutput.innerText = 'GAME OVER! Resetting...'; canClick = false; + setTimeout(() => { + window.location.reload(); + }, 3000); + return; } From 7fb8375c6acf08b18efccba149f9ce109ce39f47 Mon Sep 17 00:00:00 2001 From: gracethedragon Date: Sat, 15 Jan 2022 18:23:22 -0500 Subject: [PATCH 5/6] updated timer --- script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/script.js b/script.js index c104821..c2dae69 100644 --- a/script.js +++ b/script.js @@ -211,7 +211,7 @@ const makeDeck = () => { return newDeck; }; -let milliseconds = 0.2 * 60 * 1000; +let milliseconds = 3 * 60 * 1000; // console.log(totalSeconds); // console.log(minutes); From 557504a083525bb4f4fa226a9c9549d25af34c8f Mon Sep 17 00:00:00 2001 From: gracethedragon Date: Sun, 16 Jan 2022 17:52:03 -0500 Subject: [PATCH 6/6] shortened card delay interval to 1000ms --- script.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/script.js b/script.js index c2dae69..b84a99d 100644 --- a/script.js +++ b/script.js @@ -60,7 +60,7 @@ const squareClick = (cardElement, column, row) => { setTimeout(() => { messageOutput.innerText = ''; canClick = true; - }, 3000); + }, 1000); // turn this card over cardElement.innerText = `${clickedCard.name}\n${clickedCard.suit}`; @@ -75,7 +75,7 @@ const squareClick = (cardElement, column, row) => { cardElement.innerText = ''; messageOutput.innerText = ''; canClick = true; - }, 3000); + }, 1000); } // reset the first card firstCard = null; @@ -220,7 +220,7 @@ let milliseconds = 3 * 60 * 1000; const delayInMilliseconds = 1000; const output = document.createElement('div'); output.id = 'timer'; -output.innerText = 'Let\'s go!'; +output.innerText = 'You have 3 minutes. Let\'s go!'; document.body.appendChild(output); const ref = setInterval(() => {