diff --git a/Number Guessing Game/NumberGuessingGame.html b/Number Guessing Game/NumberGuessingGame.html new file mode 100644 index 0000000..8f81470 --- /dev/null +++ b/Number Guessing Game/NumberGuessingGame.html @@ -0,0 +1,28 @@ + + + + + + + Number Guessing Game + + +
+

Number Guessing Game

+

Guess a number between 1 and 100

+

Total Score: 0

+

Current Round Score: 10

+ + + + +

+

+

+

+ +

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).

+
+ + + diff --git a/Number Guessing Game/script.js b/Number Guessing Game/script.js new file mode 100644 index 0000000..bf791c8 --- /dev/null +++ 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 new file mode 100644 index 0000000..2c2a39c --- /dev/null +++ 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 index 0588818..82c1a52 100644 --- a/index.html +++ b/index.html @@ -74,6 +74,10 @@

Last Played: None

In Painting Game, paint the canvas by dragging your mouse across the screen. Its simple really, but you can create some pretty cool art!
+ +
+ 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! +