271 lines
9.1 KiB
JavaScript
271 lines
9.1 KiB
JavaScript
// 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();
|
|
});
|
|
} |