3.1 KiB

Raw Blame History Unescape Escape

🐭 Mice! - Mobile Version

Caratteristiche Mobile

Il gioco è stato adattato per dispositivi mobile con le seguenti caratteristiche:

📱 Layout Responsive con Bootstrap 5

Desktop (≥768px): Layout a due colonne con canvas a sinistra e controlli a destra
Mobile (<768px): Layout verticale con controlli touch sotto il canvas

🎮 Controlli Touch

Pad Direzionale (D-Pad)

Freccia Su: Movimento in alto
Freccia Giù: Movimento in basso
Freccia Sinistra: Movimento a sinistra
Freccia Destra: Movimento a destra

Pulsanti Azione

💣 Bomb (Spazio): Piazza una bomba
⚠️ Mine (M): Piazza una mina
☁️ Gas (G): Rilascia gas velenoso
☢️ Nuclear (N): Bomba nucleare (una volta per partita)
⏸️ Pause (P): Metti in pausa il gioco

🎨 Design Adattivo

Canvas responsive che si adatta alla larghezza dello schermo
Pulsanti touch ottimizzati per il tocco (60px di altezza minima)
Feedback visivo su touch (scale animation)
Interfaccia dark theme ottimizzata per mobile

🔧 Ottimizzazioni

user-scalable=no per prevenire lo zoom accidentale
touch-action: none sui controlli per prevenire lo scroll durante il gioco
Prevenzione del menu contestuale su long press
Eventi sia touch che mouse per compatibilità con desktop

Test

Per testare su mobile:

Avvia un server web locale:
```
python -m http.server 8000
```
Apri il browser sul tuo smartphone e naviga a:
```
http://[IL-TUO-IP-LOCALE]:8000/index.html
```
Verifica:
- I controlli touch sono visibili solo su mobile
- Il D-Pad risponde al tocco
- I pulsanti azione funzionano correttamente
- Il canvas si adatta correttamente
- Non c'è zoom accidentale durante il gioco

Compatibilità Browser

✅ Chrome/Edge Mobile (Android/iOS)
✅ Safari Mobile (iOS)
✅ Firefox Mobile (Android)
✅ Samsung Internet

Note Tecniche

Simulazione Eventi Tastiera

I controlli touch simulano eventi KeyboardEvent nativi per garantire compatibilità con il codice Python/Pygame esistente:

function simulateKeyPress(key, type = 'keydown') {
    const event = new KeyboardEvent(type, {
        key: key,
        code: key === ' ' ? 'Space' : `Key${key.toUpperCase()}`,
        keyCode: key.charCodeAt(0),
        which: key.charCodeAt(0),
        bubbles: true,
        cancelable: true
    });
    document.dispatchEvent(event);
    canvas.dispatchEvent(event);
}

Bootstrap Components

Grid System: container-fluid, row, col-* per layout responsive
Modal: Per la creazione profilo
Form Controls: Input, select, checkbox con stili dark
Progress Bar: Per indicare il caricamento degli asset
Icons: Bootstrap Icons per le frecce direzionali

Miglioramenti Futuri

Supporto vibrazione per feedback tattile
Joystick virtuale con movimento analogico
Gesture swipe per movimento rapido
Orientamento landscape automatico su mobile
PWA manifest per installazione come app nativa
Service worker per gioco offline

3.1 KiB Raw Blame History Unescape Escape