diff --git a/Simon/Simon.css b/Simon/Simon.css new file mode 100644 index 00000000..93b27fb2 --- /dev/null +++ b/Simon/Simon.css @@ -0,0 +1,53 @@ +body { + text-align: center; + background-color: #011F3F; +} + +#level-title { + font-family: 'Press Start 2P', cursive; + font-size: 3rem; + margin: 5%; + color: #FEF2BF; +} + +.container { + display: block; + width: 50%; + margin: auto; + +} + +.btn { + margin: 25px; + display: inline-block; + height: 200px; + width: 200px; + border: 10px solid black; + border-radius: 20%; +} + +.game-over { + background-color: red; + opacity: 0.8; +} + +.red { + background-color: red; +} + +.green { + background-color: green; +} + +.blue { + background-color: blue; +} + +.yellow { + background-color: yellow; +} + +.pressed { + box-shadow: 0 0 20px white; + background-color: grey; +} \ No newline at end of file diff --git a/Simon/Simon.js b/Simon/Simon.js new file mode 100644 index 00000000..06655aed --- /dev/null +++ b/Simon/Simon.js @@ -0,0 +1,168 @@ +// let i = 1; +// let j = 0; +// let arr = []; +// let c = 0; +// let game = () => { +// level(i, c); +// }; +// let level = (y, z) => { +// document.querySelector("h1").innerHTML = "LEVEL 1"; +// let x1 = document.getElementById("green"); +// let x2 = document.getElementById("red"); +// let x3 = document.getElementById("yellow"); +// let x4 = document.getElementById("blue"); +// let j = 0; + +// let arr = []; +// let step = (z) => { +// let x = Math.ceil(Math.random() * 4); +// if (x == 1) { +// arr.push(`green`); +// x1.style.backgroundColor = "grey"; +// setTimeout(() => { +// x1.style.backgroundColor = "green"; +// }, 1000); +// } else if (x == 2) { +// arr.push(`red`); +// x2.style.backgroundColor = "grey"; +// setTimeout(() => { +// x2.style.backgroundColor = "red"; +// }, 1000); +// } else if (x == 3) { +// arr.push(`yellow`); +// x3.style.backgroundColor = "grey"; +// setTimeout(() => { +// x3.style.backgroundColor = "yellow"; +// }, 1000); +// } else { +// arr.push(`blue`); +// x4.style.backgroundColor = "grey"; +// setTimeout(() => { +// x4.style.backgroundColor = "blue"; +// }, 1000); +// } +// j++; +// }; +// step(j); +// if (j == i) { +// let c = 0; +// let isCorrect = (ev) => { +// if (ev.target.id == arr[c]) { +// c++; +// if (c == arr.length) { +// i++; +// j = 0; +// level(i + 1, j); +// return; +// } +// } else { +// document.querySelector("h1").innerHTML = "Game Over"; +// } +// }; +// x1.addEventListener("click", isCorrect); +// x2.addEventListener("click", isCorrect); +// x3.addEventListener("click", isCorrect); +// x4.addEventListener("click", isCorrect); +// } else { +// level(i, j + 1); +// } +// }; + +// document.addEventListener("keypress", game); +let i = 1; +let game = () => { + level(i); +}; +let level = (y) => { + document.querySelector("h1").innerHTML = "LEVEL" + i; + let x1 = document.getElementById("green"); + let x2 = document.getElementById("red"); + let x3 = document.getElementById("yellow"); + let x4 = document.getElementById("blue"); + let j = 0; + + let arr = []; + step = (j) => { + let x = Math.ceil(Math.random() * 4); + if (x == 1) { + arr.push(`green`); + x1.style.backgroundColor = "grey"; + setTimeout(() => { + x1.style.backgroundColor = "green"; + j++; + if (j < i) { + setTimeout(() => { + step(j); + }, 500); + } + }, 1000); + } else if (x == 2) { + arr.push(`red`); + x2.style.backgroundColor = "grey"; + setTimeout(() => { + x2.style.backgroundColor = "red"; + j++; + if (j < i) { + setTimeout(() => { + step(j); + }, 500); + } + }, 1000); + } else if (x == 3) { + arr.push(`yellow`); + x3.style.backgroundColor = "grey"; + setTimeout(() => { + x3.style.backgroundColor = "yellow"; + j++; + if (j < i) { + setTimeout(() => { + step(j); + }, 500); + } + }, 1000); + } else { + arr.push(`blue`); + x4.style.backgroundColor = "grey"; + setTimeout(() => { + x4.style.backgroundColor = "blue"; + }, 1000); + j++; + if (j < i) { + setTimeout(() => { + step(j); + }, 500); + } + } + }; + step(j); + let c = 0; + let isCorrect = (ev) => { + console.log(arr, c); + if (ev.target.id == arr[c]) { + c++; + if (c == arr.length) { + i++; + clearAllListners(); + level(i); + return; + } + } else { + document.querySelector("h1").innerHTML = "Game Over"; + return; + } + }; + + let clearAllListners = () => { + x1.removeEventListener("click", isCorrect); + x2.removeEventListener("click", isCorrect); + x3.removeEventListener("click", isCorrect); + x4.removeEventListener("click", isCorrect); + }; + + x1.addEventListener("click", isCorrect); + x2.addEventListener("click", isCorrect); + x3.addEventListener("click", isCorrect); + x4.addEventListener("click", isCorrect); +}; + +document.addEventListener("keypress", game); diff --git a/Simon/index.html b/Simon/index.html new file mode 100644 index 00000000..7e428a83 --- /dev/null +++ b/Simon/index.html @@ -0,0 +1,41 @@ + + + + + + Simon + + + + + +

Press A Key to Start

+
+
+ +
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+ + + + + \ No newline at end of file