Make it have down left up right

index.html

@@ -24,8 +24,8 @@
                     <button id="startBtn" class="px-8 py-3 bg-gradient-to-r from-purple-600 to-blue-600 rounded-full text-white font-bold text-lg hover:scale-105 transition-transform shadow-lg hover:shadow-purple-500/50">
                         Start Game
                     </button>
-                    <p class="text-sm text-gray-300">Use arrow keys or swipe to move</p>
-                </div>
+                <p class="text-sm text-gray-300">Use arrow keys (←↑→↓) or swipe to move</p>
+</div>
 </div>
             <div id="gameOverScreen" class="absolute inset-0 hidden flex-col items-center justify-center bg-black bg-opacity-70 z-10">
                 <h1 class="text-4xl md:text-5xl font-bold mb-4 text-red-400">Game Over</h1>
@@ -34,8 +34,8 @@
                     <button id="restartBtn" class="px-8 py-3 bg-gradient-to-r from-purple-600 to-blue-600 rounded-full text-white font-bold text-lg hover:scale-105 transition-transform shadow-lg hover:shadow-purple-500/50">
                         Try Again
                     </button>
-                    <p class="text-sm text-gray-300">Use arrow keys or swipe to move</p>
-                </div>
+                <p class="text-sm text-gray-300">Use arrow keys (←↑→↓) or swipe to move</p>
+</div>
 </div>
         </div>
         <div class="mt-8 w-full max-w-4xl bg-black bg-opacity-30 rounded-2xl p-6 border border-purple-400 border-opacity-30">

script.js

@@ -39,7 +39,7 @@ let rings = [];
         ball.x = canvas.width / 2;
         ball.y = canvas.height - 100;
         ball.dx = 0;
-        ball.dy = -3; // Start moving upward when game begins
+        ball.dy = 0; // Start with no movement (let player control)
 rings = [];
         currentRing = 0;
         
@@ -218,6 +218,10 @@ rings = [];
             ball.dx = -ball.speed;
         } else if (e.key === 'ArrowRight') {
             ball.dx = ball.speed;
+        } else if (e.key === 'ArrowUp') {
+            ball.dy = -ball.speed;
+        } else if (e.key === 'ArrowDown') {
+            ball.dy = ball.speed;
         }
     }
 
@@ -226,23 +230,28 @@ rings = [];
         
         if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
             ball.dx = 0;
+        } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+            ball.dy = 0;
         }
     }
-
-    function handleTouchStart(e) {
+function handleTouchStart(e) {
         if (!gameActive) return;
         touchStartX = e.touches[0].clientX;
         touchStartY = e.touches[0].clientY;
     }
-
     function handleTouchMove(e) {
         if (!gameActive) return;
         e.preventDefault();
         const touchX = e.touches[0].clientX;
+        const touchY = e.touches[0].clientY;
         const diffX = touchX - touchStartX;
+        const diffY = touchY - touchStartY;
         
         if (Math.abs(diffX) > 5) { // Threshold to prevent accidental movement
             ball.dx = diffX > 0 ? ball.speed : -ball.speed;
         }
+        if (Math.abs(diffY) > 5) {
+            ball.dy = diffY > 0 ? ball.speed : -ball.speed;
+        }
     }
 });