NEW GAME!

drocks1234 · May 16, 2023 · daa93df · daa93df
1 parent 92ed2b4
commit daa93df
Show file tree

Hide file tree

Showing 4 changed files with 250 additions and 1 deletion.
diff --git a/Number Guessing Game/NumberGuessingGame.html b/Number Guessing Game/NumberGuessingGame.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Number Guessing Game</title>
+</head>
+<body>
+    <div id="gameContainer">
+        <h1>Number Guessing Game</h1>
+        <p>Guess a number between 1 and 100</p>
+        <p id="totalScoreContainer">Total Score: 0</p> 
+        <p id="roundScoreContainer" class="roundScore">Current Round Score: 10</p>
+        <label for="guessField">Guess a number:</label> 
+        <input type="number" id="guessField" min="1" max="100" class="guessField">
+        <button id="submitGuess" class="guessSubmit">Submit Guess</button>
+        <input type="range" min="1" max="100" value="50" class="slider" id="myRange" disabled aria-label="Slider indicating closeness to the correct number">
+        <p id="resultContainer" class="guesses"></p>
+        <p id="timerContainer"></p>
+        <p class="lastResult"></p>
+        <p class="lowOrHi"></p>
+        <button id="resetButton" class="hidden">Start New Game</button>
+        <p id="infoText">Guess a number between 1 and 100. The slider indicates how close you are to the correct number - red is hot (close) and blue is cold (far).</p>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Number Guessing Game/script.js b/Number Guessing Game/script.js
@@ -0,0 +1,91 @@
+let randomNumber = Math.floor(Math.random() * 100) + 1;
+
+let guessSubmit = document.querySelector('#submitGuess');
+let guessField = document.querySelector('#guessField');
+let resultContainer = document.querySelector('#resultContainer');
+let timerContainer = document.querySelector('#timerContainer');
+let resetButton = document.querySelector('#resetButton');
+let totalScoreContainer = document.querySelector('#totalScoreContainer'); // Reference to the new total score container
+let myRange = document.querySelector('#myRange');
+
+
+let guessCount = 1;
+let totalScore = 0;
+let timer;
+
+let roundScoreContainer = document.querySelector('#roundScoreContainer'); // Element to display current round's score
+let score = 10; // Maximum score for each round
+
+function checkGuess() {
+    let userGuess = Number(guessField.value);
+    if (userGuess === randomNumber) {
+        displayMessage('Congratulations! You got it right!', 'green');
+        totalScore += score; // Add the remaining points to the total score
+        totalScoreContainer.textContent = 'Total Score: ' + totalScore; // Update total score on screen
+        roundScoreContainer.textContent = ''; // Clear round score
+        endGame();
+    } else {
+        if (score > 1) { // Only subtract a point if there are points left
+            score--; // Subtract one point for an incorrect guess
+            roundScoreContainer.textContent = 'Current Round Score: ' + score; // Update round score on screen
+        }
+        if (userGuess < randomNumber) {
+            displayMessage('Last guess was too low!', 'red');
+        } else if(userGuess > randomNumber) {
+            displayMessage('Last guess was too high!', 'red');
+        }
+    }
+    let sliderValue = 100 - Math.abs(userGuess - randomNumber);
+    myRange.value = sliderValue;
+
+    guessCount++;
+    guessField.value = '';
+    guessField.focus();
+}
+
+guessSubmit.addEventListener('click', checkGuess);
+
+function displayMessage(msg, color) {
+    resultContainer.textContent = msg;
+    resultContainer.style.color = color;
+    }
+
+function endGame() {
+    guessField.disabled = true;
+    guessSubmit.disabled = true;
+    resetButton.classList.remove('hidden'); // Show the button by removing 'hidden' class
+    clearInterval(timer);
+    }
+
+    resetButton.addEventListener('click', resetGame);
+
+function resetGame() {
+    guessCount = 1;
+    score = 10; // Reset the score for the new round
+    roundScoreContainer.textContent = 'Current Round Score: ' + score; // Display initial score for new round
+    guessField.disabled = false;
+    guessSubmit.disabled = false;
+    guessField.value = '';
+    guessField.focus();
+    resetButton.classList.add('hidden'); // Hide the button by adding 'hidden' class
+    resultContainer.textContent = '';
+    timerContainer.textContent = '';
+    randomNumber = Math.floor(Math.random() * 100) + 1;
+    startTimer();
+    }
+
+function startTimer() {
+    let time = 60; // 60 seconds
+    timer = setInterval(function() {
+    if (time <= 0) {
+    clearInterval(timer);
+    displayMessage('Time is up! Try again.', 'red');
+    endGame();
+    } else {
+    timerContainer.textContent = `Remaining time: ${time} seconds`;
+    time--;
+    }
+    }, 1000);
+    }
+
+startTimer();
diff --git a/Number Guessing Game/style.css b/Number Guessing Game/style.css
@@ -0,0 +1,119 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
+
+body {
+    background-color: #000;
+    font-family: 'Poppins', sans-serif;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    color: #fff;
+}
+
+#gameContainer {
+    background: linear-gradient(135deg, #202020 0%, #0b0b0b 100%);
+    padding: 20px;
+    border-radius: 15px;
+    box-shadow: 0px 0px 15px 0px rgba(255,255,255,0.1);
+    text-align: center;
+    max-width: 500px;
+    width: 90%;
+    animation: fadeIn 0.5s ease-in-out;
+}
+
+@keyframes fadeIn {
+    from {opacity: 0;}
+    to {opacity: 1;}
+}
+
+#guessField {
+    margin-top: 20px;
+    padding: 10px;
+    font-size: 16px;
+    background-color: #fff;
+    color: #000;
+    border: none;
+    border-radius: 30px;
+    width: 80%;
+}
+
+#submitGuess, #resetButton {
+    margin-top: 20px;
+    padding: 10px 20px;
+    font-size: 16px;
+    background-color: #000;
+    color: #fff;
+    border: none;
+    border-radius: 15px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.2);
+    width: 100%;
+}
+
+#submitGuess:hover, #resetButton:hover {
+    background-color: #fff;
+    color: #000;
+    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.2);
+}
+
+#resultContainer {
+    margin-top: 20px;
+    padding: 10px;
+    font-size: 18px;
+    color: #fff;
+}
+
+/* Responsive Design */
+@media (max-width: 500px) {
+    body {
+        font-size: 16px;
+    }
+
+    #guessField {
+        font-size: 14px;
+    }
+
+    #submitGuess, #resetButton {
+        font-size: 14px;
+    }
+}
+
+.hidden {
+    display: none;
+}
+
+
+.slider {
+    -webkit-appearance: none;
+    appearance: none;
+    margin-top: 20px;
+    width: 100%;
+    height: 15px;
+    border-radius: 5px;
+    background: linear-gradient(to right, blue, red);
+    outline: none;
+    opacity: 0.7;
+    -webkit-transition: .2s;
+    transition: opacity .2s;
+}
+
+.slider::-webkit-slider-thumb {
+    -webkit-appearance: none; 
+    appearance: none;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    background: #8a8a8a;
+    cursor: pointer;
+}
+
+
+#infoText {
+    color: gray;
+    font-size: 14px;
+    margin-top: 20px;
+    text-align: center;
+}
diff --git a/index.html b/index.html
@@ -74,6 +74,10 @@ <h2>Last Played: <span id="last-played-game">None</span></h2>
         <div class="game-description">
             In Painting Game, paint the canvas by dragging your mouse across the screen. Its simple really, but you can create some pretty cool art!
         </div>
+        <button onclick="loadNumberGuessingGame()">Number Guessing Game</button>
+        <div class="game-description">
+            In Number Guessing Game, your objective is to guess a secret number between 1 and 100. your score decreases with each incorrect guess. Try to get the highest score possible!
+        </div>
 	</section>
 
 	<script>
@@ -98,6 +102,11 @@ <h2>Last Played: <span id="last-played-game">None</span></h2>
 			window.location.href = "Painting Game/PaintingGame.html";
 		}
 
+        function loadNumberGuessingGame() {
+            localStorage.setItem("lastPlayed", "Number Guessing Game");
+            window.location.href = "Number Guessing Game/NumberGuessingGame.html";
+        }
+
 
         function playAgain() {
             const lastPlayed = localStorage.getItem("lastPlayed");
@@ -108,7 +117,9 @@ <h2>Last Played: <span id="last-played-game">None</span></h2>
                 loadMoneyTycoonGame();
             } else if (lastPlayed === "Painting Game") {
 				loadPaintingGame();
-			}
+			} else if (lastPlayed === "Number Guessing Game") {
+                loadNumberGuessingGame();
+            }
 		}
 	</script>
 </body>