Update index.html

index.html

@@ -11,20 +11,30 @@
         <div class="ball"></div>
         <div class="platform"></div>
     </div>
+    <div class="controls">
+        <button id="left-button">◀</button>
+        <button id="right-button">▶</button>
+    </div>
     <script>
         const platform = document.querySelector('.platform');
         const ball = document.querySelector('.ball');
         const gameContainer = document.querySelector('.game-container');
+        const leftButton = document.getElementById('left-button');
+        const rightButton = document.getElementById('right-button');
 
         let platformPosition = 50; // Initial position of the platform (centered).
         let ballPosition = { top: 0, left: Math.random() * 90 }; // Random horizontal start for the ball.
 
-        // Move platform
-        window.addEventListener('keydown', (e) => {
-            if (e.key === 'ArrowLeft' && platformPosition > 0) {
+        // Mobile controls
+        leftButton.addEventListener('click', () => {
+            if (platformPosition > 0) {
                 platformPosition -= 5; // Move left
             }
-            if (e.key === 'ArrowRight' && platformPosition < 90) {
+            platform.style.left = platformPosition + '%';
+        });
+
+        rightButton.addEventListener('click', () => {
+            if (platformPosition < 90) {
                 platformPosition += 5; // Move right
             }
             platform.style.left = platformPosition + '%';