diff --git a/Games/Wheel_of_fortune/README.md b/Games/Wheel_of_fortune/README.md new file mode 100644 index 0000000000..0065ff75da --- /dev/null +++ b/Games/Wheel_of_fortune/README.md @@ -0,0 +1,9 @@ +### Wheel_of_fortune + +wheel of fortune is a simple game where users have to spin the wheel +and they should make correct guess based on given hints. + +## points + +for each correct guess the players are awarded with 50 points +for each wrong guess the points are deducted \ No newline at end of file diff --git a/Games/Wheel_of_fortune/design.css b/Games/Wheel_of_fortune/design.css new file mode 100644 index 0000000000..0c59e57432 --- /dev/null +++ b/Games/Wheel_of_fortune/design.css @@ -0,0 +1,130 @@ +/* Reset some default styles */ +body, h1, p { + margin: 0; + padding: 0; +} + +/* Style the container */ +.container { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background-color: #f2f2f2; +} + +/* Style the game board */ +.game { + background-color: #fff; + border: 1px solid #ccc; + padding: 20px; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + text-align: center; +} + +/* Style the wheel */ +.wheel { + width: 200px; + height: 200px; + background-color: #ffd700; + border: 5px solid #ff9900; + border-radius: 50%; + margin: 0 auto 20px; + position: relative; + overflow: hidden; +} + +/* Modify the animation duration to make it spin very fast for 3 seconds */ +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +.wheel.spinning { + animation: spin 0.25s linear infinite; /* Remove "infinite" to spin only once */ +} + +/* Style the wheel segments */ +.segment { + position: absolute; + width: 0; + height: 0; + border-left: 100px solid transparent; + border-right: 100px solid transparent; + border-top: 100px solid #ff9900; + border-radius: 50%; + clip-path: polygon(50% 0%, 0% 0%, 100% 100%); + transform-origin: 50% 50%; +} + +.segment:nth-child(odd) { + background-color: #ffd700; +} + + +/* Style the game board */ +.game-board { + margin: 20px 0; + font-size: 24px; + font-weight: bold; +} + +/* Style the controls */ +.controls { + display: flex; + justify-content: center; + align-items: center; + gap: 10px; +} + +button { + padding: 10px 20px; + font-size: 18px; + background-color: #ff9900; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; + margin-bottom: 2px; + margin-top: 2px; +} + +button:disabled { + background-color: #ccc; + cursor: not-allowed; +} + +/* Style the result text */ +.result-text { + font-size: 20px; + font-weight: bold; + margin-top: 20px; +} + +/* Style the score display */ +.score { + font-size: 24px; + margin-top: 20px; +} + +/* Style paragraphs for hints and results */ +p { + font-size: 18px; + margin: 10px 0; + padding: 5px; + background-color: #f9f9f9; + border: 1px solid #ddd; + border-radius: 5px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +/* Add more styles as needed for your specific game design */ + +#guess-input { + display: none; +} diff --git a/Games/Wheel_of_fortune/index.html b/Games/Wheel_of_fortune/index.html new file mode 100644 index 0000000000..e8fc764667 --- /dev/null +++ b/Games/Wheel_of_fortune/index.html @@ -0,0 +1,42 @@ + + + + + + + Wheel of Fortune + + +
+
+
+ +
Segment 1
+
Segment 2
+ +
+
+ +
+
+

Score: 0

+
+
+ + + +
+ + + + +

+
+
+
+

