Add files via upload

bindestriche · web-flow · commit c868d2b55282 · 2025-07-08T21:16:07.000+02:00
diff --git a/marble_webapp/app.js b/marble_webapp/app.js
@@ -15,7 +15,11 @@ const holes = [
   {x: 400, y: 400, r: 15}
 ];
 const friction = 0.98;
-const sensitivity = 0.4;
+let sensitivity = 0.5;
+
+// Für Reset-Button: Offset für Neutralstellung
+let angleXOffset = 0;
+let angleYOffset = 0;
 
 const keys = {};
 document.addEventListener('keydown', e => keys[e.key.toLowerCase()] = true);
@@ -25,8 +29,9 @@ document.addEventListener('keyup', e => keys[e.key.toLowerCase()] = false);
 if (window.DeviceMotionEvent) {
   window.addEventListener('devicemotion', e => {
     if (e.accelerationIncludingGravity) {
-      angleX = e.accelerationIncludingGravity.x*-0.01; // Scale down for sensitivity
-      angleY = e.accelerationIncludingGravity.y*-0.01; // Scale down for sensitivity
+      // Offset berücksichtigen
+      angleX = e.accelerationIncludingGravity.x * -0.1 - angleXOffset;
+      angleY = e.accelerationIncludingGravity.y * 0.1 - angleYOffset;
     }
   });
 }
@@ -37,6 +42,26 @@ function restartGame() {
   velocity = {x: 0, y: 0};
 }
 
+// --- NEU: Reset-Button und Sensitivitäts-Slider ---
+const resetBtn = document.getElementById("resetBtn");
+const sensitivitySlider = document.getElementById("sensitivitySlider");
+const sensitivityValue = document.getElementById("sensitivityValue");
+
+resetBtn.addEventListener("click", () => {
+  // Aktuelle Werte als Offset speichern
+  angleXOffset = angleX + angleXOffset;
+  angleYOffset = angleY + angleYOffset;
+});
+
+sensitivitySlider.addEventListener("input", () => {
+  sensitivity = Number(sensitivitySlider.value);
+  sensitivityValue.textContent = sensitivity.toFixed(2);
+});
+// Initialwert anzeigen
+sensitivityValue.textContent = sensitivitySlider.value;
+
+// ---------------------------------------------------
+
 function draw() {
   ctx.clearRect(0, 0, canvas.width, canvas.height);
 
@@ -63,7 +88,7 @@ function draw() {
   // Debug
   ctx.fillStyle = "black";
   ctx.font = "14px sans-serif";
-  ctx.fillText(`angleX: ${angleX.toFixed(2)} angleY: ${angleY.toFixed(2)}`, 10, 20);
+  ctx.fillText(`angleX: ${(angleX + angleXOffset).toFixed(2)} angleY: ${(angleY + angleYOffset).toFixed(2)} sensitivity: ${sensitivity.toFixed(2)}`, 10, 40);
 }
 
 function update() {
@@ -77,8 +102,8 @@ function update() {
   if (keys['d']) keyboardAngleX += keyboard_sensitivity;
 
   // Kombiniere Tastatur und DeviceMotion
-  const totalAngleX = angleX + keyboardAngleX;
-  const totalAngleY = angleY + keyboardAngleY;
+  const totalAngleX = (angleX + angleXOffset) + keyboardAngleX;
+  const totalAngleY = (angleY + angleYOffset) + keyboardAngleY;
 
   velocity.x += totalAngleX * sensitivity;
   velocity.y += totalAngleY * sensitivity;
diff --git a/marble_webapp/index.html b/marble_webapp/index.html
@@ -1,9 +1,8 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="de">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Marble Maze Game v3</title>
+  <title>Marble Game</title>
   <style>
     html, body {
       margin: 0;
@@ -34,17 +33,25 @@
       position: absolute;
       top: 10px;
       left: 10px;
-      z-index: 2;
+      z-index: 10;
+      background: #fff8;
+      padding: 8px;
+      border-radius: 8px;
     }
     button {
-      padding: 8px 16px;
-      font-size: 16px;
+      padding: 4px 8px;
+      font-size: 10px;
+      background-color: #007bff;
     }
   </style>
 </head>
 <body>
   <div id="controls">
-    <button onclick="restartGame()">Restart</button>
+    <button id="resetBtn">Reset Neigung</button>
+    <label>Sensitivität:
+      <input type="range" id="sensitivitySlider" min="0.1" max="2" step="0.01" value="0.5">
+      <span id="sensitivityValue">0.50</span>
+    </label>
   </div>
   <canvas id="gameCanvas"></canvas>
   <script src="app.js">
