diff --git a/Simon-GameChallenge/README.md b/Simon-GameChallenge/README.md new file mode 100644 index 000000000..e9491a6ee --- /dev/null +++ b/Simon-GameChallenge/README.md @@ -0,0 +1,25 @@ +
+

🎮 Simon Game

+
+ +- A web-based interactive **Simon Game**, where users test and improve their memory by repeating an ever-growing sequence of lights and sounds. + +### ✨ ***Features*** +- "🎶 **Colorful Light Patterns**: Buttons light up in a sequence that users must memorize and replicate." +- "📱 **Responsive Design**: The layout is optimized for various screen sizes and devices." +- "🎨 **Animations and Feedback**: Buttons are visually and audibly animated, providing instant feedback on user actions." +- "🔄 **Restart Option**: Users can end the game and restart the game manually in normal mode or automatically restart after a mistake in tricky mode." + +### 🔢 **Game Rules** +1. Watch the sequence of buttons lighting up. +2. Repeat the sequence by clicking the buttons or using keyboard keys. +3. With every correct sequence, an additional button is added. +4. The game ends when the user presses the wrong button. + +### 🔧 **Technologies Used** +- **HTML**: Provides the structure for the game's interface. +- **CSS**: Adds styles, animations, and ensures responsiveness. +- **JavaScript**: Implements game logic, sequence tracking, and animations. + +### 📡 **Live Demo** +Check out the live demo of the Simon Game: [Simon Game Challenge](https://simongame-challenge.netlify.app/) diff --git a/Simon-GameChallenge/game.js b/Simon-GameChallenge/game.js new file mode 100644 index 000000000..d7ba99cec --- /dev/null +++ b/Simon-GameChallenge/game.js @@ -0,0 +1,134 @@ +let gamePattern = []; +let userClickedPattern = []; +let buttonColours = ["red", "blue", "green", "yellow"]; +let started = false; +let level = 0; +let highScore = 0; +let gameMode = null; // Game mode is null initially + + +// Display the high score and level +$("#high-score").text(highScore); +$("#current-level").text(level); + +// Start Game Button Click Event +$("#start-button").on("click", function () { + if (!gameMode) { + alert("Please select a mode (Normal or Strict) to start the game!"); + return; + } + + if (!started) { + $("#level-title").text("Happy Gaming! - Simon"); + nextSequence(); + started = true; + $(this).hide(); + } +}); + +// End Game Button Click Event +$("#end-button").on("click", function () { + if (!started) return; // Do nothing if the game hasn't started + + // End the game by resetting all values + $("#level-title").text("Game Ended. Press Start to Restart"); + updateHighScore(); // Save high score before resetting + startOver(); // Reset the game state + $("#start-button").show(); // Show the Start button again +}); + +// Mode Selection (Normal/Strict) +$("input[name='mode']").on("change", function () { + gameMode = $(this).val(); + alert(`Game mode set to: ${gameMode.toUpperCase()}`); +}); + +// User Clicks on a Button +$(".btn").on("click", function () { + if (!started) return; + + let userChosenColour = $(this).attr("id"); + userClickedPattern.push(userChosenColour); + + playSound(userChosenColour); + animatePress(userChosenColour); + + checkAnswer(userClickedPattern.length - 1); +}); + +// Check User's Answer +function checkAnswer(currentLevel) { + if (gamePattern[currentLevel] === userClickedPattern[currentLevel]) { + if (userClickedPattern.length === gamePattern.length) { + setTimeout(() => { + nextSequence(); + }, 1000); + } + } else { + playSound("wrong"); + $("body").addClass("game-over"); + $("#level-title").text("Game Over. Press Start to Retry."); + + setTimeout(() => { + $("body").removeClass("game-over"); + }, 200); + + if (gameMode === "strict") { + updateHighScore(); + startOver(); // Strict mode resets the game completely + } else { + userClickedPattern = []; // Normal mode allows retrying the same sequence + } + } +} + +// Generate the Next Sequence +function nextSequence() { + userClickedPattern = []; + level++; + $("#current-level").text(level); + + let randomNumber = Math.floor(Math.random() * 4); + let randomChosenColour = buttonColours[randomNumber]; + gamePattern.push(randomChosenColour); + + $(`#${randomChosenColour}`).fadeOut(100).fadeIn(100); + playSound(randomChosenColour); +} + +// Play Sound Based on Button Colour +function playSound(name) { + let audio = new Audio(`sounds/${name}.mp3`); + audio.play(); +} + +// Animate Button Press +function animatePress(currentColour) { + $(`#${currentColour}`).addClass("pressed"); + setTimeout(() => { + $(`#${currentColour}`).removeClass("pressed"); + }, 100); +} + +// Start Over Function (Resets Game State) +function startOver() { + level = 0; + gamePattern = []; + userClickedPattern = []; + started = false; + $("#current-level").text(level); +} + +// Update High Score +function updateHighScore() { + if (level > highScore) { + highScore = level - 1; // Subtract 1 because the game increments the level before game over + $("#high-score").text(highScore); + } +} + +// Toggle Dark/Light Mode +$("#mode-toggle").on("click", function () { + $("body").toggleClass("dark-mode"); + $(this).toggleClass("dark-mode"); +}); diff --git a/Simon-GameChallenge/game.png b/Simon-GameChallenge/game.png new file mode 100644 index 000000000..eaab510c2 Binary files /dev/null and b/Simon-GameChallenge/game.png differ diff --git a/Simon-GameChallenge/index.html b/Simon-GameChallenge/index.html new file mode 100644 index 000000000..32c3a6068 --- /dev/null +++ b/Simon-GameChallenge/index.html @@ -0,0 +1,73 @@ + + + + + Simon + + + + + +

