diff --git a/Games/capital-game/README.md b/Games/capital-game/README.md new file mode 100644 index 0000000000..05e5831b51 Binary files /dev/null and b/Games/capital-game/README.md differ diff --git a/Games/capital-game/assets/Australia.jpeg b/Games/capital-game/assets/Australia.jpeg new file mode 100644 index 0000000000..b405466cf7 Binary files /dev/null and b/Games/capital-game/assets/Australia.jpeg differ diff --git a/Games/capital-game/assets/Bhutan.jpeg b/Games/capital-game/assets/Bhutan.jpeg new file mode 100644 index 0000000000..f25e93699c Binary files /dev/null and b/Games/capital-game/assets/Bhutan.jpeg differ diff --git a/Games/capital-game/assets/Brazil.jpeg b/Games/capital-game/assets/Brazil.jpeg new file mode 100644 index 0000000000..c6ad8e7e98 Binary files /dev/null and b/Games/capital-game/assets/Brazil.jpeg differ diff --git a/Games/capital-game/assets/Canada.jpeg b/Games/capital-game/assets/Canada.jpeg new file mode 100644 index 0000000000..4af403798a Binary files /dev/null and b/Games/capital-game/assets/Canada.jpeg differ diff --git a/Games/capital-game/assets/France.jpeg b/Games/capital-game/assets/France.jpeg new file mode 100644 index 0000000000..7eee27d38f Binary files /dev/null and b/Games/capital-game/assets/France.jpeg differ diff --git a/Games/capital-game/assets/Germany.jpeg b/Games/capital-game/assets/Germany.jpeg new file mode 100644 index 0000000000..0bb99eab10 Binary files /dev/null and b/Games/capital-game/assets/Germany.jpeg differ diff --git a/Games/capital-game/assets/India.jpeg b/Games/capital-game/assets/India.jpeg new file mode 100644 index 0000000000..15342b4d8a Binary files /dev/null and b/Games/capital-game/assets/India.jpeg differ diff --git a/Games/capital-game/assets/Japan.jpeg b/Games/capital-game/assets/Japan.jpeg new file mode 100644 index 0000000000..46fce3ec65 Binary files /dev/null and b/Games/capital-game/assets/Japan.jpeg differ diff --git a/Games/capital-game/assets/Nepal.jpeg b/Games/capital-game/assets/Nepal.jpeg new file mode 100644 index 0000000000..140f4d85e2 Binary files /dev/null and b/Games/capital-game/assets/Nepal.jpeg differ diff --git a/Games/capital-game/assets/Wallpaper.jpeg b/Games/capital-game/assets/Wallpaper.jpeg new file mode 100644 index 0000000000..8c10596279 Binary files /dev/null and b/Games/capital-game/assets/Wallpaper.jpeg differ diff --git a/Games/capital-game/assets/capital-game-screenshot (1).png b/Games/capital-game/assets/capital-game-screenshot (1).png new file mode 100644 index 0000000000..4dea59dec4 Binary files /dev/null and b/Games/capital-game/assets/capital-game-screenshot (1).png differ diff --git a/Games/capital-game/assets/capital-game-screenshot (2).png b/Games/capital-game/assets/capital-game-screenshot (2).png new file mode 100644 index 0000000000..4e974b0fbd Binary files /dev/null and b/Games/capital-game/assets/capital-game-screenshot (2).png differ diff --git a/Games/capital-game/index.html b/Games/capital-game/index.html new file mode 100644 index 0000000000..f00cc93026 --- /dev/null +++ b/Games/capital-game/index.html @@ -0,0 +1,38 @@ + + + + + + + + + Capital_Game + + + +
+
+
+

Guess the Capital!

+
+
+ +
+
+

