Adminator/geograsim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Kofferdetektiv iPad: zwei feste Joysticks (immer 50% sichtbar)

Browse Source 
Statt schwebendem Links-Joystick + Rechts-Wisch jetzt zwei feste,
halbtransparente Joysticks:
- links = Umsehen (Auge 👁), ratenbasiertes Drehen/Neigen in update()
- rechts = Bewegen (Fuß 🦶)
Touch wird dem naeheren Joystick im Fangradius zugewiesen (assign/stickVec).
Interaktions-Button (🧳) nach unten-mittig verschoben (kollidierte sonst
mit dem rechten Bewegungs-Joystick). Joysticks nur auf Touch sichtbar
(body.kd-touch).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Thomas
2026-08-24 13:57:20 +02:00
parent 8ec005f889
commit 11c48817de
2 changed files with 56 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App/sims/kofferdetektiv/game-3d.html
+15 -8
View File
@@ -88,15 +88,21 @@ img{max-width:100%}
background:rgba(232,197,71,.94);color:#1f2733;font-weight:700;padding:10px 18px;border-radius:10px;
font-size:15px;opacity:0;transition:opacity .2s}
#prompt.visible{opacity:1}
#btn-touch-act{position:absolute;right:26px;bottom:90px;width:84px;height:84px;border-radius:50%;
background:rgba(232,197,71,.92);border:none;font-size:34px;display:none;pointer-events:auto;
#btn-touch-act{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);width:84px;height:84px;border-radius:50%;
background:rgba(232,197,71,.92);border:none;font-size:34px;display:none;pointer-events:auto;z-index:45;
box-shadow:0 4px 14px rgba(0,0,0,.4)}
#btn-touch-act.visible{display:block}
#joystick{position:absolute;width:120px;height:120px;border-radius:50%;border:2px solid rgba(159,216,239,.4);
background:rgba(13,21,32,.35);display:none;pointer-events:none}
#joystick.visible{display:block}
#joy-knob{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;
background:rgba(159,216,239,.55)}
/* Zwei feste Joysticks (nur Touch), IMMER halbtransparent sichtbar:
links Umsehen (Auge), rechts Bewegen (Fuß). */
#joystick,#lookstick{position:absolute;bottom:30px;width:132px;height:132px;border-radius:50%;
border:2px solid rgba(159,216,239,.45);background:rgba(13,21,32,.30);
display:none;opacity:.5;pointer-events:none;touch-action:none;z-index:40}
body.kd-touch #joystick,body.kd-touch #lookstick{display:block}
#lookstick{left:24px}
#joystick{right:24px}
#joy-knob,#look-knob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;
background:rgba(159,216,239,.55);display:flex;align-items:center;justify-content:center;
font-size:28px;line-height:1;transition:transform .04s linear}
#toast{position:absolute;top:70px;left:50%;transform:translateX(-50%);max-width:min(640px,90vw);
background:rgba(13,21,32,.92);color:#e8eef4;border:1px solid #2c3a4a;border-radius:12px;
padding:12px 20px;font-size:15px;opacity:0;transition:opacity .3s;pointer-events:none;z-index:50;text-align:center}
@@ -437,7 +443,8 @@ img{max-width:100%}
<div id="mode-badge"></div>
<div id="prompt">E — Gepäckstück untersuchen</div>
<button id="btn-touch-act" aria-label="Gepäckstück untersuchen">🧳</button>
<div id="joystick"><div id="joy-knob"></div></div>
<div id="lookstick"><div id="look-knob">👁️</div></div>
<div id="joystick"><div id="joy-knob">🦶</div></div>
<div id="crosshair"></div>
<div id="lock-hint">🖱️ Klicken, um dich umzusehen — Esc gibt die Maus frei</div>
<div id="toast"></div>