From 62e709b440fe120096e3e5cdd4009e0d3825fc05 Mon Sep 17 00:00:00 2001 From: RGUD0 <114261602+RGUD0@users.noreply.github.com> Date: Thu, 19 Oct 2023 11:46:04 -0400 Subject: [PATCH 1/7] New Game 2 Settings --- game1Settings.html | 6 --- game2.css | 0 game2settings.html | 93 ++++++++++++++++++++++++++++++---------------- index.html | 1 - styles.css | 68 --------------------------------- styles2.css | 82 ++++++++++++++++++++++++++++++++++++++++ 6 files changed, 142 insertions(+), 108 deletions(-) create mode 100644 game2.css delete mode 100644 styles.css create mode 100644 styles2.css diff --git a/game1Settings.html b/game1Settings.html index aad0b29..5082150 100644 --- a/game1Settings.html +++ b/game1Settings.html @@ -8,10 +8,6 @@
-
-
-
-

Matching

Game mode

@@ -59,8 +55,6 @@

Directions

flipped so you can create a match! A match happens when you select two cards with
the same image on them.

- -
diff --git a/game2.css b/game2.css new file mode 100644 index 0000000..e69de29 diff --git a/game2settings.html b/game2settings.html index 75e3027..781bf63 100644 --- a/game2settings.html +++ b/game2settings.html @@ -4,9 +4,9 @@ - - Game 2 Settings + + Game 2 Settings
@@ -15,11 +15,11 @@
-

Copy Creation

+

Copy Game Settings

Grid Size

- Using the slider below, please select the size of grid you would like to start with.
- The size will become larger as the pattern continues to get larger. + Use the slider to select the size of grid.
+ The size will increase as you progress.

Size: 1

@@ -32,45 +32,72 @@

Size: -

Level Select

+

Difficulty Select

- Pick a level below.
- Each level corresponds to the amount of time each square in the pattern will flash
- The harder the level, the less time you will have to look at the lit up square. + Select a difficulty for the game.
+ This determines the duration of cell flashes.
+ The duration decreases with difficulty.

- - - - - - -
- -

Directions

-

- Once the game begins, a card in the grid will light up. When the light turns off you will
- click it. Once again the card will light up, with a second light afterwards. You will then
- click the cards in the right order. You have beat the level when you have reached the
- longest pattern for that sized grid. You will then move to a new, larger grid where the
- pattern will restart with one light. + + + + + + +

+

Color Select

+

+ Pick a color below.
+ The color is what the cells will flash to when they
+ light up during the game, then flash back to white.

+ + + + +

Directions

+

+ When a cell in the grid flashes, click the cell.
+ A new longer series of cells will flash.
+ Click the cells in the correct order to progress.
+ The grid will get bigger, and the flashing will get faster.
+ If you mess up the order, it is game over.
+

+

+ Click "Play" to begin, or "Home" to return.
+

