pavitraag · Tejasree731 · Jul 29, 2025 · Jul 29, 2025 · Aug 5, 2025
diff --git a/Games/Snake_Game/Snake_main.py b/Games/Snake_Game/Snake_main.py
@@ -0,0 +1,62 @@
+import cv2
+import mediapipe as mp
+import pyautogui
+import time
+
+from Snake_utils import fingers_up, detect
+from window_top import set_top
+
+mp_hands = mp.solutions.hands
+hands = mp_hands.Hands(min_detection_confidence=0.7, min_tracking_confidence=0.7)
+draw = mp.solutions.drawing_utils
+
+#Camera
+cam = cv2.VideoCapture(0)
+last = time.time()
+cool = 1.5
+prev_gesture = None  #Keep track of last gesture
+name = "Snake_Window"
+cv2.namedWindow(name)
+
+#Instructions
+instructions = [
+    "SNAKE GAME GESTURE CONTROLS:",
+    "Index Finger Up       ->Up",
+    "Index + Middle Up     ->Down",
+    "Thumb Left            ->Right",
+    "Pinky Only            ->Left",
+    "ESC                   ->Exit"
+]
+
+while True:
+    ok, img = cam.read()
+    if not ok:
+        break
+
+    img = cv2.flip(img, 1)
+    rgb = cv2.cvtColor(img, cv2.COLOR_BGR2RGB)
+    res = hands.process(rgb)
+
+    if res.multi_hand_landmarks:
+        for hand in res.multi_hand_landmarks:
+            draw.draw_landmarks(img, hand, mp_hands.HAND_CONNECTIONS)
+            f = fingers_up(hand.landmark)
+            g = detect(f)
+            if g and (g != prev_gesture or time.time() - last > cool):
+                pyautogui.press(g)
+                last = time.time()
+                prev_gesture = g  #updates last gesture
+
+    #instructions
+    for i, text in enumerate(instructions):
+        cv2.putText(img, text, (10, 30 + i * 25), cv2.FONT_HERSHEY_SIMPLEX,
+                    0.6, (255, 0, 255), 2, cv2.LINE_AA)
+
+    cv2.imshow(name, img)
+    set_top(name)
+
+    if cv2.waitKey(1) & 0xFF == 27:#exit
+        break
+
+cam.release()
+cv2.destroyAllWindows()
diff --git a/Games/Snake_Game/Snake_utils.py b/Games/Snake_Game/Snake_utils.py
@@ -0,0 +1,29 @@
+def fingers_up(landmarks):
+    fingers = []
+
+    if landmarks[4].x < landmarks[3].x:
+        fingers.append(1)
+    else:
+        fingers.append(0)
+
+    tips = [8, 12, 16, 20]
+    pips = [6, 10, 14, 18]
+
+    for t, p in zip(tips, pips):
+        if landmarks[t].y < landmarks[p].y:
+            fingers.append(1)
+        else:
+            fingers.append(0)
+
+    return fingers
+
+def detect(f):
+    if f == [0, 1, 0, 0, 0]:
+        return 'up'
+    elif f == [0, 1, 1, 0, 0]:
+        return 'down'
+    elif f == [1, 0, 0, 0, 0]:
+        return 'right'
+    elif f == [0, 0, 0, 0, 1]:
+        return 'left'
+    return None
diff --git a/Games/Snake_Game/__pycache__/Snake_utils.cpython-312.pyc b/Games/Snake_Game/__pycache__/Snake_utils.cpython-312.pyc
diff --git a/Games/Snake_Game/__pycache__/window_top.cpython-312.pyc b/Games/Snake_Game/__pycache__/window_top.cpython-312.pyc
diff --git a/Games/Snake_Game/index.html b/Games/Snake_Game/index.html
@@ -1,85 +1,190 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Snake Game</title>
-    <style>
-         body{
-            margin:0px;
-            padding:0px;
-            display:flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            background-color: palegreen;
-        }
-        canvas{
-            box-shadow: black 20px 10px 50px;
-
-        }
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Snake Game</title>
+  <style>
+    body {
+      margin: 0px;
+      padding: 0px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      background-color: palegreen;
+      font-family: Arial, sans-serif;
+    }
+
+    canvas {
+      box-shadow: black 20px 10px 50px;
+    }
+
+    #startBtn, #pauseBtn, #demoBtn {
+      padding: 10px 20px;
+      font-size: 1.2rem;
+      border: none;
+      border-radius: 5px;
+      margin-top: 15px;
+      background-color: #222;
+      color: white;
+      cursor: pointer;
+      transition: background-color 0.2s;
+    }
+
+    #demoBtn {
+      background-color: #4CAF50;
+    }
+
+    #demoBtn:hover {
+      background-color: #388E3C;
+    }
 
     .overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0,0,0,0.85);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    z-index: 10;
