diff --git a/Fronted Projects/Simon_Game/index.html b/Fronted Projects/Simon_Game/index.html new file mode 100644 index 00000000..9c72631a --- /dev/null +++ b/Fronted Projects/Simon_Game/index.html @@ -0,0 +1,22 @@ + + + + + + + Simon_Game + + + + +

Press any key to Start

+
+ + + + +
+ + + + \ No newline at end of file diff --git a/Fronted Projects/Simon_Game/index.js b/Fronted Projects/Simon_Game/index.js new file mode 100644 index 00000000..a2377bfe --- /dev/null +++ b/Fronted Projects/Simon_Game/index.js @@ -0,0 +1,112 @@ + +var colors = ["blue", "red", "yellow", "green"] +var gamePattern = [] +var userClickPattern = [] +var start = false +var levelNumber = 1 + +//This function genetrates random color and push that random color in array gamePattern +function colorGenerator() { + var randomNumber = Math.floor(Math.random() * 4) + var randomColor = colors[randomNumber] + gamePattern.push(randomColor) + // console.log(gamePattern) +} + + +$(document).on("keypress", function () { + if (!start) { + colorGenerator() + showGamePattern() + $("h1").text("Level-" + levelNumber) + start = true + // console.log(gamePattern) + } +}) + + +for (var i = 0; i < 4; i++) + document.querySelectorAll(".btn")[i].addEventListener("click", function (event) { + if (start) { + var userClickButtonColor = event.target.id + userClickPattern.push(userClickButtonColor) + // console.log(userClickPattern) + + animation(userClickButtonColor) + createSound(userClickButtonColor) + + if (sublist() && userClickPattern.length == gamePattern.length) { + levelNumber++ + userClickPattern = [] + colorGenerator() + showGamePattern() + $("h1").text("Level-" + levelNumber) + console.log(gamePattern) + } + else if (!sublist()) { + gameOver() + } + } + }) + + +// for animation when button is clicked +function animation(color) { + $("#" + color).addClass("animate") + + setTimeout(function () { + $("#" + color).removeClass("animate") + }, 90) +} + +function createSound(color) { + var audio = new Audio("sound/sounds_" + color + ".mp3") + audio.play() +} + + +function showGamePattern() { + var i = 0; + var pattern = setInterval(thisFunction, 1200) + + function thisFunction() { + if (i < gamePattern.length) { + var currentColor = gamePattern[i] + animation(currentColor) + createSound(currentColor) + i++ + } + else { + clearInterval(pattern) + } + } +} + +function sublist() { + for (var n = 0; n < userClickPattern.length; n++) { + if (userClickPattern[n] != gamePattern[n]) + return false + } + + return true + +} + +function gameOver() { + levelNumber = 1 + userClickPattern = [] + gamePattern = [] + start = false + + $("body").addClass("out") + $("h1").text("GAME OVER!🙁") + + setTimeout(function () { + $("body").removeClass("out") + $("h1").text("Press any key to restart") + }, 1000) + + + var audio = new Audio("sound/game_over.mp3") + audio.play() +} \ No newline at end of file diff --git a/Fronted Projects/Simon_Game/sound/game_over.mp3 b/Fronted Projects/Simon_Game/sound/game_over.mp3 new file mode 100644 index 00000000..1fd5b586 Binary files /dev/null and b/Fronted Projects/Simon_Game/sound/game_over.mp3 differ diff --git a/Fronted Projects/Simon_Game/sound/sounds_blue.mp3 b/Fronted Projects/Simon_Game/sound/sounds_blue.mp3 new file mode 100644 index 00000000..ae68cbae Binary files /dev/null and b/Fronted Projects/Simon_Game/sound/sounds_blue.mp3 differ diff --git a/Fronted Projects/Simon_Game/sound/sounds_green.mp3 b/Fronted Projects/Simon_Game/sound/sounds_green.mp3 new file mode 100644 index 00000000..896b9f96 Binary files /dev/null and b/Fronted Projects/Simon_Game/sound/sounds_green.mp3 differ diff --git a/Fronted Projects/Simon_Game/sound/sounds_red.mp3 b/Fronted Projects/Simon_Game/sound/sounds_red.mp3 new file mode 100644 index 00000000..e7738ae9 Binary files /dev/null and b/Fronted Projects/Simon_Game/sound/sounds_red.mp3 differ diff --git a/Fronted Projects/Simon_Game/sound/sounds_yellow.mp3 b/Fronted Projects/Simon_Game/sound/sounds_yellow.mp3 new file mode 100644 index 00000000..b360c086 Binary files /dev/null and b/Fronted Projects/Simon_Game/sound/sounds_yellow.mp3 differ diff --git a/Fronted Projects/Simon_Game/style.css b/Fronted Projects/Simon_Game/style.css new file mode 100644 index 00000000..60d3293b --- /dev/null +++ b/Fronted Projects/Simon_Game/style.css @@ -0,0 +1,49 @@ +body { + background-color: #263159; +} +h1{ + text-align:center; + color:beige; + font-size:5rem; + font-family: 'Secular One', sans-serif; +} +.container{ + display: block; + margin-left: auto; + margin-right: auto; + width: 40%; +} +.container1,.container2,.container3,.container4 { + padding: 45px; + margin: 17px; + display: inline-block; + border: solid bold; + border-radius: 15%; + border-color: rgb(19, 18, 18); + width: 200px; + height: 200px; + border-width:10px; +} +.container1{ + background-color: red; + cursor: pointer; +} +.container2{ + background-color:#FFBF00; + cursor: pointer; +} +.container3{ + background-color: #54B435; + cursor: pointer; +} +.container4{ + background-color: #2192FF; + cursor: pointer; +} +.animate{ + box-shadow:0 0 15px white; + background-color:rgb(24, 18, 18); +} +.out{ + background-color: rgb(131, 34, 34); +} \ No newline at end of file