Touch-Steuerung für Handy hinzugefügt

index.html

@@ -101,6 +101,13 @@
         Benutze die Pfeiltasten ⬅️⬆️➡️ zum Bewegen
     </div>
     
+    <div id="touch-controls" style="display:none; position:fixed; bottom:20px; width:100%; text-align:center; gap:20px;">
+        <button id="btn-left" style="font-size:32px; padding:20px; background:#333; color:white; border-radius:50%; border:none; width:60px; height:60px;">⬅️</button>
+        <button id="btn-up" style="font-size:32px; padding:20px; background:#333; color:white; border-radius:50%; border:none; width:60px; height:60px;">⬆️</button>
+        <button id="btn-down" style="font-size:32px; padding:20px; background:#333; color:white; border-radius:50%; border:none; width:60px; height:60px;">⬇️</button>
+        <button id="btn-right" style="font-size:32px; padding:20px; background:#333; color:white; border-radius:50%; border:none; width:60px; height:60px;">➡️</button>
+    </div>
+
     <script>
         const canvas = document.getElementById('gameCanvas');
         const ctx = canvas.getContext('2d');
@@ -180,19 +187,94 @@
             }
         }
         
-        // Tastensteuerung
+        // Tastensteuerung für Desktop
         const keys = {};
         window.addEventListener('keydown', e => keys[e.key] = true);
         window.addEventListener('keyup', e => keys[e.key] = false);
         
+        // Touch-Steuerung für Handy
+        let touchStartX = 0;
+        let touchStartY = 0;
+        let touchMoving = false;
+        
+        canvas.addEventListener('touchstart', e => {
+            touchMoving = false;
+            touchStartX = e.touches[0].clientX;
+            touchStartY = e.touches[0].clientY;
+            e.preventDefault();
+        }, {passive: false});
+        
+        canvas.addEventListener('touchmove', e => {
+            if (!gameRunning) return;
+            touchMoving = true;
+            const touchX = e.touches[0].clientX;
+            const touchY = e.touches[0].clientY;
+            
+            const deltaX = touchX - touchStartX;
+            const deltaY = touchY - touchStartY;
+            
+            if (Math.abs(deltaX) > Math.abs(deltaY)) {
+                if (deltaX > 10) player.x += player.speed;
+                if (deltaX < -10) player.x -= player.speed;
+            } else {
+                if (deltaY > 10) player.y += player.speed;
+                if (deltaY < -10) player.y -= player.speed;
+            }
+            
+            touchStartX = touchX;
+            touchStartY = touchY;
+            e.preventDefault();
+        }, {passive: false});
+        
+        canvas.addEventListener('touchend', e => {
+            touchMoving = false;
+            e.preventDefault();
+        }, {passive: false});
+        
+        setupTouchButtons();
+        
+        // Touch-Button-Funktionen
+        function setupTouchButtons() {
+            const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+            if (isTouchDevice) {
+                document.getElementById('touch-controls').style.display = 'flex';
+                document.getElementById('instructions').style.display = 'none';
+            }
+            
+            const btns = {
+                'btn-left': 'ArrowLeft',
+                'btn-right': 'ArrowRight',
+                'btn-up': 'ArrowUp',
+                'btn-down': 'ArrowDown'
+            };
+            
+            Object.keys(btns).forEach(id => {
+                const btn = document.getElementById(id);
+                const key = btns[id];
+                
+                btn.addEventListener('touchstart', (e) => {
+                    e.preventDefault();
+                    keys[key] = true;
+                });
+                
+                btn.addEventListener('touchend', (e) => {
+                    e.preventDefault();
+                    keys[key] = false;
+                });
+            });
+        }
+        
         // Eingabeverarbeitung
         function handleInput() {
             if (!gameRunning) return;
             
-            if (keys['ArrowLeft']) player.x -= player.speed;
+            // Touch-Steuerung (Vorrang)
-            if (keys['ArrowRight']) player.x += player.speed;
+            if (!touchMoving) {
-            if (keys['ArrowUp']) player.y -= player.speed;
+                if (keys['ArrowLeft']) player.x -= player.speed;
-            if (keys['ArrowDown']) player.y += player.speed;
+                if (keys['ArrowRight']) player.x += player.speed;
+                if (keys['ArrowUp']) player.y -= player.speed;
+                if (keys['ArrowDown']) player.y += player.speed;
+            }
             
             // Grenzen
             if (player.x < 0) player.x = 0;