-    color: white;
-  }
-
-  .hidden {
-    display: none;
-  }
-
-  .overlay button {
-    padding: 10px 20px;
-    margin: 10px;
-    font-size: 1.2rem;
-    cursor: pointer;
-    border: none;
-    border-radius: 8px;
-    background-color: #4CAF50;
-    color: white;
-    transition: background-color 0.2s;
-  }
-
-  .overlay button:hover {
-    background-color: #388E3C;
-  }
-
-  #startBtn, #pauseBtn {
-    padding: 10px 20px;
-    font-size: 1.2rem;
-    border: none;
-    border-radius: 1px;
-    background-color: #222;
-    color: white;
-    transition: background-color 0.2s;
-  }
+      position: fixed;
+      top: 0; left: 0;
+      width: 100%; height: 100%;
+      background: rgba(0, 0, 0, 0.85);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      z-index: 10;
+      color: white;
+    }
+
+    .hidden {
+      display: none;
+    }
+
+    .overlay button {
+      padding: 10px 20px;
+      margin: 10px;
+      font-size: 1.2rem;
+      cursor: pointer;
+      border: none;
+      border-radius: 8px;
+      background-color: #4CAF50;
+      color: white;
+    }
+
+    .overlay button:hover {
+      background-color: #388E3C;
+    }
+
+    /* Modal styles */
+    .modal {
+      display: none;
+      position: fixed;
+      z-index: 9999;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      background-color: rgba(0,0,0,0.8);
+    }
+
+    .modal-content {
+      background-color: #fff;
+      margin: 5% auto;
+      padding: 20px;
+      border-radius: 10px;
+      width: 80%;
+      max-width: 800px;
+      position: relative;
+      color: #333;
+    }
+
+    .modal-content video {
+      width: 100%;
+      border-radius: 8px;
+    }
+
+    .close {
+      position: absolute;
+      top: 10px;
+      right: 20px;
+      font-size: 28px;
+      font-weight: bold;
+      color: #333;
+      cursor: pointer;
+    }
+
+    .info li {
+      margin: 8px 0;
+    }
   </style>
 </head>
 <body>
-    <h1>Snake Game</h1>
-    <canvas id="game" width="400" height="400"></canvas>
-
-    <h2 id="instruction" style="margin-top: 40px;">Use the arrow keys to control the snake.</h2>
-    <p id="note" style="margin-top: 5px;">Speed increases each time you eat an apple! Good Luck!</p>
-    <button id="startBtn" style="margin-top: 10px;">Start Game</button>
-    <button id="pauseBtn" style="margin-top: 40px; display:none;">Pause</button>
-
-<div id="gameOverOverlay" class="overlay hidden">
-  <h2>Game Over!</h2>
-  <button id="restartBtn">Restart</button>
-  <button id="exitBtn">Exit</button>
+
+  <h1>Snake Game</h1>
+  <canvas id="game" width="400" height="400"></canvas>
+
+  <h2 id="instruction" style="margin-top: 40px;">Use the arrow keys to control the snake.</h2>
+  <p id="note" style="margin-top: 5px;">Speed increases each time you eat an apple! Good Luck!</p>
+  <button id="startBtn">Start Game</button>
+  <button id="pauseBtn" style="display:none;">Pause</button>
+  <button id="demoBtn">🎥 Watch Demo(for using gestures)</button>
+
+  <div id="gameOverOverlay" class="overlay hidden">
+    <h2>Game Over!</h2>
+    <button id="restartBtn">Restart</button>
+    <button id="exitBtn">Exit</button>
+  </div>
+
+  <!-- Modal for demo -->
+<div id="demoModal" class="modal">
+  <div class="modal-content">
+    <span class="close" id="closeModal">&times;</span>
+    <h2>Demo: Running Snake_main.py with Gestures</h2>
+
+    <ul class="info">
+      <li><strong>File:</strong> Snake_main.py</li>
+      <li><strong>Environment:</strong> Python, OpenCV, MediaPipe, PyAutoGUI</li>
+      <li><strong>Setup:</strong> Run in VS Code terminal using Python 3.7+</li>
+      <li><strong>Gestures Used:</strong>
+        <ul>
+          <li> Index Finger Up → Move Up</li>
+          <li> Index + Middle Finger → Move Down</li>
+          <li> Thumb Out → Move Right</li>
+          <li> Pinky Only → Move Left</li>
+        </ul>
+      </li>
+      <li><strong>Tip:</strong> Ensure webcam is active and your hand is well-lit.</li>
+      <li><strong>To exit:</strong> Press ESC or stop the script manually in VS Code.</li>
+    </ul>
+
+    <!-- Embedded video -->
+    <iframe 
+      src="https://drive.google.com/file/d/1oT13xzvHn6OmPKJ_zqpQm24C1gK5oUuC/preview" 
+      width="100%" height="480" allow="autoplay" frameborder="0" allowfullscreen>
+    </iframe>
+
+  </div>
 </div>
-<script src="script.js"></script>
+
+  <script>
+    const modal = document.getElementById("demoModal");
+    const btn = document.getElementById("demoBtn");
+    const closeBtn = document.getElementById("closeModal");
+
+    btn.onclick = function () {
+      modal.style.display = "block";
+    }
+
+    closeBtn.onclick = function () {
+      modal.style.display = "none";
+    }
+
+    window.onclick = function (event) {
+      if (event.target == modal) {
+        modal.style.display = "none";
+      }
+    }
+  </script>
+
+  <script src="script.js"></script>
 </body>
-</html>
+</html>
diff --git a/Games/Snake_Game/window_top.py b/Games/Snake_Game/window_top.py
@@ -0,0 +1,7 @@
+import win32gui
+import win32con
+
+def set_top(title):
+    win = win32gui.FindWindow(None, title)
+    if win:
+        win32gui.SetWindowPos(win, win32con.HWND_TOPMOST, 50, 100, 640, 480, win32con.SWP_SHOWWINDOW)