Aggiunta utlimi file per rifinire la struttura finale del gioco. (mancano alcuni file perche' sono vuoti e manca tutta la parte del database, della classifica, dei punteggi, delle schermate e del nome della squadra)
This commit is contained in:
+271
@@ -0,0 +1,271 @@
|
||||
// PASSO 1: Lista di tutti i rifiuti con la loro categoria
|
||||
const listaRifiuti = [
|
||||
{ img: 'assets/media/img/fase2/rifiuti/bicchiereEbottiglia.webp', tipo: 'vetro' },
|
||||
{ img: 'assets/media/img/fase2/rifiuti/bottiglie.webp', tipo: 'plastica' },
|
||||
{ img: 'assets/media/img/fase2/rifiuti/bucciaBanana.png', tipo: 'umido' },
|
||||
{ img: 'assets/media/img/fase2/rifiuti/torsoloMela.webp', tipo: 'umido' },
|
||||
{ img: 'assets/media/img/fase2/rifiuti/giornale.png', tipo: 'carta' },
|
||||
{ img: 'assets/media/img/fase2/rifiuti/scatolaCartone.png', tipo: 'carta' },
|
||||
{ img: 'assets/media/img/fase2/rifiuti/lattina.png', tipo: 'alluminio' },
|
||||
{ img: 'assets/media/img/fase2/rifiuti/scatolaTonno.webp', tipo: 'alluminio' },
|
||||
{ img: 'assets/media/img/fase2/rifiuti/sacchettoPlastica.png', tipo: 'plastica' },
|
||||
{ img: 'assets/media/img/fase2/rifiuti/marmellata.png', tipo: 'vetro' },
|
||||
{ img: 'assets/media/img/fase2/rifiuti/mozziconiSigaretta.png', tipo: 'indifferenziata' },
|
||||
{ img: 'assets/media/img/fase2/rifiuti/pannolino.png', tipo: 'indifferenziata' }
|
||||
];
|
||||
|
||||
let punteggio = 0;
|
||||
let tempo = 60;
|
||||
const counter = document.getElementById('counter');
|
||||
const scoreDisplay = document.getElementById('score');
|
||||
|
||||
// PASSO 2:Funzione per creare un rifiuto casuale sul bancone
|
||||
function generaRifiuto() {
|
||||
const indiceRandom = Math.floor(Math.random() * listaRifiuti.length);
|
||||
const rifiutoScelto = listaRifiuti[indiceRandom];
|
||||
|
||||
const imgElement = document.createElement('img');
|
||||
imgElement.src = rifiutoScelto.img;
|
||||
imgElement.classList.add('trash');
|
||||
imgElement.dataset.tipo = rifiutoScelto.tipo;
|
||||
|
||||
counter.appendChild(imgElement);
|
||||
attivaDragAndDrop(imgElement);
|
||||
}
|
||||
// Avviamo la prima generazione
|
||||
window.onload = () => {
|
||||
generaRifiuto();
|
||||
// Qui faremo partire anche il timer in futuro
|
||||
};
|
||||
|
||||
|
||||
//PASSO 3: Funzione per rendere un elemento trascinabile
|
||||
function attivaDragAndDrop(elemento) {
|
||||
let staTrascinando = false;
|
||||
|
||||
elemento.addEventListener('mousedown', (e) => {
|
||||
staTrascinando = true;
|
||||
|
||||
elemento.style.mixBlendMode = "normal";
|
||||
|
||||
// 1. IMPORTANTE: Spostiamo l'elemento dal "counter" al "game-container"
|
||||
// Questo evita che l'oggetto scompaia per conflitti di posizionamento
|
||||
const container = document.getElementById('game-container');
|
||||
if (elemento.parentElement.id === 'counter') {
|
||||
container.appendChild(elemento);
|
||||
}
|
||||
|
||||
elemento.style.position = 'absolute';
|
||||
elemento.style.zIndex = 1000;
|
||||
elemento.style.cursor = 'grabbing';
|
||||
|
||||
// Chiamiamo subito la funzione di movimento per posizionarlo sotto il mouse
|
||||
muoviOggetto(e);
|
||||
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
function muoviOggetto(e) {
|
||||
if (!staTrascinando) return;
|
||||
|
||||
const container = document.getElementById('game-container');
|
||||
const rect = container.getBoundingClientRect();
|
||||
|
||||
// Calcolo posizione
|
||||
let x = e.clientX - rect.left - (elemento.offsetWidth / 2);
|
||||
let y = e.clientY - rect.top - (elemento.offsetHeight / 2);
|
||||
|
||||
// Applichiamo le coordinate e resettiamo gli stili del bancone
|
||||
elemento.style.left = x + 'px';
|
||||
elemento.style.top = y + 'px';
|
||||
elemento.style.bottom = 'auto';
|
||||
elemento.style.transform = 'none';
|
||||
}
|
||||
|
||||
document.addEventListener('mousemove', (e) => {
|
||||
if (staTrascinando) {
|
||||
muoviOggetto(e);
|
||||
evidenziaBidoneSotto(elemento);
|
||||
}
|
||||
});
|
||||
|
||||
function evidenziaBidoneSotto(rifiuto) {
|
||||
const bidoni = document.querySelectorAll('.bin');
|
||||
|
||||
bidoni.forEach(bidone => {
|
||||
const rectB = bidone.getBoundingClientRect();
|
||||
const rectR = rifiuto.getBoundingClientRect();
|
||||
|
||||
const sovrapposti = !(rectR.right < rectB.left ||
|
||||
rectR.left > rectB.right ||
|
||||
rectR.bottom < rectB.top ||
|
||||
rectR.top > rectB.bottom);
|
||||
|
||||
if (sovrapposti) {
|
||||
bidone.classList.add('highlight');
|
||||
} else {
|
||||
bidone.classList.remove('highlight');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
document.addEventListener('mouseup', () => {
|
||||
if (staTrascinando) {
|
||||
staTrascinando = false;
|
||||
elemento.style.cursor = 'grab';
|
||||
|
||||
// Ora puoi chiamare la funzione del Punto 4
|
||||
controllaCollisione(elemento);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
//PUNTO 4: Funzione per controllare se il rifiuto è stato depositato correttamente
|
||||
function controllaCollisione(rifiuto) {
|
||||
const bidoni = document.querySelectorAll('.bin');
|
||||
let depositato = false;
|
||||
|
||||
bidoni.forEach(bidone => {
|
||||
const rectB = bidone.getBoundingClientRect();
|
||||
const rectR = rifiuto.getBoundingClientRect();
|
||||
|
||||
const sovrapposti = !(rectR.right < rectB.left ||
|
||||
rectR.left > rectB.right ||
|
||||
rectR.bottom < rectB.top ||
|
||||
rectR.top > rectB.bottom);
|
||||
|
||||
if (sovrapposti) {
|
||||
depositato = true;
|
||||
|
||||
// PORTIAMO IL BIDONE IN PRIMO PIANO
|
||||
bidone.style.zIndex = "2000";
|
||||
|
||||
if (rifiuto.dataset.tipo === bidone.dataset.type) {
|
||||
// CORRETTO
|
||||
punteggio += 1;
|
||||
bidone.classList.add('glow-success');
|
||||
bidone.style.transform = "scale(1.1)";
|
||||
|
||||
setTimeout(() => {
|
||||
bidone.classList.remove('glow-success');
|
||||
bidone.style.transform = "scale(1)";
|
||||
bidone.style.zIndex = "1"; // Ritorna al suo posto dopo l'effetto
|
||||
}, 400);
|
||||
} else {
|
||||
// SBAGLIATO
|
||||
punteggio = punteggio;
|
||||
bidone.classList.add('glow-error');
|
||||
|
||||
setTimeout(() => {
|
||||
bidone.classList.remove('glow-error');
|
||||
bidone.style.zIndex = "1"; // Ritorna al suo posto dopo l'effetto
|
||||
}, 400);
|
||||
}
|
||||
|
||||
document.getElementById('score').innerText = punteggio;
|
||||
rifiuto.remove();
|
||||
setTimeout(generaRifiuto, 500);
|
||||
}
|
||||
});
|
||||
|
||||
if (!depositato) {
|
||||
riposizionaSulBancone(rifiuto);
|
||||
}
|
||||
}
|
||||
|
||||
// Usiamo nomi diversi per non confondere il browser
|
||||
let timerIntervallo;
|
||||
let tempoRimanente;
|
||||
|
||||
function avviaTimer(secondiIniziali) {
|
||||
const displayTimer = document.getElementById('timer');
|
||||
|
||||
// Inizializziamo la variabile globale con il valore ricevuto
|
||||
tempoRimanente = secondiIniziali;
|
||||
displayTimer.innerText = tempoRimanente;
|
||||
|
||||
// Puliamo timer precedenti
|
||||
clearInterval(timerIntervallo);
|
||||
|
||||
timerIntervallo = setInterval(() => {
|
||||
tempoRimanente--; // Sottraiamo un secondo alla variabile globale
|
||||
displayTimer.innerText = tempoRimanente; // Aggiorniamo lo schermo
|
||||
|
||||
if (tempoRimanente <= 0) {
|
||||
clearInterval(timerIntervallo);
|
||||
tempoRimanente = 0;
|
||||
displayTimer.innerText = "0";
|
||||
mostraFineGioco();//LISA E' COMPITO TUO!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
window.onload = () => {
|
||||
punteggio = 0;
|
||||
scoreDisplay.innerText = punteggio;
|
||||
|
||||
|
||||
// Recuperiamo il valore dal localStorage (se vuoto mettiamo 10 come base)
|
||||
let puntiSalvati = localStorage.getItem('punteggioFase1');
|
||||
let tempoDaImpostare = puntiSalvati * 5;
|
||||
|
||||
generaRifiuto();
|
||||
|
||||
// Facciamo partire il timer con il valore calcolato
|
||||
avviaTimer(tempoDaImpostare);
|
||||
};
|
||||
|
||||
function riposizionaSulBancone(rifiuto) {
|
||||
const counter = document.getElementById('counter');
|
||||
counter.appendChild(rifiuto);
|
||||
|
||||
// Ripristiniamo l'effetto per ignorare lo sfondo nero sul bancone marrone
|
||||
rifiuto.style.mixBlendMode = "screen";
|
||||
|
||||
// Resettiamo le posizioni per rimetterlo al centro del bancone
|
||||
rifiuto.style.position = 'relative';
|
||||
rifiuto.style.left = "auto";
|
||||
rifiuto.style.top = "auto";
|
||||
rifiuto.style.bottom = "auto";
|
||||
rifiuto.style.transform = "none";
|
||||
}
|
||||
|
||||
function mostraFineGioco() {
|
||||
// Blocca la generazione di nuovi rifiuti
|
||||
clearInterval(timerIntervallo);
|
||||
|
||||
// Mostra un messaggio finale più gradevole
|
||||
const messaggio = document.createElement('div');
|
||||
messaggio.id = 'fine-gioco';
|
||||
messaggio.innerHTML = `
|
||||
<h2>Tempo scaduto!</h2>
|
||||
<p>Il tuo punteggio finale è: <strong>${punteggio}</strong></p>
|
||||
<button id="restart-btn">Gioca di nuovo</button>
|
||||
`;
|
||||
messaggio.style.position = 'absolute';
|
||||
messaggio.style.top = '50%';
|
||||
messaggio.style.left = '50%';
|
||||
messaggio.style.transform = 'translate(-50%, -50%)';
|
||||
messaggio.style.backgroundColor = 'rgba(255, 255, 255, 0.9)';
|
||||
messaggio.style.padding = '20px';
|
||||
messaggio.style.borderRadius = '10px';
|
||||
messaggio.style.textAlign = 'center';
|
||||
messaggio.style.zIndex = '3000';
|
||||
|
||||
document.body.appendChild(messaggio);
|
||||
|
||||
// Salva il punteggio nel localStorage
|
||||
localStorage.setItem('punteggioFase2', punteggio);
|
||||
|
||||
// Aggiunge il pulsante per ricominciare
|
||||
document.getElementById('restart-btn').addEventListener('click', () => {
|
||||
document.body.removeChild(messaggio);
|
||||
punteggio = 0;
|
||||
scoreDisplay.innerText = punteggio;
|
||||
avviaTimer(60); // o il tempo che vuoi
|
||||
generaRifiuto();
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user