diff --git a/Games/Am_I_the_number/README.md b/Games/Am_I_the_number/README.md new file mode 100644 index 0000000000..ea438575c0 --- /dev/null +++ b/Games/Am_I_the_number/README.md @@ -0,0 +1,22 @@ +# **AM I the number** + +--- + +
+ +## **Description 📃** +- think of a number and match if the number you thought of matches the number to be guessed under 10 tries. + + +## **How to play? 🕹ī¸** +- enter a number in the guess field and press submit to check whether the number you thought of matches the number. + + +
+ + +
+ + + +
diff --git a/Games/Am_I_the_number/index.html b/Games/Am_I_the_number/index.html new file mode 100644 index 0000000000..fe4f530726 --- /dev/null +++ b/Games/Am_I_the_number/index.html @@ -0,0 +1,29 @@ + + + + + + Am I the number? + + + + +
+

Number guessing game

+

Try and guess a random number between 1 to 100

+

You have 10 attempts to get it correct

+
+
+ Think of a number + + + +
+

Previous guesses:

+

Guesses remaining: 10

+

+
+
+ + + diff --git a/Games/Am_I_the_number/script.js b/Games/Am_I_the_number/script.js new file mode 100644 index 0000000000..e7430dcaaf --- /dev/null +++ b/Games/Am_I_the_number/script.js @@ -0,0 +1,97 @@ +document.addEventListener('DOMContentLoaded', function () { + let randomNumber = parseInt(Math.random() * 100 + 1); + + const submit = document.querySelector('#subt'); + const userInput = document.querySelector('#guessField'); + const guessSlot = document.querySelector('.guesses'); + const remaining = document.querySelector('.lastResult'); + const lowOrHi = document.querySelector('.lowOrHi'); + const startOver = document.querySelector('.resultParas'); + + const p = document.createElement('p'); + + let prevGuess = []; + let numGuess = 1; + + let playGame = true; + + if (playGame) { + submit.addEventListener('click', function (e) { + e.preventDefault(); + const guess = parseInt(userInput.value); + console.log(guess); + validateGuess(guess); + }); + } + + function validateGuess(guess) { + if (isNaN(guess)) { + alert('Please enter a valid number'); + } else if (guess < 1) { + alert('Please enter a number more than 1'); + } else if (guess > 100) { + alert('Please enter a number less than 100'); + } else { + prevGuess.push(guess); + if (numGuess === 10) { + displayGuess(guess); + displayMessage(`Game Over. Random number was ${randomNumber}`); + endGame(); + } else { + displayGuess(guess); + checkGuess(guess); + } + } + } + + function checkGuess(guess) { + if (guess === randomNumber) { + displayMessage(`You guessed it right`); + endGame(); + } else if (guess < randomNumber) { + displayMessage(`Number is TOO low`); + } else if (guess > randomNumber) { + displayMessage(`Number is TOO high`); + } + } + + function displayGuess(guess) { + userInput.value = ''; + guessSlot.innerHTML += `${guess}, `; + numGuess++; + remaining.innerHTML = `${11 - numGuess}`; + } + + function displayMessage(message) { + lowOrHi.innerHTML = `

${message}

`; + } + + function endGame() { + userInput.value = ''; + userInput.setAttribute('disabled', ''); + if (!document.querySelector('#newGame')) { + p.classList.add('button'); + p.innerHTML = `

Start new Game

`; + startOver.appendChild(p); + } + playGame = false; + newGame(); + } + + function newGame() { + const newGameButton = document.querySelector('#newGame'); + newGameButton.addEventListener('click', function (e) { + randomNumber = parseInt(Math.random() * 100 + 1); + prevGuess = []; + numGuess = 1; + guessSlot.innerHTML = ''; + remaining.innerHTML = `${11 - numGuess}`; + userInput.removeAttribute('disabled'); + lowOrHi.innerHTML = ''; + startOver.removeChild(p); + + playGame = true; + }); + } + }); + \ No newline at end of file diff --git a/Games/Am_I_the_number/style.css b/Games/Am_I_the_number/style.css new file mode 100644 index 0000000000..88b205f721 --- /dev/null +++ b/Games/Am_I_the_number/style.css @@ -0,0 +1,77 @@ +.body { + font-family: Arial, sans-serif; + background-color: #cff6f9; + display: flex; + justify-content: center; + align-items: center; + height: 600vh; + margin: 0; +} +#wrapper { + background-color: #d4f0fb; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + text-align: center; + width: 35%; + box-sizing: border-box; + margin-left: 32%; + margin-top: 10%; + margin-right:35%; +} +h1 { + color: #333; + margin-bottom: 10px; +} +p { + color: #666; + margin: 10px 0; +} +.form { + display: flex; + flex-direction: column; + align-items: center; +} +label { + margin-bottom: 10px; +} +.guessField { + padding: 10px; + border: 1px solid #ccc; + border-radius: 4px; + margin-top:10px; + margin-bottom: 10px; + width: 80%; + box-sizing: border-box; +} +.guessSubmit { + padding: 10px 20px; + border: none; + border-radius: 4px; + background-color: #007bff; + color: white; + cursor: pointer; +} +.guessSubmit:hover { + background-color: #0056b3; +} +.resultParas { + margin-top: 20px; +} +.resultParas p { + margin: 5px 0; +} +.lowOrHi h2 { + color: #ff0000; +} +.button { + background-color: #007bff; + color: white; + padding: 10px 20px; + border-radius: 4px; + cursor: pointer; + margin-top: 20px; +} +.button:hover { + background-color: #0056b3; +} \ No newline at end of file diff --git a/README.md b/README.md index d123b6676f..cb403d176b 100644 --- a/README.md +++ b/README.md @@ -330,6 +330,7 @@ This repository also provides one such platforms where contributers come over an |[Carrom Board Game](https://github.com/kunjgit/GameZone/tree/main/Games/carrom)| | [Modulo_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Modulo_Game) | | [Airhockey_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Airhockey_Game) | +| [Am_I_the_number](https://github.com/kunjgit/GameZone/tree/main/Games/Am_I_the_number) |
diff --git a/assets/images/amithenumber.png b/assets/images/amithenumber.png new file mode 100644 index 0000000000..8b697febe8 Binary files /dev/null and b/assets/images/amithenumber.png differ