+
+ Play + Home +
+
- - - diff --git a/index.html b/index.html index 62851e5..65087dc 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,6 @@ - Home Page diff --git a/styles.css b/styles.css deleted file mode 100644 index 83b8635..0000000 --- a/styles.css +++ /dev/null @@ -1,68 +0,0 @@ -/* General */ - -/* Home Page */ - -/* Info Page */ - -/* Login Page */ - -/* Card Game */ - -/* Settings 1 */ - -/* Copy Game */ - -/* Settings 2 */ - -.leftcolumn { - float: left; - left: 0; - width: 33%; - padding-right: 20px; -} - -.middlecolumn { - float: left; - width: 33%; - background-color: #f1f1f1; -} - - /* Right column */ -.rightcolumn { - float: left; - right: 0; - width: 33%; - padding-left: 20px; -} - -.box { - text-align: center; - background-color: white; - padding: 20px; - height: 100%; - margin-top: 20px; -} - -.clearbox { - background-color: none; - padding: 20px; - height: 100%; - margin-top: 20px; -} - -.row::after { - content: ""; - display: table; - clear: both; -} - -/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */ -@media screen and (max-width: 800px) { - .leftcolumn, .middlecolumn, .rightcolumn { - width: 100%; - padding: 0; - } - .box, .clearbox { - margin-top: 0px; - } -} \ No newline at end of file diff --git a/styles2.css b/styles2.css new file mode 100644 index 0000000..cf222bf --- /dev/null +++ b/styles2.css @@ -0,0 +1,82 @@ +/* Settings 2 */ + +body { + /*display: flex; + justify-content: center;*/ + /* align-items: center; */ + height: 100vh; /* This ensures the container takes up the full viewport height */ + margin: 0; /* Remove default body margin */ + background-color: #f0f0f0; /* Background color for the entire page */ +} + +.leftcolumn { + float: left; + left: 0; + width: 25%; + padding-right: 20px; +} + +.middlecolumn { + float: left; + width: 50%; + background-color: #f1f1f1; +} + +.rightcolumn { + float: left; + right: 0; + width: 25%; + padding-left: 20px; +} + +.box { + text-align: center; + background-color: white; + padding: 20px; + height: fit-content; + margin-top: 20px; +} + +.clearbox { + background-color: none; + padding: 20px; + height: fit-content; + margin-top: 20px; +} + +.row::after { + content: ""; + display: table; + clear: both; +} + +.center { + display: block; + text-align: center; +} + +a { + display: block; + background-color: #007bff; + color: white; + text-decoration: none; + padding: 10px; + margin-top: 20px; + max-width: 300px; + margin-left: auto; + margin-right: auto; +} + +/* Responsive layout - when the screen is less than 600px wide, make the three +columns stack on top of each other instead of next to each other */ +@media screen and (max-width: 800px) { + .leftcolumn, .middlecolumn, .rightcolumn { + width: 100%; + padding: 0; + } + .box, .clearbox { + margin-top: 0px; + } +} + +/* Copy Game */ \ No newline at end of file From e79b972e7b99b5cfb042e643d95811cc5ba3ef33 Mon Sep 17 00:00:00 2001 From: RGUD0 <114261602+RGUD0@users.noreply.github.com> Date: Tue, 31 Oct 2023 09:13:33 -0400 Subject: [PATCH 2/7] Improved Game 2 Settings --- game2settings.html | 1 - js/scripts.js | 9 --------- 2 files changed, 10 deletions(-) delete mode 100644 js/scripts.js diff --git a/game2settings.html b/game2settings.html index 781bf63..aa97aa0 100644 --- a/game2settings.html +++ b/game2settings.html @@ -5,7 +5,6 @@ - Game 2 Settings diff --git a/js/scripts.js b/js/scripts.js deleted file mode 100644 index becd41a..0000000 --- a/js/scripts.js +++ /dev/null @@ -1,9 +0,0 @@ -/* Game 2 Settings */ - -dimslider() { - var slider = document.getElementById("myRange"); - var output = document.getElementById("demo"); - output.innerHTML = slider.value; - output.innerHTML = this.value; -} - From 10fbb34b7860f7964b0a092dd204d6132d13ec0d Mon Sep 17 00:00:00 2001 From: RGUD0 <114261602+RGUD0@users.noreply.github.com> Date: Tue, 12 Dec 2023 20:04:31 -0500 Subject: [PATCH 3/7] Game 2 Added (Not Yet Complete) --- game2.css | 116 +++++++++++ game2.html | 53 +++-- game2settings.html | 73 +++---- js/game2.js | 485 +++++++++++++++++++++++++++++++++++++++++++++ styles2.css | 82 -------- 5 files changed, 670 insertions(+), 139 deletions(-) create mode 100644 js/game2.js delete mode 100644 styles2.css diff --git a/game2.css b/game2.css index e69de29..5c5640c 100644 --- a/game2.css +++ b/game2.css @@ -0,0 +1,116 @@ +/* Settings 2 */ + +body { + /*display: flex; + justify-content: center;*/ + /* align-items: center; */ + height: 100vh; /* This ensures the container takes up the full viewport height */ + margin: 0; /* Remove default body margin */ + background-color: #f0f0f0; /* Background color for the entire page */ +} + +a,button { + display: block; + background-color: #007bff; + color: white; + text-decoration: none; + padding: 10px; + margin-top: 20px; + max-width: 300px; + margin-left: auto; + margin-right: auto; + border: none; + font: inherit; +} + +.leftcolumn { + float: left; + width: 25%; + /*padding-right: 20px;*/ +} + +.middlecolumn { + float: left; + width: 50%; + height: 100%; + background-color: #f1f1f1; +} + +.rightcolumn { + float: left; + width: 25%; + /*padding-left: 20px;*/ +} + +.box { + text-align: center; + background-color: white; + padding: 20px; + width: 100%; + height: 100%; + margin-top: 20px; + margin-bottom: 20px; +} + +.clearbox { + background-color: none; + padding: 20px; + height: fit-content; + margin-top: 10px; + margin-bottom: 10px; +} + +.row::after { + content: ""; + display: table; + clear: both; +} + +.center { + display: block; + text-align: center; +} + +.gameGrid { + display: grid; + gap: 5px; + padding-top: 100%; + margin: auto; + padding: auto; + border: none; +} + +/* +.gameCell { + position: relative; + margin: 0px; + border: none; + animation-name: pulse; + --startColor: none; + --pulseColor: none; +} +/* +.easyPulse { + animation-duration: 1s; +} +@keyframes pulse { + from { background-color: var(--startColor); } + to { background-color: var(--pulseColor); } +} +*/ + +/* Responsive layout - when the screen is less than 800px wide, make the three +columns stack on top of each other instead of next to each other */ +@media screen and (max-width: 800px) { + .leftcolumn, .middlecolumn, .rightcolumn { + width: 100%; + padding: 0; + } + .box, .clearbox { + margin-top: 20px; + margin-bottom: 20px; + } +} +/**/ + +/* Copy Game */ \ No newline at end of file diff --git a/game2.html b/game2.html index 628eb5a..cd98744 100644 --- a/game2.html +++ b/game2.html @@ -1,17 +1,44 @@ - - - - - Game 2 - + + + + + + Game 2 + + +
+
+
+
+
+
+

Memory Game

+ +
-
-
+
+
+
+
- - \ No newline at end of file + + \ No newline at end of file diff --git a/game2settings.html b/game2settings.html index aa97aa0..57f3747 100644 --- a/game2settings.html +++ b/game2settings.html @@ -1,10 +1,10 @@ - - + + Game 2 Settings @@ -15,22 +15,16 @@

Copy Game Settings

+

Grid Size

Use the slider to select the size of grid.
The size will increase as you progress.

-

Size: 1

+

Size: 2 x 2

- +

Difficulty Select

Select a difficulty for the game.
@@ -38,44 +32,30 @@

Difficulty Select

The duration decreases with difficulty.

- - - - - - + Easy + Medium + Hard
- +

Color Select

Pick a color below.
The color is what the cells will flash to when they
light up during the game, then flash back to white.

- - - - + + + +

Keep Select

+

+ Select whether to keep the settings.
+ If you go back to the settings page, values will be kept. +

+
+ Not Keep + Keep +
+

Directions

When a cell in the grid flashes, click the cell.
@@ -91,7 +71,12 @@

Directions

Play Home
- + +

Values: 2 easy #1c87c9

+
@@ -99,4 +84,4 @@

Directions

- + \ No newline at end of file diff --git a/js/game2.js b/js/game2.js new file mode 100644 index 0000000..bbd7f18 --- /dev/null +++ b/js/game2.js @@ -0,0 +1,485 @@ + +// Game 2 Settings + +/* +Color List +d:1 baby pink: #F4DFF5 +d:2 blue gray: #CEDDDE +d:3 bright green: #37FF00 +d:4 bright yellow: #FFEE00 +d:5 hot pink: #FD0095 +d:6 lavender: #B38EED +d:7 light blue: #8EDAEC +d:8 light green: #96ED8F +d:9 light pink: #ED8E9D +l:1 bright orange: #FE9104 +l:2 bright red: #FD0000 +l:3 brown: #755614 +l:4 burnt orange: #FD724D +l:5 dark blue: #112D82 +l:6 dark purple: #553462 +l:7 deep red: #D1302F +l:8 forest green: #137414 +l:9 light brown: #D6A654 +d/l:0 gray: #D1D1D1 + +Color Picker Default Value +old color (Muted Cyan): #1c87c9 +new color (Bright Cyan): #007BFF + +(lime): #92dd55 +*/ + +function setInputElements() { + // input elements + let sizeInput = document.querySelector("#sizePick"); + let diffInput1 = document.querySelector("#diffPick1"); + let diffInput2 = document.querySelector("#diffPick2"); + let diffInput3 = document.querySelector("#diffPick3"); + let colorInput = document.querySelector("#colorPick"); + let keepInput1 = document.querySelector("#keepPick1"); + let keepInput2 = document.querySelector("#keepPick2"); + // output elements + let sizeOutput = document.querySelector("#sizeOutput"); + let diffOutput; // unused + let colorOutput = document.querySelector("#colorValue"); + let keepOutput; // unused + let settingOutput = document.querySelector("#settingValues"); + // value variables + let sizeValue; + let diffValue; + let colorValue; + let keepValue; + + if (localStorage.getItem("keep") == "true") { // kept setting values + console.log("Keep Is On!"); + // size + sizeInput.value = localStorage.getItem("size"); + sizeInput.oninput = function() { + sizeOutput.innerHTML = sizeInput.value + " x " + sizeInput.value; + } + // difficulty + if (localStorage.getItem("difficulty") == "easy") { + diffInput1.checked = true; + } else if (localStorage.getItem("difficulty") == "medium") { + diffInput2.checked = true; + } else if (localStorage.getItem("difficulty") == "hard") { + diffInput3.checked = true; + } + // color + colorInput.value = localStorage.getItem("color"); + colorInput.oninput = function() { + colorOutput.innerHTML = colorInput.value; + } + // keep + if (localStorage.getItem("keep") == "true") { + keepInput2.checked = true; + } else { + keepInput1.checked = true; + } + } else { // default setting values + console.log("Keep Is Off!"); + sizeInput.value = 2; + sizeOutput.innerHTML = "2 x 2"; + diffInput1.checked = true; + colorInput.value = "#1c87c9"; + colorOutput.innerHTML = "#1c87c9"; + keepInput1.checked = true; + } +} + +window.onclick = getValues; + +function getValues() { + window.addEventListener("load", startup, false); + + // input elements + let sizeInput = document.querySelector("#sizePick"); + let diffInput1 = document.querySelector("#diffPick1"); + let diffInput2 = document.querySelector("#diffPick2"); + let diffInput3 = document.querySelector("#diffPick3"); + let colorInput = document.querySelector("#colorPick"); + let keepInput1 = document.querySelector("#keepPick1"); + let keepInput2 = document.querySelector("#keepPick2"); + // output elements + let sizeOutput = document.querySelector("#sizeOutput"); + let diffOutput; // unused + let colorOutput = document.querySelector("#colorValue"); + let keepOutput; // unused + let settingOutput = document.querySelector("#settingValues"); + // value variables + let sizeValue; + let diffValue; + let colorValue; + let keepValue; + + function startup() { + // add eventlisteners + sizeInput.addEventListener("input", updateFirst, false); + diffInput1.addEventListener("input", updateFirst, false); + diffInput2.addEventListener("input", updateFirst, false); + diffInput3.addEventListener("input", updateFirst, false); + colorInput.addEventListener("input", updateFirst, false); + keepInput1.addEventListener("input", updateFirst, false); + keepInput2.addEventListener("input", updateFirst, false); + } + + function updateFirst(event) { + console.clear(); + sizeValue = sizeInput.value; + if (diffInput1.checked) diffValue = diffInput1.value; + if (diffInput2.checked) diffValue = diffInput2.value; + if (diffInput3.checked) diffValue = diffInput3.value; + colorValue = colorInput.value; + if (keepInput1.checked) keepValue = keepInput1.value; + if (keepInput2.checked) keepValue = keepInput2.value; + + localStorage.setItem("size",sizeValue); + localStorage.setItem("difficulty",diffValue); + localStorage.setItem("color",colorValue); + localStorage.setItem("pulse","#ffffff"); + localStorage.setItem("keep",keepValue); + localStorage.setItem("easy",1); + localStorage.setItem("medium",0.5); + localStorage.setItem("hard",0.25) + + console.log("size: " + sizeValue); + console.log("diff: " + diffValue); + console.log("color: " + colorValue); + console.log("keep: " + keepValue); + + // size + sizeInput.oninput = function() { + sizeOutput.innerHTML = sizeInput.value + " x " + sizeInput.value; + } + sizeOutput.innerHTML = sizeInput.value + " x " + sizeInput.value; + + // color + colorInput.oninput = function() { + colorOutput.innerHTML = colorInput.value; + } + colorOutput.innerHTML = colorInput.value; + // settings + settingOutput.innerHTML = "Setting Values: " + sizeValue + " " + diffValue + " " + colorValue + " " + keepValue; + } +} + +function updateSetVals() { + // input elements + let sizeInput = document.querySelector("#sizePick"); + let diffInput1 = document.querySelector("#diffPick1"); + let diffInput2 = document.querySelector("#diffPick2"); + let diffInput3 = document.querySelector("#diffPick3"); + let colorInput = document.querySelector("#colorPick"); + let keepInput1 = document.querySelector("#keepPick1"); + let keepInput2 = document.querySelector("#keepPick2"); + // output elements + let sizeOutput = document.querySelector("#sizeOutput"); + let diffOutput; // unused + let colorOutput = document.querySelector("#colorValue"); + let keepOutput; // unused + let settingOutput = document.querySelector("#settingValues"); + // value variables + let sizeValue; + let diffValue; + let colorValue; + let keepValue; + sizeValue = sizeInput.value; + if (diffInput1.checked) diffValue = diffInput1.value; + if (diffInput2.checked) diffValue = diffInput2.value; + if (diffInput3.checked) diffValue = diffInput3.value; + colorValue = colorInput.value; + if (keepInput1.checked) keepValue = keepInput1.value; + if (keepInput2.checked) keepValue = keepInput2.value; + sizeOutput.innerHTML = sizeValue + " x " + sizeValue; + colorOutput.innerHTML = colorValue; + settingOutput.innerHTML = "Setting Values: " + sizeValue + " " + diffValue + " " + colorValue + " " + keepValue; +} + +// Game 2 + +window.onresize = setValues; + +function setValues() { + //console.clear(); + // getting local variables + let gridSize = localStorage.getItem("size"); + let gridDiff = localStorage.getItem("difficulty"); + let gridColor = localStorage.getItem("color"); + let gridKeep = localStorage.getItem("keep"); + console.log("size: " + gridSize + " difficulty: " + gridDiff + " color: " + gridColor); + // game output values + let gameOutput = document.querySelector("#gameValues"); + gameOutput.innerHTML = gridSize + " " + gridDiff + " " + gridColor + " " + gridKeep; + // getting grid element + let gameGrid = document.querySelector("#game2Grid"); + let gridWidth = gameGrid.clientWidth; + let gridHeight = gameGrid.clientHeight; + //gridWidth = (gridWidth > 600) ? 600: (gridWidth < 100) ? 100: gridWidth; + gridHeight = (gridHeight > 600) ? 600: (gridHeight < 100) ? 100: gridHeight; + //let minSize = Math.min(gridWidth,gridHeight); + //gridWidth = minSize; + //gridHeight = minSize; + let gridPixelSize = gridWidth; + let gridGap = 5; + console.log("Grid gap: "+ gridGap); + let cellSize = ((gridPixelSize-(gridGap*(gridSize-1)))/gridSize); + // show values on console + console.log("Width: " + gridWidth); + console.log("Height: " + gridHeight); + console.log("cell size: " + cellSize); + // HTML game grid + let autos = ""; + for (let row = 0; row < gridSize; row++) { + autos += " auto"; + } + gameGrid.style.setProperty("grid-template-columns",autos); + gameGrid.setAttribute('gap',gridGap+"px"); + gameGrid.setAttribute('height',gridPixelSize+"px"); + gameGrid.style.setProperty("padding-top","0px"); + gameGrid.innerHTML = ""; + // JS game grid + const cellRows = []; + for (let row = 0; row < gridSize; row++) { + cellCols = []; + for (let col = 0; col < gridSize; col++) { + let index = (row * gridSize) + col; + let gridCell = '
'; + console.log("Showing grid cell: " + gridCell); + console.log("row: " + row + " col: " + col); + gameGrid.innerHTML += gridCell; + cellCols[col] = gridCell.toString(); + } + cellRows[row] = cellCols; + } + localStorage.setItem("cellGridHTML",gameGrid); + localStorage.setItem("cellGridJS",cellRows); +} + +function makeSequence(iter) { + //console.clear(); + /* + let gameGridHTML = localStorage.getItem("cellGridHTML"); + console.log("HTML Grid: " + gameGridHTML); + let gameGridJS = localStorage.getItem("cellGridJS"); + console.log("JS Grid: " + gameGridJS);*/ + + // get local variables + iter = (iter < 0) ? 1: iter; + let gridSize = localStorage.getItem("size"); + let gridDiff = localStorage.getItem("difficulty"); + let gridColor = localStorage.getItem("color"); + let diffTime = (gridDiff == "easy") ? 1: (gridDiff == "medium") ? 0.5: (gridDiff == "hard") ? 0.25: 1; + + // generate index and delay sequences + const indexSeq = []; + const delaySeq = []; + for (let count = 0; count < iter; count++) { + let row = Math.floor(Math.random() * gridSize); + let col = Math.floor(Math.random() * gridSize); + let index = (row * gridSize) + col; + indexSeq.push(index); + delaySeq.push(diffTime * count); + } + localStorage.setItem("time",diffTime); + localStorage.setItem("sequence",indexSeq); + localStorage.setItem("delays",delaySeq); + +/* + for (let count = 0; count < iter; count++) { + let cell = document.querySelector("#cell"+indexSeq[count]); + //cell.classList.add("easyPulse"); + cell.style.setProperty("--startColor", gridColor); + cell.style.setProperty("--pulseColor", "#FFFFFF"); + cell.style.setProperty("animation-duration", diffTime + "s"); + //cell.style.setProperty("animation-iteration", values.get(indexSeq[])) + cell.style.setProperty("animation-delay", delaySeq[count] + "s"); + //console.log("Row: " + row + " Col: " + col + " Index: " + index); + console.log(cell); + //setTimeout(() => console.log(count),1000 * count); + } +*/ +/* + for (let count = 0; count < iter; count++) { + setTimeout(() => updateCell(count), 1000*delaySeq[count]); + } + */ + console.log("Index sequence: " + indexSeq); +} + +function updateCell(index,color) { + console.log("Updating cell: " + index); + //get local variables + let gridSize = localStorage.getItem("size"); + let gridDiff = localStorage.getItem("difficulty"); + let gridColor = localStorage.getItem("color"); + let diffTime = localStorage.getItem("time"); + // validate index + index = (index < 0) ? 0: (index >= gridSize * gridSize) ? gridSize * gridSize: index; + //delayIndex = (delayIndex < 0) ? 0: (delayIndex >= gridSize * gridSize) ? gridSize * gridSize: delayIndex; + // not in use + let indexSeq = localStorage.getItem("sequence"); + let delaySeq = localStorage.getItem("delays"); + + let cell = document.querySelector("#cell"+index); + cell.style.setProperty("background-color",color); + //cell.classList.add("easyPulse"); + //cell.style.setProperty("--startColor", gridColor); + //cell.style.setProperty("--pulseColor", "#FFFFFF"); + //cell.style.setProperty("animation-duration", diffTime + "s"); + //cell.style.setProperty("animation-iteration", values.get(indexSeq[])) + //cell.style.setProperty("animation-delay", delaySeq[delayIndex] + "s"); + //console.log("Row: " + row + " Col: " + col + " Index: " + index); + console.log(cell); + //setTimeout(() => console.log(count),1000 * count); +} + +function pulseSequence() { + console.log("Pulse Sequence!"); + let indexSeq = localStorage.getItem("sequence"); + let delaySeq = localStorage.getItem("delays"); + let pulseColor = localStorage.getItem("pulse"); + let gridSize = localStorage.getItem("size"); + let gridDiff = localStorage.getItem("difficulty"); + let gridColor = localStorage.getItem("color"); + let diffTime = localStorage.getItem("time"); + let indexes = indexSeq.split(","); + console.log("Seq length: " + indexes.length); + console.log("Seq indexes: " + indexes); + + console.log("grid color: " + gridColor); + console.log("pulse color: " + pulseColor); + + for (let index = 0; index < indexes.length + 1; index++) { + console.log("Index: " + index); + console.log("Index sequence: [" + indexes[index] + "]"); + if (index - 1 >= 0) { + setTimeout(() => updateCell(indexes[index-1],gridColor),diffTime*1000*index); + } + if (index < indexes.length) { + setTimeout(() => updateCell(indexes[index],pulseColor),diffTime*1000*index); + } + } +} + +function memoryGame() { + let score = 0; + let count = 10; + makeSequence(count); + pulseSequence(); +} + +/* +function updateSeqCell(count) { + //get local variables + let gridSize = localStorage.getItem("size"); + let gridDiff = localStorage.getItem("difficulty"); + let gridColor = localStorage.getItem("color"); + let diffTime = localStorage.getItem("time"); + + count = (count < 0) ? 0: (count >= gridSize * gridSize) ? gridSize * gridSize: count; + + let indexSeq = localStorage.getItem("sequence"); + let delaySeq = localStorage.getItem("delays"); + let indexs = indexSeq.split(","); + console.log("indexSeq: " + indexSeq); + console.log("indexSeq: " + indexs[count]); + + let cell = document.querySelector("#cell"+indexs[count]); + + /* (ANIMATION CSS) + //cell.classList.add("easyPulse"); + cell.style.setProperty("--startColor", gridColor); + cell.style.setProperty("--pulseColor", "#FFFFFF"); + cell.style.setProperty("animation-duration", diffTime + "s"); + //cell.style.setProperty("animation-iteration", values.get(indexSeq[])) + cell.style.setProperty("animation-delay", delaySeq[count] + "s"); + + + //console.log("Row: " + row + " Col: " + col + " Index: " + index); + console.log(cell); + //setTimeout(() => console.log(count),1000 * count); +} +*/ + +/* +function cellPairs(index,color,indexSize,colorPulse) { + console.log("Cell pair: " + index); + // set to grid color + if (index - 1 >= 0) { + updateCell(index-1,color); + } + // set to pulse color + if (index < indexSize) { + updateCell(index,colorPulse); + } +} +*/ + +/* +function indexToCoord(index,size) { + const coord = []; + coord[0] = (size > 0) ? Math.floor(index/size): 0; + coord[1] = (size > 0) ? Math.floor(index%size): 0; + return coord; +} + +function coordToIndex(row, col, size) { + return (size > 0) ? Math.floor((row * size) + col): 0; +} +*/ + + /* + const values = []; + console.log("Duplicates:"); + for (let count = 0; count < iter; count++) { + let value = indexSeq[count]; + delaySeq[count] = []; + if(!values.includes(value)) { + values.push(value); + delaySeq.push(diffTime*count); + console.log(value + " " + diffTime*count); + } else { + let dupIndex = 0; + while (dupIndex < iter) { + if (values[dupIndex] == value) { + delaySeq[dupIndex].push(diffTime*count); + console.log(value + " " + diffTime*count); + break; + } + dupIndex++; + } + } + } + */ + +/* +function updateHTMLGameGrid() { + //console.clear(); + // getting grid element + let gameGrid = document.querySelector("#game2Grid"); + // JS game grid + const cellRows = localStorage.getItem("cellGridJS"); + // getting local variables + let gridSize = localStorage.getItem("size"); + let gridDiff = localStorage.getItem("difficulty"); + let gridColor = localStorage.getItem("color"); + gameGrid.innerHTML = ""; + for (let row = 0; row < gridSize; row++) { + for (let col = 0; col < gridSize; col++) { + let cellID = (row * gridSize) + col; + console.log(cellID); + let divCell = document.querySelector("#cell"+cellID); + if (row == 0 & col == 0) { + console.log("divCell: " + divCell); + //divCell.style.setProperty("--diff-animation-duration","4s"); + //divCell.style.setProperty("--startColor",gridColor); + //divCell.style.setProperty("--pulseColor","white"); + } + console.log("row: " + row + " col: " + col); + gameGrid.innerHTML += divCell; + } + } + localStorage.setItem("cellGridHTML",gameGrid); +} +*/ \ No newline at end of file diff --git a/styles2.css b/styles2.css deleted file mode 100644 index cf222bf..0000000 --- a/styles2.css +++ /dev/null @@ -1,82 +0,0 @@ -/* Settings 2 */ - -body { - /*display: flex; - justify-content: center;*/ - /* align-items: center; */ - height: 100vh; /* This ensures the container takes up the full viewport height */ - margin: 0; /* Remove default body margin */ - background-color: #f0f0f0; /* Background color for the entire page */ -} - -.leftcolumn { - float: left; - left: 0; - width: 25%; - padding-right: 20px; -} - -.middlecolumn { - float: left; - width: 50%; - background-color: #f1f1f1; -} - -.rightcolumn { - float: left; - right: 0; - width: 25%; - padding-left: 20px; -} - -.box { - text-align: center; - background-color: white; - padding: 20px; - height: fit-content; - margin-top: 20px; -} - -.clearbox { - background-color: none; - padding: 20px; - height: fit-content; - margin-top: 20px; -} - -.row::after { - content: ""; - display: table; - clear: both; -} - -.center { - display: block; - text-align: center; -} - -a { - display: block; - background-color: #007bff; - color: white; - text-decoration: none; - padding: 10px; - margin-top: 20px; - max-width: 300px; - margin-left: auto; - margin-right: auto; -} - -/* Responsive layout - when the screen is less than 600px wide, make the three -columns stack on top of each other instead of next to each other */ -@media screen and (max-width: 800px) { - .leftcolumn, .middlecolumn, .rightcolumn { - width: 100%; - padding: 0; - } - .box, .clearbox { - margin-top: 0px; - } -} - -/* Copy Game */ \ No newline at end of file From 33804f28dbe43a5bc1afb623f06431f7970bd32b Mon Sep 17 00:00:00 2001 From: RGUD0 <114261602+RGUD0@users.noreply.github.com> Date: Wed, 13 Dec 2023 23:49:27 -0500 Subject: [PATCH 4/7] Finishing Game 2, 0 --- game2.css | 16 ++++- game2.html | 11 +--- js/game2.js | 175 +++++++++++++++++++++++++++++++++++++++++++++++----- 3 files changed, 175 insertions(+), 27 deletions(-) diff --git a/game2.css b/game2.css index 5c5640c..264ea40 100644 --- a/game2.css +++ b/game2.css @@ -9,7 +9,7 @@ body { background-color: #f0f0f0; /* Background color for the entire page */ } -a,button { +a,#gameValues { display: block; background-color: #007bff; color: white; @@ -23,6 +23,20 @@ a,button { font: inherit; } +button { + display: inline-block; + background-color: #007bff; + color: white; + text-decoration: none; + padding: 10px; + margin-top: 20px; + max-width: 300px; + margin-left: auto; + margin-right: auto; + border: none; + font: inherit; +} + .leftcolumn { float: left; width: 25%; diff --git a/game2.html b/game2.html index cd98744..69c46bb 100644 --- a/game2.html +++ b/game2.html @@ -19,20 +19,13 @@

Memory Game

- + + Home Game 2 Settings

Values: 2 easy #1c87c9

diff --git a/js/game2.js b/js/game2.js index bbd7f18..5e79734 100644 --- a/js/game2.js +++ b/js/game2.js @@ -210,7 +210,7 @@ function setValues() { console.log("size: " + gridSize + " difficulty: " + gridDiff + " color: " + gridColor); // game output values let gameOutput = document.querySelector("#gameValues"); - gameOutput.innerHTML = gridSize + " " + gridDiff + " " + gridColor + " " + gridKeep; + gameOutput.innerHTML = "| Grid: " + gridSize + " x " + gridSize + " | Difficulty: " + gridDiff + " | Color: " + gridColor + " | Keep Settings: " + gridKeep + " |"; // getting grid element let gameGrid = document.querySelector("#game2Grid"); let gridWidth = gameGrid.clientWidth; @@ -228,6 +228,8 @@ function setValues() { console.log("Width: " + gridWidth); console.log("Height: " + gridHeight); console.log("cell size: " + cellSize); + // start level btn + disableStartLevelBtn(); // HTML game grid let autos = ""; for (let row = 0; row < gridSize; row++) { @@ -240,6 +242,7 @@ function setValues() { gameGrid.innerHTML = ""; // JS game grid const cellRows = []; + // populate gameGrid with div gameCells for (let row = 0; row < gridSize; row++) { cellCols = []; for (let col = 0; col < gridSize; col++) { @@ -252,6 +255,44 @@ function setValues() { } cellRows[row] = cellCols; } + + // clicked cell sequence + const cellSeq = []; + let cellSeqStr = JSON.stringify(cellSeq); + localStorage.setItem("cellSequence",cellSeqStr); + // set toggle on + localStorage.setItem("isClickOn","false"); + + // add onclick function to gameCells + for (let row = 0; row < gridSize; row++) { + for (let col = 0; col < gridSize; col++) { + let gridCell = document.querySelector("#cell"+((row*gridSize)+col)); + const clickCell = function() { + // get cell sequence + let sequenceStr = localStorage.getItem("cellSequence"); + let seqArr = JSON.parse(sequenceStr); + // cell id + let cellId = this.id.replace("cell",""); + let isClickOn = localStorage.getItem("isClickOn"); + if (isClickOn == "true") { + //console.log("Click Game Cell is On!"); + seqArr.push(cellId); + // call to console + if (isEqualSequence() == 1) { + console.log("Random and Cell are equal!"); + } else if (isEqualSequence() == 0) { + console.log("Random and Cell are not equal!"); + } + console.log("Cell Id: " + cellId); + console.log("Cell sequence: " + seqArr); + } + // store cell id in cell sequence + sequenceStr = JSON.stringify(seqArr); + localStorage.setItem("cellSequence",sequenceStr); + } + gridCell.onclick = clickCell; + } + } localStorage.setItem("cellGridHTML",gameGrid); localStorage.setItem("cellGridJS",cellRows); } @@ -272,18 +313,21 @@ function makeSequence(iter) { let diffTime = (gridDiff == "easy") ? 1: (gridDiff == "medium") ? 0.5: (gridDiff == "hard") ? 0.25: 1; // generate index and delay sequences - const indexSeq = []; - const delaySeq = []; + const randomIndexSeq = []; + const randomDelaySeq = []; for (let count = 0; count < iter; count++) { let row = Math.floor(Math.random() * gridSize); let col = Math.floor(Math.random() * gridSize); let index = (row * gridSize) + col; - indexSeq.push(index); - delaySeq.push(diffTime * count); + randomIndexSeq.push(index); + randomDelaySeq.push(diffTime * count); } + let indexSeqStr = JSON.stringify(randomIndexSeq); + let delaySeqStr = JSON.stringify(randomDelaySeq); + // set difficulty time, random sequence, and delay sequence localStorage.setItem("time",diffTime); - localStorage.setItem("sequence",indexSeq); - localStorage.setItem("delays",delaySeq); + localStorage.setItem("randomSequence",indexSeqStr); + localStorage.setItem("randomDelays",delaySeqStr); /* for (let count = 0; count < iter; count++) { @@ -304,11 +348,11 @@ function makeSequence(iter) { setTimeout(() => updateCell(count), 1000*delaySeq[count]); } */ - console.log("Index sequence: " + indexSeq); + console.log("Index sequence: " + indexSeqStr); } function updateCell(index,color) { - console.log("Updating cell: " + index); + //console.log("Updating cell: " + index); //get local variables let gridSize = localStorage.getItem("size"); let gridDiff = localStorage.getItem("difficulty"); @@ -318,8 +362,8 @@ function updateCell(index,color) { index = (index < 0) ? 0: (index >= gridSize * gridSize) ? gridSize * gridSize: index; //delayIndex = (delayIndex < 0) ? 0: (delayIndex >= gridSize * gridSize) ? gridSize * gridSize: delayIndex; // not in use - let indexSeq = localStorage.getItem("sequence"); - let delaySeq = localStorage.getItem("delays"); + let indexSeq = localStorage.getItem("randomSequence"); + let delaySeq = localStorage.getItem("randomDelays"); let cell = document.querySelector("#cell"+index); cell.style.setProperty("background-color",color); @@ -330,20 +374,22 @@ function updateCell(index,color) { //cell.style.setProperty("animation-iteration", values.get(indexSeq[])) //cell.style.setProperty("animation-delay", delaySeq[delayIndex] + "s"); //console.log("Row: " + row + " Col: " + col + " Index: " + index); - console.log(cell); + //setTimeout(() => console.log(count),1000 * count); + + //console.log(cell); } function pulseSequence() { console.log("Pulse Sequence!"); - let indexSeq = localStorage.getItem("sequence"); - let delaySeq = localStorage.getItem("delays"); + let indexSeq = localStorage.getItem("randomSequence"); + let delaySeq = localStorage.getItem("randomDelays"); let pulseColor = localStorage.getItem("pulse"); let gridSize = localStorage.getItem("size"); let gridDiff = localStorage.getItem("difficulty"); let gridColor = localStorage.getItem("color"); let diffTime = localStorage.getItem("time"); - let indexes = indexSeq.split(","); + let indexes = JSON.parse(indexSeq); console.log("Seq length: " + indexes.length); console.log("Seq indexes: " + indexes); @@ -363,10 +409,105 @@ function pulseSequence() { } function memoryGame() { - let score = 0; - let count = 10; + // start game + console.log("Start Game!"); + + + //disableStartGameBtn(); + //enableStartLevelBtn(); +} + +function disableStartGameBtn() { + let startGameBtn = document.querySelector("#startGameBtn"); + startGameBtn.disabled = true; + startGameBtn.style.setProperty("background-color","gray"); +} + +function enableStartGameBtn() { + let startGameBtn = document.querySelector("#startGameBtn"); + startGameBtn.disabled = false; + startGameBtn.style.setProperty("background-color","#007bff"); +} + +function disableStartLevelBtn() { + console.log("Start Level Disabled!"); + let startLevelBtn = document.querySelector("#startLevelBtn"); + startLevelBtn.disabled = true; + startLevelBtn.style.setProperty("background-color","#gray"); +} + +function enableStartLevelBtn() { + + let startLevelBtn = document.querySelector("#startLevelBtn"); + startLevelBtn.disabled = false; + startLevelBtn.style.setProperty("background-color","#007bff"); +} + +function startLevel() { + // start level + console.log("Start Level!"); + let count = 1; + toggleClickOn(); + + + disableStartLevelBtn(); + clearCellSequence(); makeSequence(count); pulseSequence(); + + getRandomSequence(); + getCellSequence(); +} + +function toggleClickOn() { + console.log("Click Set On!"); + localStorage.setItem("isClickOn","true"); +} + +function toggleClickOff() { + console.log("Click Set Off!"); + localStorage.setItem("isClickOn","false"); +} + +function getRandomSequence() { + let randomSeqStr = localStorage.getItem("randomSequence"); + let randomSequence = JSON.parse(randomSeqStr); + console.log("Random Sequence: " + randomSequence) + return randomSequence; +} + +function getCellSequence() { + let cellSeqStr = localStorage.getItem("cellSequence"); + let cellSequence = JSON.parse(cellSeqStr); + console.log("Cell Sequence: " + cellSequence) + return cellSequence; +} + +function clearCellSequence() { + let cellSequence = []; + let cellSeqStr = JSON.stringify(cellSequence); + localStorage.setItem("cellSequence",cellSeqStr); +} + +function isEqualSequence() { + console.log("Equal Sequence?"); + let isEqual = 1; + let randomSequence = getRandomSequence(); + let cellSequence = getCellSequence(); + let randomSize = randomSequence.length; + let cellSize = cellSequence.length; + if (randomSize != cellSize) { + isEqual = 0; + } else { + for (let index = 0; index < cellSize; index++) { + let randomCell = randomSequence[index]; + let sequenceCell = cellSequence[index]; + if (randomCell != sequenceCell) { + isEqual = 0; + } + } + } + return isEqual; } /* From 7bf6180bbcb0d625f1e635ce0717623ffaa366d7 Mon Sep 17 00:00:00 2001 From: RGUD0 <114261602+RGUD0@users.noreply.github.com> Date: Thu, 14 Dec 2023 01:37:05 -0500 Subject: [PATCH 5/7] Game 2 Finished --- game2.css | 7 ++- game2.html | 2 + game2settings.html | 17 ++++--- js/game2.js | 121 ++++++++++++++++++++++++++++++++------------- 4 files changed, 106 insertions(+), 41 deletions(-) diff --git a/game2.css b/game2.css index 264ea40..1d8fe86 100644 --- a/game2.css +++ b/game2.css @@ -9,7 +9,7 @@ body { background-color: #f0f0f0; /* Background color for the entire page */ } -a,#gameValues { +a,#gameValues,#settingValues { display: block; background-color: #007bff; color: white; @@ -96,13 +96,16 @@ button { /* .gameCell { + background-color: #ffffff; + /* position: relative; margin: 0px; border: none; animation-name: pulse; --startColor: none; --pulseColor: none; -} + +} */ /* .easyPulse { animation-duration: 1s; diff --git a/game2.html b/game2.html index 69c46bb..1d6d599 100644 --- a/game2.html +++ b/game2.html @@ -21,6 +21,8 @@

Memory Game

+ + Home Game 2 Settings

Values: 2 easy #1c87c9

diff --git a/game2settings.html b/game2settings.html index 57f3747..99a8cdd 100644 --- a/game2settings.html +++ b/game2settings.html @@ -58,14 +58,19 @@

Keep Select

Directions

- When a cell in the grid flashes, click the cell.
- A new longer series of cells will flash.
- Click the cells in the correct order to progress.
- The grid will get bigger, and the flashing will get faster.
- If you mess up the order, it is game over.
+ Once you click "Play":
+ Click "Start Game", then "Start Level"
+ A series of cells will pulse on the grid
+ After the pulses, click on the cells in the correct order
+ If you click on the correct cells:
+ Click "Start Level" for the next level
+ A longer series of cells will pulse as you progress
+ If you click on the wrong cell:
+ It is Game Over
+ Start Game will light up and click to play again

- Click "Play" to begin, or "Home" to return.
+ Click "Play" to begin, or "Home" to return

Play diff --git a/js/game2.js b/js/game2.js index 5e79734..c0a9e93 100644 --- a/js/game2.js +++ b/js/game2.js @@ -30,6 +30,7 @@ new color (Bright Cyan): #007BFF (lime): #92dd55 */ +// Sets the values of the inputs on game 2 settings function setInputElements() { // input elements let sizeInput = document.querySelector("#sizePick"); @@ -81,15 +82,21 @@ function setInputElements() { console.log("Keep Is Off!"); sizeInput.value = 2; sizeOutput.innerHTML = "2 x 2"; + localStorage.setItem("size","2"); diffInput1.checked = true; + localStorage.setItem("difficulty","easy"); colorInput.value = "#1c87c9"; colorOutput.innerHTML = "#1c87c9"; + localStorage.setItem("color","#1c87c9"); keepInput1.checked = true; + localStorage.setItem("keep","false"); } } +// Updates values on clicks window.onclick = getValues; +// Adds event listeners to input elements function getValues() { window.addEventListener("load", startup, false); @@ -113,6 +120,7 @@ function getValues() { let colorValue; let keepValue; + // Adds event listeners function startup() { // add eventlisteners sizeInput.addEventListener("input", updateFirst, false); @@ -124,6 +132,7 @@ function getValues() { keepInput2.addEventListener("input", updateFirst, false); } + // updates when input is interacted function updateFirst(event) { console.clear(); sizeValue = sizeInput.value; @@ -164,6 +173,7 @@ function getValues() { } } +// Update Button to refresh actual game 2 settings on the page. function updateSetVals() { // input elements let sizeInput = document.querySelector("#sizePick"); @@ -198,8 +208,11 @@ function updateSetVals() { // Game 2 +// Updates the game grid when the screen is resized window.onresize = setValues; +// Sets the values from the game 2 settings onto the game 2 +// page for the game grid and outputs function setValues() { //console.clear(); // getting local variables @@ -262,6 +275,9 @@ function setValues() { localStorage.setItem("cellSequence",cellSeqStr); // set toggle on localStorage.setItem("isClickOn","false"); + localStorage.setItem("pulseCount","1"); + localStorage.setItem("highScore","0") + localStorage.setItem("checkStatus","0"); // add onclick function to gameCells for (let row = 0; row < gridSize; row++) { @@ -277,18 +293,42 @@ function setValues() { if (isClickOn == "true") { //console.log("Click Game Cell is On!"); seqArr.push(cellId); - // call to console - if (isEqualSequence() == 1) { + // store cell id in cell sequence + sequenceStr = JSON.stringify(seqArr); + localStorage.setItem("cellSequence",sequenceStr); + + // call to console if cell and random sequence are equal + if (isEqualSequence() == 2) { console.log("Random and Cell are equal!"); + let count = localStorage.getItem("pulseCount"); + count++; + let scoreOutput = document.querySelector("#gameScore"); + scoreOutput.innerHTML = "Score: " + (count-1); + let highScoreOutput = document.querySelector("#highScore"); + let highScore = localStorage.getItem("highScore"); + if (count-1 > highScore) { + highScoreOutput.innerHTML = "High Score: " + (count-1); + } + localStorage.setItem("pulseCount",count); + enableStartLevelBtn(); + disableStartGameBtn(); + } else if (isEqualSequence() == 1) { + console.log("Random and Cell are equal so far!"); + disableStartGameBtn(); } else if (isEqualSequence() == 0) { console.log("Random and Cell are not equal!"); + let count = localStorage.getItem("pulseCount"); + count = 1; + let scoreOutput = document.querySelector("#gameScore"); + scoreOutput.innerHTML = "Score: " + (count-1); + localStorage.setItem("pulseCount",count); + enableStartGameBtn(); + toggleClickOff(); } console.log("Cell Id: " + cellId); console.log("Cell sequence: " + seqArr); } - // store cell id in cell sequence - sequenceStr = JSON.stringify(seqArr); - localStorage.setItem("cellSequence",sequenceStr); + } gridCell.onclick = clickCell; } @@ -297,6 +337,7 @@ function setValues() { localStorage.setItem("cellGridJS",cellRows); } +// Creates a random sequence of cells function makeSequence(iter) { //console.clear(); /* @@ -351,6 +392,7 @@ function makeSequence(iter) { console.log("Index sequence: " + indexSeqStr); } +// Updates a cell's color function updateCell(index,color) { //console.log("Updating cell: " + index); //get local variables @@ -380,6 +422,8 @@ function updateCell(index,color) { //console.log(cell); } +// Uses the random sequence to change each cell's color +// to create the illusion of pulses function pulseSequence() { console.log("Pulse Sequence!"); let indexSeq = localStorage.getItem("randomSequence"); @@ -408,67 +452,74 @@ function pulseSequence() { } } -function memoryGame() { - // start game - console.log("Start Game!"); - - - //disableStartGameBtn(); - //enableStartLevelBtn(); -} - +// Disables Start Game Button function disableStartGameBtn() { + console.log("Start Level Disabled!"); let startGameBtn = document.querySelector("#startGameBtn"); startGameBtn.disabled = true; startGameBtn.style.setProperty("background-color","gray"); } +// Enables Start Game Button function enableStartGameBtn() { + console.log("Start Game Enabled!"); let startGameBtn = document.querySelector("#startGameBtn"); startGameBtn.disabled = false; startGameBtn.style.setProperty("background-color","#007bff"); } +// Disables Start Level Button function disableStartLevelBtn() { console.log("Start Level Disabled!"); let startLevelBtn = document.querySelector("#startLevelBtn"); startLevelBtn.disabled = true; - startLevelBtn.style.setProperty("background-color","#gray"); + startLevelBtn.style.setProperty("background-color","gray"); } +// Enables Start Level Button function enableStartLevelBtn() { - + console.log("Start Level Enabled!"); let startLevelBtn = document.querySelector("#startLevelBtn"); startLevelBtn.disabled = false; startLevelBtn.style.setProperty("background-color","#007bff"); } +// Enables the Start Level Button +function memoryGame() { + // start game + console.log("Start Game!"); + disableStartGameBtn(); + enableStartLevelBtn(); +} + +// Actual function to call for the game 2 to start function startLevel() { // start level console.log("Start Level!"); - let count = 1; - toggleClickOn(); - - + let count = localStorage.getItem("pulseCount"); + toggleClickOff(); disableStartLevelBtn(); clearCellSequence(); makeSequence(count); pulseSequence(); - - getRandomSequence(); - getCellSequence(); + let delay = localStorage.getItem("time"); + console.log("Time delay: " + delay*count); + setTimeout(() => toggleClickOn(),delay*count*1000); } +// Allows the game cells to be clicked function toggleClickOn() { console.log("Click Set On!"); localStorage.setItem("isClickOn","true"); } +// Allows the game cells to be clicked function toggleClickOff() { console.log("Click Set Off!"); localStorage.setItem("isClickOn","false"); } +// Get the random sequence of cells function getRandomSequence() { let randomSeqStr = localStorage.getItem("randomSequence"); let randomSequence = JSON.parse(randomSeqStr); @@ -476,6 +527,7 @@ function getRandomSequence() { return randomSequence; } +// Get the cell sequence clicked by the user function getCellSequence() { let cellSeqStr = localStorage.getItem("cellSequence"); let cellSequence = JSON.parse(cellSeqStr); @@ -483,28 +535,31 @@ function getCellSequence() { return cellSequence; } +// Clear all the user clicked cell sequence function clearCellSequence() { let cellSequence = []; let cellSeqStr = JSON.stringify(cellSequence); localStorage.setItem("cellSequence",cellSeqStr); } +// Determines if random and cell sequences are equal to progress function isEqualSequence() { console.log("Equal Sequence?"); - let isEqual = 1; + // 0 = not equal, 1 = equal so far, 2 = all equal + let isEqual = 0; let randomSequence = getRandomSequence(); let cellSequence = getCellSequence(); let randomSize = randomSequence.length; let cellSize = cellSequence.length; - if (randomSize != cellSize) { - isEqual = 0; - } else { - for (let index = 0; index < cellSize; index++) { - let randomCell = randomSequence[index]; - let sequenceCell = cellSequence[index]; - if (randomCell != sequenceCell) { - isEqual = 0; - } + for (let index = 0; index < cellSize; index++) { + let randomCell = randomSequence[index]; + let sequenceCell = cellSequence[index]; + if (randomCell == sequenceCell && randomSize == cellSize) { + isEqual = 2; + } else if (randomCell == sequenceCell) { + isEqual = 1; + } else { + isEqual = 0; } } return isEqual; From 79f8a4125d7323aa2d117c845136557ec08b80b2 Mon Sep 17 00:00:00 2001 From: RGUD0 <114261602+RGUD0@users.noreply.github.com> Date: Thu, 14 Dec 2023 07:24:17 -0500 Subject: [PATCH 6/7] Fixed Box Width --- game2.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/game2.css b/game2.css index 1d8fe86..ed8e75c 100644 --- a/game2.css +++ b/game2.css @@ -57,13 +57,17 @@ button { } .box { + float: center; text-align: center; background-color: white; padding: 20px; width: 100%; + max-width: 500px; height: 100%; margin-top: 20px; margin-bottom: 20px; + margin-left: auto; + margin-right: auto; } .clearbox { From 99760c0c89bea1475d7875e5cd7a4bbb6f87d98f Mon Sep 17 00:00:00 2001 From: RGUD0 <114261602+RGUD0@users.noreply.github.com> Date: Thu, 14 Dec 2023 08:45:29 -0500 Subject: [PATCH 7/7] Difficulty Time + Title --- game2.html | 2 +- game2settings.html | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/game2.html b/game2.html index 1d6d599..f96602d 100644 --- a/game2.html +++ b/game2.html @@ -14,7 +14,7 @@
-

Memory Game

+

Copy Game

diff --git a/game2settings.html b/game2settings.html index 99a8cdd..a9bbdda 100644 --- a/game2settings.html +++ b/game2settings.html @@ -32,9 +32,9 @@

Difficulty Select

The duration decreases with difficulty.

- Easy - Medium - Hard + Easy 1s + Medium 0.5s + Hard 0.25s

Color Select