Allow the screen to rotate and tilt to up to a 45 degree angle.

index.html

@@ -57,12 +57,18 @@
                             <option value="hard">Hard</option>
                         </select>
                     </div>
-
                     <button id="start-btn" class="w-full bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg font-bold">
                         Start Game
                     </button>
 
-                    <div class="mt-6 pt-4 border-t border-gray-700">
+                    <div class="mt-4">
+                        <label class="inline-flex items-center cursor-pointer">
+                            <input type="checkbox" id="tilt-control" class="sr-only peer">
+                            <div class="relative w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
+                            <span class="ms-3 text-sm font-medium">Tilt Controls</span>
+                        </label>
+                    </div>
+<div class="mt-6 pt-4 border-t border-gray-700">
                         <h3 class="text-lg font-semibold mb-2">Stats</h3>
                         <div class="flex justify-between">
                             <span>Time:</span>

script.js

@@ -17,24 +17,48 @@ document.addEventListener('DOMContentLoaded', () => {
         canvas.width = size;
         canvas.height = size;
     }
-
     // Game variables
     let maze = [];
     let cellSize = 0;
-    let ufo = { x: 0, y: 0 };
+    let orientationEnabled = false;
+let ufo = { x: 0, y: 0 };
     let exit = { x: 0, y: 0 };
     let moves = 0;
     let time = 0;
     let timer = null;
     let gameRunning = false;
     let mazeSize = 10;
+    // Handle device orientation
+    function handleOrientation(event) {
+        if (!gameRunning) return;
+        
+        const tiltThreshold = 15; // degrees
+        const beta = event.beta;  // front-to-back tilt
+        const gamma = event.gamma; // left-to-right tilt
+        
+        if (beta > tiltThreshold) {
+            moveUfo(0, 1); // tilt forward = move down
+        } else if (beta < -tiltThreshold) {
+            moveUfo(0, -1); // tilt backward = move up
+        }
+        
+        if (gamma > tiltThreshold) {
+            moveUfo(1, 0); // tilt right = move right
+        } else if (gamma < -tiltThreshold) {
+            moveUfo(-1, 0); // tilt left = move left
+        }
+    }
 
     // Initialize game
     function initGame() {
         resizeCanvas();
         window.addEventListener('resize', resizeCanvas);
         
-        // Set maze size based on difficulty
+        // Add device orientation listener
+        if (window.DeviceOrientationEvent) {
+            window.addEventListener('deviceorientation', handleOrientation);
+        }
+// Set maze size based on difficulty
         switch(difficultySelect.value) {
             case 'easy': mazeSize = 8; break;
             case 'medium': mazeSize = 10; break;
@@ -170,9 +194,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // Move UFO
     function moveUfo(dx, dy) {
-        if (!gameRunning) return;
-        
-        const newX = ufo.x + dx;
+        if (!gameRunning || (orientationEnabled && dx === 0 && dy === 0)) return;
+const newX = ufo.x + dx;
         const newY = ufo.y + dy;
         
         // Check if move is valid
@@ -189,12 +212,18 @@ document.addEventListener('DOMContentLoaded', () => {
             }
         }
     }
+    // Toggle tilt controls
+    document.getElementById('tilt-control').addEventListener('change', function() {
+        orientationEnabled = this.checked;
+        if (orientationEnabled && !gameRunning) {
+            alert('Tilt controls enabled! Tilt your device to move the UFO.');
+        }
+    });
 
     // Start game
     function startGame() {
         if (gameRunning) return;
-        
-        // Reset game state
+// Reset game state
         moves = 0;
         time = 0;
         movesDisplay.textContent = moves;

style.css

@@ -23,10 +23,19 @@
 .ufo-float {
     animation: ufoFloat 2s ease-in-out infinite;
 }
-
 /* Responsive adjustments */
 @media (max-width: 768px) {
     #maze-container {
         max-width: 100%;
     }
-}
+}
+
+/* Toggle switch styling */
+.toggle-checkbox:checked {
+    right: 0;
+    border-color: #7C3AED;
+}
+
+.toggle-checkbox:checked + .toggle-label {
+    background-color: #7C3AED;
+}