diff --git a/MOBILE_README.md b/MOBILE_README.md new file mode 100644 index 0000000..114d2aa --- /dev/null +++ b/MOBILE_README.md @@ -0,0 +1,105 @@ +# 🐭 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: + +1. Avvia un server web locale: + ```bash + python -m http.server 8000 + ``` + +2. Apri il browser sul tuo smartphone e naviga a: + ``` + http://[IL-TUO-IP-LOCALE]:8000/index.html + ``` + +3. 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: + +```javascript +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 diff --git a/index.html b/index.html index b3bc49a..25b4fc8 100644 --- a/index.html +++ b/index.html @@ -2,75 +2,67 @@ - + 🐭 Mice! - Browser Edition + + + -
-

🐭 Mice! - The Game

-

Eliminate the rats before they multiply! A strategic maze game with bombs, mines, and gas.

-

Browser Edition powered by Python + Pygame via Pyodide

- -
Loading Pyodide...
- - -
-
-
-
- -
-
-
- -
-
- -
-
+
+ +
+
+

🐭 Mice! - The Game

+

Eliminate the rats before they multiply!

+

Browser Edition powered by Python + Pygame via Pyodide

+
- -
-
-
+ + +
+
+
Loading Pyodide...
+
+
+ + +
+ +
+
-
Status: Idle
+
Status: Idle
+ + +
+
+
+
Movement
+
+
+ +
+
+ +
+
+
+ +
+
+ +
+
+
+
+
Actions
+
+ + + + + + +
+
+
+
-
-
- - - - + +
+ +
+
+ + + + +
-
- - + +
+ +
-
- - - + +
+ +
+ + +
-
- +
+
-
- - -
0 / 0
+ +
+ +
+
+
+ 0 / 0
-
+ +
Advanced -
- -
Useful for testing the canvas rendering when debugging.
+
+ + Useful for testing the canvas rendering when debugging.
-
-

Controls

-
    + +
    +
    Keyboard Controls
    +
    • Arrow keys / WASD — move
    • Space — bomb
    • M — mine
      • @@ -217,33 +396,75 @@
- -
-

🎮 How to Play

-

Move your cursor around the maze and use your arsenal to eliminate rats before they overrun the level:

-
    -
  • Bombs (Space): Primary weapon. Timer detonates in 4 directions. Chain reactions kill multiple rats.
    • -
  • Mines (M): Place traps in corridors. Triggers when rats step on them, releasing poison gas.
    • -
  • Gas (G): Poison clouds linger and accumulate damage. Great for rat-dense areas.
    • -
  • Nuclear Bomb (N): One-time use. Destroys all rats on screen instantly.
    • -
  • Pause (P): Stop and plan your strategy.
    • -
-

💡 Tips & Strategy

-
    -
  • Early game: Target adult rats to prevent reproduction (200+ ticks).
    • -
  • Use walls to direct bomb explosions efficiently.
    • -
  • Rat population limit: 200. Exceeding this = Game Over.
    • -
  • Collect bonus points by killing multiple rats with a single bomb.
    • -
  • Save the nuclear bomb for when rats get out of control.
    • -
+ + +
+
+
+

🎮 How to Play

+

Move your cursor around the maze and use your arsenal to eliminate rats before they overrun the level:

+
    +
  • Bombs (Space): Primary weapon. Timer detonates in 4 directions. Chain reactions kill multiple rats.
    • +
  • Mines (M): Place traps in corridors. Triggers when rats step on them, releasing poison gas.
    • +
  • Gas (G): Poison clouds linger and accumulate damage. Great for rat-dense areas.
    • +
  • Nuclear Bomb (N): One-time use. Destroys all rats on screen instantly.
    • +
  • Pause (P): Stop and plan your strategy.
    • +
+

💡 Tips & Strategy

+
    +
  • Early game: Target adult rats to prevent reproduction (200+ ticks).
    • +
  • Use walls to direct bomb explosions efficiently.
    • +
  • Rat population limit: 200. Exceeding this = Game Over.
    • +
  • Collect bonus points by killing multiple rats with a single bomb.
    • +
  • Save the nuclear bomb for when rats get out of control.
    • +
+
+
+
+
+ + + + + - - - + +