Save the Island è un videogioco web in 3D nato per sensibilizzare gli utenti sulla gestione dei rifiuti e l'importanza del riciclo. Il progetto adotta un'architettura Fullstack basata su XAMPP per la gestione di una classifica globale e il salvataggio dei record.

🛠️ Architettura Tecnica

Entrypoint: index.php (Pagina di atterraggio con trailer e controlli).
Backend: PHP + MySQL (XAMPP) per la gestione del database e dei punteggi.
Frontend: Three.js (motore 3D), JavaScript (ES6+), CSS3.
Trasferimento Dati: Utilizzo di Cookie temporanei o localStorage per mantenere i dati tra le diverse fasi di gioco.

🗺️ Roadmap di Sviluppo

🚩 Milestone Generali (Nucleo del Progetto)

[⚠️] Design UI & Mockup: Finalizzazione degli asset grafici (basati sullo schema Draw.io).
[❌] Configurazione Database: Creazione delle tabelle classifica e records su MySQL.
[❌] Logica Entrypoint: Sviluppo di index.php con video di sfondo e overlay dei comandi.
[❌] Sistema di Trasferimento: Implementazione logica per il passaggio dei dati dalla Fase 1 alla Fase 2.
[❌] Gestione Impostazioni: Pannello per regolare il volume e inserire il nome della squadra (servira' nella classifica).
[❌] Pagina Dinamica: Creazione della classifica in PHP con recupero dati in tempo reale.

🏝️ Fase 1: La Raccolta (Timer: 1m)

[✅] Ambiente di gioco: Modellazione dell'isola 3D con Three.js e gestione dei confini della mappa.
[✅] Sistema di Spawn: Posizionamento casuale dei rifiuti su 20 coordinate casuali.
[✅] Sistema Ostacoli: Inserimento di modelli 3D di alberi e oggetti ambientali decorativi.
[✅] Meccaniche di Raccolta: Gestione delle collisioni e incremento del punteggio ecologico.
[✅] Interfaccia (HUD): Overlay con Timer (60s), contatore rifiuti e disattivazione della pausa.
[⚠️] Schermata di caricamento: Schermata di caricamento iniziale
[⚠️] Schermata iniziale: Schermata iniziale
[❌] Rifinitura (Polish): Animazioni di raccolta e ottimizzazione delle mesh 3D.
[❌] Timer: Meccanica del timer per il tempo di raccolta dei rifiuti
[❌] Personaggio: Cilindro che rappresenta il personaggio (fatto per collisioni piu' precise)

♻️ Fase 2: Lo Smistamento (Timer: 5s * Punteggio)

[❌] Timer Dinamico: Calcolo del tempo a disposizione basato sul successo della Fase 1.
[❌] Motore di Smistamento: Logica di convalida (Rifiuto ↔️ Bidone corretto).
[❌] Interfaccia Utente: Layout con i 6 bidoni (Plastica, Umido, Indifferenziata, Vetro, Carta, Alluminio).
[❌] Gestione Input: Meccanica di interazione tramite Drag & Drop o selezione rapida.
[❌] Feedback Visivo: Effetti sonori e visivi per risposte corrette o errate.

🏆 Fase Finale: Classifica & Record

[❌] Calcolo Punteggio: Elaborazione dei risultati finali e calcolo dei bonus velocità.
[❌] Verifica Record: Confronto del punteggio con il record personale salvato.
[❌] Classifica Globale: Script PHP per l'invio e la visualizzazione della Top 10 dal database.
[❌] Schermata Game Over: Riepilogo statistiche e opzione per riavviare la partita.

📂 Struttura delle Cartelle

/assets - Modelli 3D, video loop, texture dei rifiuti e icone dei bidoni.
/css - Fogli di stile per i menu e l'interfaccia di gioco (HUD).
/js - Logica core e rendering (Three.js, stage1.js, stage2.js).
/php - Script per il backend (db_connect.php, save_score.php).
/games - Pagine HTML dedicate alle sessioni di gioco (fase1.html, fase2.html).
index.php - Homepage e controller principale del progetto.

Languages

JavaScript 37.8%

CSS 34.8%

PHP 16.2%

HTML 11.1%

Hack 0.1%