kunjgit · kunjgit · Jun 17, 2024 · Jun 15, 2024 · Jun 16, 2024 · Jun 17, 2024
diff --git a/Games/Wheel_of_fortune/README.md 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
diff --git a/Games/Wheel_of_fortune/design.css 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
@@ -0,0 +1,42 @@
+<!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="design.css">
+    <title>Wheel of Fortune</title>
+</head>
+<body>
+    <div class="container">
+        <div class="game">
+            <div class="wheel" id="wheel">
+                <!-- Wheel of Fortune Wheel -->
+                <div class="segment" data-value="200">Segment 1</div>
+                <div class="segment" data-value="300">Segment 2</div>
+                <!-- Add more segments as needed -->
+            </div>
+            <div class="game-board" id="puzzle-board">
+                <!-- Puzzle board and guesses -->
+            </div>
+            <div class="score">
+                <p>Score: <span id="score-display">0</span></p>
+            </div>
+            <div class="controls">
+                <button id="spin-button">Spin</button>
+                <p id="hint-para" style="display: none;"></p> <!-- Hint paragraph initially hidden -->
+                <input type="text" id="guess-input" placeholder="Enter a letter">
+            </div>
+
+                <button id="guess-button">Guess Letter</button>
+                <button id="solve-button">Solve</button>
+                <button id="pass-button">Pass</button>
+                <p id="result-text"> </p>
+            </div>
+        </div>
+        <div class="result">
+            <p id="result-text"></p>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Wheel_of_fortune/script.js 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
@@ -369,6 +369,7 @@ This repository also provides one such platforms where contributers come over an
 |[Harmony_Mixer](https://github.com/kunjgit/GameZone/tree/main/Games/Harmony_Mixer)|
 |[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)|
 
 
  </center>

diff --git a/assets/images/Wheel_of_fortune.jpg b/assets/images/Wheel_of_fortune.jpg