Merge pull request #4555 from Saipradyumnagoud/main

Added Wheel Of Fortunes game
kunjgit · Jun 17, 2024 · c24ab93 · c24ab93
2 parents bdb5bdd + c2762fc
commit c24ab93
Show file tree

Hide file tree

Showing 7 changed files with 191 additions and 1 deletion.
diff --git a/Games/Wheel_of_Fortunes/README.md b/Games/Wheel_of_Fortunes/README.md
@@ -0,0 +1,36 @@
+# **Wheel of Fortune** 
+
+---
+
+<br>
+
+## **Description 📃**
+Wheel of Fortune is a simple web-based game where players spin a wheel to win various prizes. The wheel is divided into several segments, each representing a different prize. Players can spin the wheel by clicking a button, and the game will randomly select a segment, indicating the prize won.
+
+## **Functionalities 🎮**
+- Interactive spinning wheel.
+- Random prize selection.
+- Visual indicator (pointer) to show the winning segment.
+- Display of the winning prize.
+
+<br>
+
+## **How to play? 🕹️**
+1. Open the game in a web browser.
+2. Click the "Spin the Wheel" button.
+3. Watch the wheel spin and wait for it to stop.
+4. The pointer will indicate the segment where the wheel stops.
+5. The winning prize will be displayed below the wheel.
+
+<br>
+
+## **Screenshots 📸**
+
+<br>
+
+![Wheel_of_Fortunes](https://github.com/Saipradyumnagoud/GameZone/assets/143107589/a6a0dff6-0acd-48e4-baa9-0d46c611951e)
+
+
+
+<br>
+
diff --git a/Games/Wheel_of_Fortunes/Wheel_of_Fortune.png b/Games/Wheel_of_Fortunes/Wheel_of_Fortune.png
diff --git a/Games/Wheel_of_Fortunes/index.html b/Games/Wheel_of_Fortunes/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Wheel of Fortune</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <div class="wheel-container">
+            <canvas id="wheel" width="500" height="500"></canvas>
+            <div id="pointer"></div>
+        </div>
+        <button id="spin-btn">Spin the Wheel</button>
+        <div id="result"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Wheel_of_Fortunes/script.js b/Games/Wheel_of_Fortunes/script.js
@@ -0,0 +1,81 @@
+// script.js
+
+const canvas = document.getElementById('wheel');
+const ctx = canvas.getContext('2d');
+const spinBtn = document.getElementById('spin-btn');
+const resultDiv = document.getElementById('result');
+
+const segments = [
+    'Prize 1',
+    'Prize 2',
+    'Prize 3',
+    'Prize 4',
+    'Prize 5',
+    'Prize 6',
+    'Prize 7',
+    'Prize 8'
+];
+
+const colors = [
+    '#FF5733', '#33FF57', '#3357FF', '#FF33A1',
+    '#A133FF', '#33FFF4', '#FF8333', '#8DFF33'
+];
+
+let startAngle = 0;
+const arc = Math.PI / (segments.length / 2);
+let spinAngleStart = 10;
+let spinTime = 0;
+let spinTimeTotal = 0;
+
+function drawWheel() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    for (let i = 0; i < segments.length; i++) {
+        const angle = startAngle + i * arc;
+        ctx.fillStyle = colors[i];
+        ctx.beginPath();
+        ctx.arc(250, 250, 200, angle, angle + arc, false);
+        ctx.arc(250, 250, 0, angle + arc, angle, true);
+        ctx.fill();
+
+        ctx.save();
+        ctx.fillStyle = "white";
+        ctx.translate(250 + Math.cos(angle + arc / 2) * 150, 250 + Math.sin(angle + arc / 2) * 150);
+        ctx.rotate(angle + arc / 2 + Math.PI / 2);
+        ctx.fillText(segments[i], -ctx.measureText(segments[i]).width / 2, 0);
+        ctx.restore();
+    }
+}
+
+function rotateWheel() {
+    spinTime += 30;
+    if (spinTime >= spinTimeTotal) {
+        stopRotateWheel();
+        return;
+    }
+    const spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
+    startAngle += (spinAngle * Math.PI / 180);
+    drawWheel();
+    spinTimeout = setTimeout(rotateWheel, 30);
+}
+
+function stopRotateWheel() {
+    const degrees = startAngle * 180 / Math.PI + 90;
+    const arcd = arc * 180 / Math.PI;
+    const index = Math.floor((360 - degrees % 360) / arcd);
+    resultDiv.innerHTML = `You won: ${segments[index]}`;
+}
+
+function easeOut(t, b, c, d) {
+    const ts = (t /= d) * t;
+    const tc = ts * t;
+    return b + c * (tc + -3 * ts + 3 * t);
+}
+
+spinBtn.addEventListener('click', () => {
+    spinTime = 0;
+    spinTimeTotal = Math.random() * 3000 + 4000;
+    rotateWheel();
+});
+
+drawWheel();
+
diff --git a/Games/Wheel_of_Fortunes/styles.css b/Games/Wheel_of_Fortunes/styles.css
@@ -0,0 +1,53 @@
+/* styles.css */
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: grey;
+    margin: 0;
+}
+
+.container {
+    text-align: center;
+    position: relative;
+}
+
+.wheel-container {
+    margin: 20px 0;
+    position: relative;
+}
+
+canvas {
+    border: 5px solid #000;
+    border-radius: 50%;
+}
+
+#pointer {
+    position: absolute;
+    top: -20px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: 20px solid transparent;
+    border-right: 20px solid transparent;
+    border-bottom: 30px solid red;
+}
+
+#spin-btn {
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    background-color: #4CAF50;
+    color: black;
+    border: none;
+    border-radius: 5px;
+}
+
+#result {
+    margin-top: 20px;
+    font-size: 18px;
+    font-weight: bold;
+}
diff --git a/README.md b/README.md
@@ -792,7 +792,7 @@ This repository also provides one such platforms where contributers come over an
 |[Mole](https://github.com/taneeshaa15/GameZone/tree/main/Games/Mole)|
 
 
-
+|[Wheel_of_Fortunes](https://github.com/Saipradyumnagoud/GameZone/tree/main/Games/Wheel_of_Fortunes)|
  </center>
 
 <br>

diff --git a/assets/images/Wheel_of_Fortunes.png b/assets/images/Wheel_of_Fortunes.png
-Original file line number
+Diff line change
@@ Expand Up @@
     |[Mole](https://github.com/taneeshaa15/GameZone/tree/main/Games/Mole)|
+    |[Wheel_of_Fortunes](https://github.com/Saipradyumnagoud/GameZone/tree/main/Games/Wheel_of_Fortunes)|
      </center>
     <br>
@@ Expand Down @@