+
+
+ + +
+
+ + +
+
+
+
+ + + + diff --git a/Games/capital-game/script.js b/Games/capital-game/script.js new file mode 100644 index 0000000000..3ba499c117 --- /dev/null +++ b/Games/capital-game/script.js @@ -0,0 +1,105 @@ +let selectedFlag = {}; +let attemptCount = 0; +const maxAttempts = 8; // You can change this value to set a different maximum number of attempts + +const flagDisplay = document.getElementById("flag"); +const countryDisplay = document.getElementById("country"); +const guessInput = document.getElementById("input"); +const submitBtn = document.getElementById("submit"); +const nextBtn = document.getElementById("next"); +const resultDiv = document.getElementById("result"); + +const flags = [ + { capital: "Canberra", country: "Australia", flag: "assets/Australia.jpeg" }, + { capital: "Brasilia", country: "Brazil", flag: "assets/Brazil.jpeg" }, + { capital: "Ottawa", country: "Canada", flag: "assets/Canada.jpeg" }, + { capital: "Paris", country: "France", flag: "assets/France.jpeg" }, + { capital: "Berlin", country: "Germany", flag: "assets/Germany.jpeg" }, + { capital: "Tokyo", country: "Japan", flag: "assets/Japan.jpeg" }, + { capital: "Thimphu", country: "Bhutan", flag: "assets/Bhutan.jpeg" }, + { capital: "New Delhi", country: "India", flag: "assets/India.jpeg" }, + { capital: "Kathmandu", country: "Nepal", flag: "assets/Nepal.jpeg" } +]; + +let availableFlags = [...flags]; + +function initializeGame() { + // Reset attempt count and available flags at the beginning of the game + attemptCount = 0; + availableFlags = [...flags]; + startNewRound(); +} + +function startNewRound() { + if (attemptCount >= maxAttempts || availableFlags.length === 0) { + endGame(); + return; + } + // Select a random flag from the available list + const randomIndex = Math.floor(Math.random() * availableFlags.length); + selectedFlag = availableFlags.splice(randomIndex, 1)[0]; + + // Display the flag image + flagDisplay.src = selectedFlag.flag; + // Display country name + countryDisplay.innerText = selectedFlag.country; + + // Clear input field and result + guessInput.value = ""; + resultDiv.textContent = ""; + + toggleButtons(false); +} + +function checkGuess() { + const guess = guessInput.value.trim(); + + // Validate the guess + if (!guess) { + alert("Please enter an answer."); + return; + } + + // Convert both guess and selected capital to lowercase for comparison + const guessLowerCase = guess.toLowerCase(); + const capitalLowerCase = selectedFlag.capital.toLowerCase(); + + // Check if the guess is correct + if (guessLowerCase === capitalLowerCase) { + alert("Congratulations! You guessed correctly."); + } else { + alert(`Incorrect. The capital city is ${selectedFlag.capital}.`); + } + + + guessInput.value = ""; + attemptCount++; + toggleButtons(true); + startNewRound(); +} + +function handleNext() { + startNewRound(); +} + +function endGame() { + // Disable input and buttons + guessInput.disabled = true; + submitBtn.disabled = true; + nextBtn.disabled = true; + + // Show final message + alert("Game Over! Thanks for playing."); +} + +function toggleButtons(enableNext) { + submitBtn.disabled = enableNext; + nextBtn.disabled = !enableNext; +} + +// Initialize the game +initializeGame(); + +// Event listeners +submitBtn.addEventListener("click", checkGuess); +nextBtn.addEventListener("click", handleNext); diff --git a/Games/capital-game/style.css b/Games/capital-game/style.css new file mode 100644 index 0000000000..14d5c5d22a --- /dev/null +++ b/Games/capital-game/style.css @@ -0,0 +1,112 @@ + +#container{ + width: 100%; + height: 110vh; + background-image: url("assets/Wallpaper.jpeg"); + display: flex; + align-items: center; + justify-content: center; +} +#main { + background-color: rgba(255, 255, 255, 0.9); + width: 54%; + height: 56%; + border: 2px solid rgb(6, 3, 18); + border-radius: 15px; + border-width: 3px; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6); + margin-top: 20px; + margin-bottom: 20px; +} +#heading { + + color: rgb(6, 3, 18); + width: 100%; + display: flex; + justify-content: center; + margin-top: 0.05vmax; + margin-bottom: 0.05vmax; +} +/*Flag*/ +#Flag{ + + text-align: center; +display: flex; +justify-content: space-evenly; + +} +#Flag img{ + height: 10vmax; + max-width: 50%; +} +/*Country*/ +#Country{ + text-align: center; + + display: flex; + + justify-content: space-evenly; + font-size: 1.5vmax; + text-align: center; + height: 3vmax; + color: rgb(6, 3, 18); + + +} +/*ANSWER*/ +#answer{ + color: rgb(6, 3, 18); + font-size: 1.75vmax; + text-align: center; + border-radius: 0.5vmax; + height: 2.5vmax; + padding: 0.5vmax; +} +/*BUTTON*/ +#button{ + padding: 0.5vmax; + text-align: center; +} + +#button button{ + font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + height: 3vmax; + width: 5.1vmax; + font-size: 1.15vmax; + text-align: center; + border-radius: 0.5vmax; + border: none; + background-color:rgb(6, 3, 18); + color:white; + cursor: pointer; + transition: background-color 0.3s; +} +#button button:hover { + background-color:rgb(49,43,75); +} +#result { + + text-align: center; + font-weight: 600; + color: #333; + padding: 0.5vm; + margin-bottom: 25px; + } +@media (max-width: 576px) { + #main { + padding: 20px; + } + + #heading h1 { + font-size: 1.2em; + } + + #output{ + font-size: 1.5vmax; + } + + #picture img{ + height: 25vmax; + } +} +