├── .DS_Store ├── .firebaserc ├── sounds ├── blue.mp3 ├── red.mp3 ├── green.mp3 ├── wrong.mp3 └── yellow.mp3 ├── Public ├── .DS_Store ├── sounds │ ├── blue.mp3 │ ├── red.mp3 │ ├── green.mp3 │ ├── wrong.mp3 │ └── yellow.mp3 ├── styles.css ├── index.html ├── 404.html └── game.js ├── firebase.json ├── README.md ├── styles.css ├── index.html ├── .gitignore └── game.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codermother/Simon-Game/HEAD/.DS_Store -------------------------------------------------------------------------------- /.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "projects": { 3 | "default": "simongame-v1" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /sounds/blue.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codermother/Simon-Game/HEAD/sounds/blue.mp3 -------------------------------------------------------------------------------- /sounds/red.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codermother/Simon-Game/HEAD/sounds/red.mp3 -------------------------------------------------------------------------------- /Public/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codermother/Simon-Game/HEAD/Public/.DS_Store -------------------------------------------------------------------------------- /sounds/green.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codermother/Simon-Game/HEAD/sounds/green.mp3 -------------------------------------------------------------------------------- /sounds/wrong.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codermother/Simon-Game/HEAD/sounds/wrong.mp3 -------------------------------------------------------------------------------- /sounds/yellow.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codermother/Simon-Game/HEAD/sounds/yellow.mp3 -------------------------------------------------------------------------------- /Public/sounds/blue.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codermother/Simon-Game/HEAD/Public/sounds/blue.mp3 -------------------------------------------------------------------------------- /Public/sounds/red.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codermother/Simon-Game/HEAD/Public/sounds/red.mp3 -------------------------------------------------------------------------------- /Public/sounds/green.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codermother/Simon-Game/HEAD/Public/sounds/green.mp3 -------------------------------------------------------------------------------- /Public/sounds/wrong.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codermother/Simon-Game/HEAD/Public/sounds/wrong.mp3 -------------------------------------------------------------------------------- /Public/sounds/yellow.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codermother/Simon-Game/HEAD/Public/sounds/yellow.mp3 -------------------------------------------------------------------------------- /firebase.json: -------------------------------------------------------------------------------- 1 | { 2 | "hosting": { 3 | "public": "public", 4 | "ignore": [ 5 | "firebase.json", 6 | "**/.*", 7 | "**/node_modules/**" 8 | ] 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Simon-Game 2 | A memory game of lights and sounds in which players must repeat random sequences of lights by pressing the colored buttons in the correct order. 3 | 4 | [Simon Game Link](https://simongame-v1.web.app/) 5 | -------------------------------------------------------------------------------- /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 | } 53 | -------------------------------------------------------------------------------- /Public/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 | } 53 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /Public/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 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | firebase-debug.log* 8 | firebase-debug.*.log* 9 | 10 | # Firebase cache 11 | .firebase/ 12 | 13 | # Firebase config 14 | 15 | # Uncomment this if you'd like others to create their own Firebase project. 16 | # For a team working on the same Firebase project(s), it is recommended to leave 17 | # it commented so all members can deploy to the same project(s) in .firebaserc. 18 | # .firebaserc 19 | 20 | # Runtime data 21 | pids 22 | *.pid 23 | *.seed 24 | *.pid.lock 25 | 26 | # Directory for instrumented libs generated by jscoverage/JSCover 27 | lib-cov 28 | 29 | # Coverage directory used by tools like istanbul 30 | coverage 31 | 32 | # nyc test coverage 33 | .nyc_output 34 | 35 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 36 | .grunt 37 | 38 | # Bower dependency directory (https://bower.io/) 39 | bower_components 40 | 41 | # node-waf configuration 42 | .lock-wscript 43 | 44 | # Compiled binary addons (http://nodejs.org/api/addons.html) 45 | build/Release 46 | 47 | # Dependency directories 48 | node_modules/ 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Optional REPL history 57 | .node_repl_history 58 | 59 | # Output of 'npm pack' 60 | *.tgz 61 | 62 | # Yarn Integrity file 63 | .yarn-integrity 64 | 65 | # dotenv environment variables file 66 | .env 67 | -------------------------------------------------------------------------------- /Public/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Page Not Found 7 | 8 | 23 | 24 | 25 |
26 |

404

27 |

Page Not Found

28 |

The specified file was not found on this website. Please check the URL for mistakes and try again.

29 |

Why am I seeing this?

30 |

This page was generated by the Firebase Command-Line Interface. To modify it, edit the 404.html file in your project's configured public directory.

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