├── README.md └── Simon Game Challenge ├── sounds ├── red.mp3 ├── blue.mp3 ├── green.mp3 ├── wrong.mp3 └── yellow.mp3 ├── styles.css ├── index.html └── game.js /README.md: -------------------------------------------------------------------------------- 1 | # Memory-game-javascript -------------------------------------------------------------------------------- /Simon Game Challenge/sounds/red.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mukesh-Uchiha/Memory-game-javascript/HEAD/Simon Game Challenge/sounds/red.mp3 -------------------------------------------------------------------------------- /Simon Game Challenge/sounds/blue.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mukesh-Uchiha/Memory-game-javascript/HEAD/Simon Game Challenge/sounds/blue.mp3 -------------------------------------------------------------------------------- /Simon Game Challenge/sounds/green.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mukesh-Uchiha/Memory-game-javascript/HEAD/Simon Game Challenge/sounds/green.mp3 -------------------------------------------------------------------------------- /Simon Game Challenge/sounds/wrong.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mukesh-Uchiha/Memory-game-javascript/HEAD/Simon Game Challenge/sounds/wrong.mp3 -------------------------------------------------------------------------------- /Simon Game Challenge/sounds/yellow.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mukesh-Uchiha/Memory-game-javascript/HEAD/Simon Game Challenge/sounds/yellow.mp3 -------------------------------------------------------------------------------- /Simon Game Challenge/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | text-align: center; 3 | background-color: #011F3F; 4 | } 5 | 6 | #level-title { 7 | font-family: 'Press Start 2P', cursive; 8 | font-size: 3rem; 9 | margin: 5%; 10 | color: #FEF2BF; 11 | } 12 | 13 | .container { 14 | display: block; 15 | width: 50%; 16 | margin: auto; 17 | } 18 | 19 | .btn { 20 | margin: 25px; 21 | display: inline-block; 22 | height: 200px; 23 | width: 200px; 24 | border: 10px solid black; 25 | border-radius: 20%; 26 | } 27 | 28 | .game-over { 29 | background-color: red; 30 | opacity: 0.8; 31 | } 32 | 33 | .red { 34 | background-color: red; 35 | } 36 | 37 | .green { 38 | background-color: green; 39 | } 40 | 41 | .blue { 42 | background-color: blue; 43 | } 44 | 45 | .yellow { 46 | background-color: yellow; 47 | } 48 | 49 | .pressed { 50 | box-shadow: 0 0 20px white; 51 | background-color: grey; 52 | } -------------------------------------------------------------------------------- /Simon Game Challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Simon 7 | 8 | 9 | 10 | 11 | 12 |

Press A Key to Start

13 |
14 |
15 | 16 |
17 | 18 |
19 | 20 |
21 | 22 |
23 |
24 | 25 |
26 | 27 |
28 | 29 |
30 |
31 | 32 |
33 | 34 |
35 | 36 |
37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /Simon Game Challenge/game.js: -------------------------------------------------------------------------------- 1 | var buttonColours = ["red", "blue", "green", "yellow"]; 2 | var gamePattern = []; 3 | var userClickedPattern = []; 4 | 5 | var level = 0; 6 | var start = false; 7 | 8 | $(document).keydown(function() { 9 | if (!start) { 10 | $("#level-title").text("Level" + level); 11 | 12 | nextSequence(); 13 | start = true; 14 | } 15 | }); 16 | 17 | 18 | 19 | $(".btn").click(function() { 20 | var userChosenColour = $(this).attr("id") 21 | userClickedPattern.push(userChosenColour); 22 | console.log(userClickedPattern); 23 | playSound(userChosenColour); 24 | animatePress(userChosenColour) 25 | checkAnswer(userClickedPattern.length - 1) 26 | }) 27 | 28 | function checkAnswer(currentLevel) { 29 | if (gamePattern[currentLevel] === userClickedPattern[currentLevel]) { 30 | console.log("Success"); 31 | if (userClickedPattern.length === gamePattern.length) { 32 | setTimeout(function() { 33 | nextSequence(); 34 | }, 1000); 35 | } 36 | } else { 37 | console.log("Failed") 38 | $("#level-title").text("Game Over, Press Any Key to Restart"); 39 | $("body").addClass("game-over").fadeIn(50); 40 | setTimeout(function() { 41 | $("body").removeClass("game-over"); 42 | }, 200); 43 | 44 | 45 | var sound = new Audio("sounds/wrong.mp3"); 46 | sound.play(); 47 | 48 | startOver(); 49 | } 50 | } 51 | 52 | function nextSequence() { 53 | userClickedPattern = []; 54 | 55 | level++; 56 | $("#level-title").text("Level " + level); 57 | var randomNumber = Math.floor(Math.random() * 4) 58 | var randomChosenColour = buttonColours[randomNumber]; 59 | console.log(randomChosenColour); 60 | gamePattern.push(randomChosenColour); 61 | $("#" + randomChosenColour).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100) 62 | playSound(randomChosenColour); 63 | } 64 | 65 | function playSound(name) { 66 | var sound = new Audio("sounds/" + name + ".mp3"); 67 | sound.play(); 68 | } 69 | 70 | function animatePress(currentColor) { 71 | $("#" + currentColor).addClass("pressed"); 72 | 73 | 74 | setTimeout(function() { 75 | $("#" + currentColor).removeClass("pressed"); 76 | }, 100); 77 | } 78 | 79 | function startOver() { 80 | gamePattern = []; 81 | level = 0; 82 | start = false; 83 | 84 | 85 | } 86 | --------------------------------------------------------------------------------