+
+ + + + diff --git a/Games/Wheel_of_fortune/script.js b/Games/Wheel_of_fortune/script.js new file mode 100644 index 0000000000..1dbe7c3cb7 --- /dev/null +++ b/Games/Wheel_of_fortune/script.js @@ -0,0 +1,191 @@ +// Define your word puzzle and other game data +const puzzle = { + word: "WHEEL OF FORTUNE", + category: "TV Show", +}; + +let currentRound = 1; +let playerScore = 0; +let wheelSpinning = false; +let wheelRotation=0; +let wheelSpeed=5000; +let spinButtonClicked=false; + +// Function to spin the wheel +function spinWheel() { + if (!wheelSpinning) { + // If the Spin button has not been clicked before, show the hint paragraph + if (!spinButtonClicked) { + document.getElementById('hint-para').textContent = `Hint: ${getHint(puzzle.word)}`; + document.getElementById('hint-para').style.display = 'block'; + spinButtonClicked = true; + } + + //Display a message to enter the guessed word + document.getElementById('result-text').textContent="Test your Fortune!!" + + // Clear the guess input field each time the "Spin" button is clicked + document.getElementById('guess-input').value = ''; + + // Reset the player's score to 0 + playerScore = 0; + document.getElementById('score-display').textContent = playerScore; + + // Add the "spinning" class to start the animation + wheel.classList.add('spinning'); + + // Disable spin button during spinning + document.getElementById('spin-button').disabled = true; + + // Show the "Enter a letter" input + document.getElementById('guess-input').style.display = 'block'; // Show the button + + // Simulate a delay to stop the animation after 1.25 second + setTimeout(() => { + // Remove the "spinning" class to stop the animation + wheel.classList.remove('spinning'); + + // Enable the spin button again + document.getElementById('spin-button').disabled = false; + + // Calculate the winning segment based on the final rotation angle + const winningSegmentIndex = Math.floor(wheelRotation % 360 / (360 / segments.length)); + const winningSegment = segments[winningSegmentIndex]; + + // Extract the data-value attribute to determine the outcome + const segmentValue = parseInt(winningSegment.getAttribute('data-value')); + + // Implement logic to update the game state based on the winning segment and its value + if (!isNaN(segmentValue)) { + // Update player's score + playerScore += segmentValue; + // Update the display of the player's score (you need an HTML element for this) + document.getElementById('score-display').textContent = playerScore; + } else if (winningSegment.classList.contains('bankrupt')) { + // Handle bankrupt outcome (e.g., reset the player's score) + playerScore = 0; + // Update the display of the player's score + document.getElementById('score-display').textContent = playerScore; + } else if (winningSegment.classList.contains('lose-turn')) { + // Handle lose-turn outcome (e.g., skip the player's turn) + // Implement logic to pass the turn and update the game state + passTurn(); + } + }, 1250); // 1.25 seconds delay + } +} + +// Function to get a hint about the puzzle word +function getHint(word) { + const lettersCount = word.replace(/ /g, '').length; + const spacesCount = word.split(' ').length - 1; + return `Number of Letters: ${lettersCount}, Number of Spaces: ${spacesCount}`; +} + +// Function to handle guessing a letter +function guessLetter() { + const letter = document.getElementById('guess-input').value.toUpperCase(); + + // Check if the guessed letter is in the puzzle word + let found = false; + for (let i = 0; i < puzzle.word.length; i++) { + if (puzzle.word[i] === letter) { + // Mark the letter as found + found = true; + break; + } + } + + // Update the player's score and display based on your game rules + if (found) { + // Implement your scoring logic (e.g., assign points per correct letter) + const pointsPerLetter = 100; // Adjust this value as needed + playerScore += pointsPerLetter; + document.getElementById('score-display').textContent = playerScore; + + // Set the result text to "Correct guess" here, outside of the loop + document.getElementById('result-text').textContent = 'Correct guess'; + } else { + // Implement your logic for incorrect guesses + // For example, you can deduct points or take other actions + const pointsDeducted = 50; // Adjust this value as needed + playerScore -= pointsDeducted; + document.getElementById('score-display').textContent = playerScore; + + // Set the result text to "Incorrect guess" for incorrect guesses + document.getElementById('result-text').textContent = 'Incorrect guess'; + } + + // Clear the guess input field + document.getElementById('guess-input').value = ''; +} + + + + +// Function to solve the puzzle +function solvePuzzle() { + const solution = document.getElementById('guess-input').value.toUpperCase(); + + // Check if the solution matches the puzzle word + if (solution === puzzle.word) { + // Correct solution + // You can implement your logic for winning the round or game here + + // For example, you can update the result text and congratulate the player + document.getElementById('result-text').textContent = 'Congratulations! You solved the puzzle!'; + + // Update the player's score based on your rules (e.g., add bonus points) + const bonusPoints = 500; // Adjust this value as needed + playerScore += bonusPoints; + document.getElementById('score-display').textContent = playerScore; + + // You can also implement logic to start the bonus round or end the game + // For example, startBonusRound() or endGame() + } else { + // Incorrect solution + // Implement your logic for handling an incorrect solution here + + // For example, you can deduct points or take other actions + const pointsDeducted = 100; // Adjust this value as needed + playerScore -= pointsDeducted; + document.getElementById('score-display').textContent = playerScore; + + // Clear the guess input field + document.getElementById('guess-input').value = ''; + + // You can also display a message to inform the player that the solution was incorrect + document.getElementById('result-text').textContent = 'Incorrect solution. Keep guessing!'; + } +} + +// Function to pass the turn +function passTurn() { + // Implement logic to pass the turn and update the game state + // For example, you can simply clear the guess input field and proceed to the next player's turn or round. + + // Clear the guess input field + document.getElementById('guess-input').value = ''; + + // Reset the player's score to 0 + playerScore = 0; + document.getElementById('score-display').textContent = playerScore; + + // You can also update any necessary game state variables, such as current player or round. + // For example, if you have multiple players, you can switch to the next player here. + + // Additionally, you can update any UI elements or messages to indicate the turn has been passed. + const resultText = document.getElementById('result-text'); + resultText.textContent = 'Turn passed to the next player'; // Display a message + + // Finally, if there are specific game rules or conditions related to passing the turn, implement them here. +} + + +// Event listeners for buttons +document.getElementById('spin-button').addEventListener('click', spinWheel); +document.getElementById('guess-button').addEventListener('click', guessLetter); +document.getElementById('solve-button').addEventListener('click', solvePuzzle); +document.getElementById('pass-button').addEventListener('click', passTurn); + +// Other game logic, such as initializing the game, displaying the puzzle board, etc. diff --git a/README.md b/README.md index c593705700..91b7bceace 100644 --- a/README.md +++ b/README.md @@ -785,11 +785,13 @@ This repository also provides one such platforms where contributers come over an | [Bunny is Lost](https://github.com/kunjgit/GameZone/tree/main/Games/Bunny_is_Lost)| |[Steam_Punk](https://github.com/kunjgit/GameZone/tree/main/Games/Steam_Punk)| |[Tower Defence Game](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Tower_Defence_Game)| +|[Wheel_of_fortune](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Wheel_of_fortune)| |[Dot_Box_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Dot_Box_Game)| | [Cosmic_Blast](https://github.com/kunjgit/GameZone/tree/main/Games/Cosmic_Blast) | |[Mole](https://github.com/taneeshaa15/GameZone/tree/main/Games/Mole)| +
diff --git a/assets/images/Wheel_of_fortune.jpg b/assets/images/Wheel_of_fortune.jpg new file mode 100644 index 0000000000..4318a8c629 Binary files /dev/null and b/assets/images/Wheel_of_fortune.jpg differ