Press Start to Begin

+
+ +
+
+
+
+
+
+
+
+
+
+ + + +
+

Level: 0

+

High Score: 0

+ + +
+ + +
+ + + +
+ +
+

How to Play

+ +
+
+ + + + 🤖 + + + + + + + diff --git a/Simon-GameChallenge/sounds/blue.mp3 b/Simon-GameChallenge/sounds/blue.mp3 new file mode 100644 index 000000000..ae68cbae3 Binary files /dev/null and b/Simon-GameChallenge/sounds/blue.mp3 differ diff --git a/Simon-GameChallenge/sounds/green.mp3 b/Simon-GameChallenge/sounds/green.mp3 new file mode 100644 index 000000000..896b9f968 Binary files /dev/null and b/Simon-GameChallenge/sounds/green.mp3 differ diff --git a/Simon-GameChallenge/sounds/red.mp3 b/Simon-GameChallenge/sounds/red.mp3 new file mode 100644 index 000000000..e7738ae95 Binary files /dev/null and b/Simon-GameChallenge/sounds/red.mp3 differ diff --git a/Simon-GameChallenge/sounds/wrong.mp3 b/Simon-GameChallenge/sounds/wrong.mp3 new file mode 100644 index 000000000..5ece8fd76 Binary files /dev/null and b/Simon-GameChallenge/sounds/wrong.mp3 differ diff --git a/Simon-GameChallenge/sounds/yellow.mp3 b/Simon-GameChallenge/sounds/yellow.mp3 new file mode 100644 index 000000000..b360c086d Binary files /dev/null and b/Simon-GameChallenge/sounds/yellow.mp3 differ diff --git a/Simon-GameChallenge/styles.css b/Simon-GameChallenge/styles.css new file mode 100644 index 000000000..f1987be8b --- /dev/null +++ b/Simon-GameChallenge/styles.css @@ -0,0 +1,221 @@ +/* General Styles */ +body { + text-align: center; + background-color: #ecf2ec; + font-family: 'Press Start 2P', cursive; + margin: 0; + padding: 0; + transition: background-color 0.5s, color 0.5s; /* Smooth transition for mode change */ +} + +/* Dark Mode Styles */ +body.dark-mode { + background-color: #333; + color: #fff; +} + +#level-title { + font-size: 3rem; + margin-top: 5%; + color: #FEF2BF; +} + +.main-container { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + gap: 30px; + margin: 20px auto; + width: 80%; +} + +.container { + display: grid; + grid-template-columns: repeat(2, 200px); + grid-gap: 25px; +} + +.info-panel { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + background-color: #ebe1e1; + border: 1px solid #e0e0e0; + border-radius: 15px; + box-shadow: 0px 4px 8px rgba(221, 212, 212, 0.2); + padding: 20px; + width: 200px; + font-family: 'Arial', sans-serif; +} + +.info-panel p { + margin: 10px 0; +} + +.mode-selection { + margin: 10px 0; +} + +.mode-selection label { + margin-right: 10px; + font-size: 0.9rem; + cursor: pointer; +} + +.mode-selection input { + margin-right: 5px; +} + +#start-button { + padding: 10px 20px; + font-size: 1rem; + background-color: #82b182; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + margin-top: 10px; +} + +#start-button:hover { + background-color: #4cae4c; +} + +#end-button { + padding: 10px 20px; + font-size: 1rem; + background-color: #d9534f; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + margin-top: 10px; +} + +#end-button:hover { + background-color: #c9302c; +} + +.game-over { + background-color: red; + opacity: 0.8; +} + +.red { + background-color: rgb(226, 61, 61); +} + +.green { + background-color: rgb(105, 226, 105); +} + +.blue { + background-color: rgb(113, 113, 246); +} + +.yellow { + background-color: rgb(229, 229, 76); +} + +.btn { + height: 200px; + width: 200px; + border: 10px solid black; + border-radius: 20%; +} + +.pressed { + box-shadow: 0 0 20px white; + background-color: grey; +} + +#level-title { + font-family: 'Press Start 2P', cursive; + font-size: 2.5rem; + text-align: center; + color: white; + background: linear-gradient(90deg, #00eaff, #3a7bd5, #6a0dad, #00d2ff); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + animation: glow 3s infinite alternate; +} + +@keyframes glow { + 0% { + text-shadow: 0 0 8px rgba(7, 123, 149, 0.8), + 0 0 15px rgba(54, 89, 138, 0.6), + 0 0 20px rgba(152, 96, 192, 0.5); + } + 100% { + text-shadow: 0 0 12px rgba(0, 210, 255, 1), + 0 0 20px rgba(58, 123, 213, 0.8), + 0 0 25px rgba(106, 13, 173, 0.7); + } +} + +/* Robot Icon Link */ +#github-link { + position: fixed; + top: 0px; + left: 0px; + font-size: 3rem; + color: #333; + text-decoration: none; + transition: transform 0.3s ease; +} + +#robot-icon { + cursor: pointer; + font-size: 4rem; /* For emoji, adjust size */ +} + +#robot-icon:hover { + transform: scale(1.1); + color: #00bfff; /* Add a color change effect on hover */ +} + + +/* New Styles for "How to Play" Panel */ +.how-to-panel { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: left; + background-color: #f5f5f5; /* Light background for better readability */ + border: 1px solid #e0e0e0; + border-radius: 15px; + box-shadow: 0px 4px 8px rgba(200, 200, 200, 0.5); + padding: 20px; + width: 300px; + font-family: 'Arial', sans-serif; +} + +.how-to-panel h2 { + margin-bottom: 15px; + font-size: 1.2rem; + color: #333; +} + +.how-to-panel ul { + list-style-type: disc; + margin-left: 20px; +} + +.how-to-panel li { + margin: 5px 0; + font-size: 0.9rem; +} + +.how-to-panel li strong { + color: #007bff; +} + +.how-to-panel ul ul { + list-style-type: circle; + margin-left: 20px; +}