一只萌萌小番薯
啊，游戏需要全屏才能看到垃圾请参阅不同的窗格。css 窗格可以放在 css 文件中，JS 窗格内容可以放在外部 JS 文件中。这里根本不需要jQuery链接标签和外部JS脚本进入头部，链接到外部CSS文件也是如此我不明白“runme”是做什么的，似乎并不重要window.addEventListener("load", function() { document.getElementById("gioca").addEventListener("click", timerApparizioni); if (document.getElementById("runme")) { document.getElementById("runme").addEventListener("click", function() { let SIZE = 4; let r = (Math.floor(Math.random() * SIZE)) + 1; let c = (Math.floor(Math.random() * SIZE)) + 1; document.querySelector("section.oggettoElements:nth-of-type(" + r + ") i:nth-child(" + c + ")").style.color = "#FF0000"; }) }})const delay = 3000;// Funzione per iniziare a giocare: quando l'utente preme "gioca" iniziano ad apparire gli oggetti e si avvia un timerfunction timerApparizioni() { timerOggetti = setInterval(apparizioneOggetto, delay);}let tuttiVisibili = false;// Funzione per prendere un oggetto a caso della tabella e renderlo visibilefunction apparizioneOggetto(eve) { let oggettoScelto, colonna, riga; tuttiVisibili = !( Array .from(document.querySelectorAll('div[id^="c-"]')) .some((pe_grid) => { return pe_grid.style.visibility !== 'visible'; }) ); if (tuttiVisibili) { document.getElementById('gioca').setAttribute('disabled', 'disabled'); } else { do { colonna = 1 + Math.floor(4 * Math.random()); riga = 1 + Math.floor(4 * Math.random()); oggettoScelto = document.querySelector(`#c-${colonna}${riga}`); // In alternativa: document.getElementById(`c-${colonna}${riga}`) } while (oggettoScelto.style.visibility === 'visible'); oggettoScelto.style.visibility = 'visible'; }}window.addEventListener("load", function() { document.getElementById("gioca").addEventListener("click", timerApparizioni); if (document.getElementById("runme")) { document.getElementById("runme").addEventListener("click", function() { let SIZE = 4; let r = (Math.floor(Math.random() * SIZE)) + 1; let c = (Math.floor(Math.random() * SIZE)) + 1; document.querySelector("section.oggettoElements:nth-of-type(" + r + ") i:nth-child(" + c + ")").style.color = "#FF0000"; }) }})// funzione per andare alla pagina "menu principale"function GoToMainMenu() { location.href = "mainMenu.html";}// PARTE INIZIALIZZAZIONE gioco// seleziono per classe oggetti e contenitoriconst oggettoElements = document.querySelectorAll(".oggetto");const contenitoreElements = document.querySelectorAll(".contenitore");// punteggio e vitevar vite = 3;var score = 0;const divScore = document.getElementById("score");// PARTE DEI LISTENERS per il gioco// Aggiungo un listener ad ogni oggetto per "ascoltare" quando inizia il drag oggettoElements.forEach(ogg => { ogg.addEventListener("dragstart", dragStart);});// Aggiungo più listener ad ogni elemento per "ascoltare" cosa succede tra l'inizio del drag e la sua fine (drop)contenitoreElements.forEach(ogg => { ogg.addEventListener("dragenter", dragEnter); // "Ascolta" se un oggetto è posizionato sopra ad un contenitore ogg.addEventListener("dragover", dragOver); // "Ascolta" se un oggetto è rilasciato sopra ad un contenitore ogg.addEventListener("dragleave", dragLeave); // "Ascolta" se un oggetto va via da un contenitore ogg.addEventListener("drop", drop); // "Ascolta" se un oggetto viene rilasciato sopra ad un contenitore});// PARTE DEGLI EVENTI DRAG AND DROP per il gioco// Evento "inizio a prendere un oggetto"function dragStart(event) { event.dataTransfer.setData("text", event.target.id);}// Se un oggetto viene posizioneto sopra al contenitore, viene aggiunto "contenitore-over" alla classe del contenitore// Determina l'effetto visivo dell'ingrandirsi di un contenitore quando un oggetto viene trascinato soprafunction dragEnter(event) { if (!event.target.classList.contains("dropped")) { event.target.classList.add("contenitore-hover"); }}// "Lascia il comando all'itente": evita la gestione di default e impedisce che venga droppato in automaticofunction dragOver(event) { if (!event.target.classList.contains("dropped")) { event.preventDefault(); /* developer.mozilla.org Il metodo preventDefault() dell'interfaccia Event dice all'user agent che se l'evento non viene esplicitamente gestito, la sua azione predefinita non dovrebbe essere presa come normalmente. L'evento continua a propagarsi come al solito, a meno che uno dei suoi listener di eventi non chiami stopPropagation() o stopImmediatePropagation(), uno dei due interrompa la propagazione contemporaneamente. */ }}/* Se un oggetto viene posizionato sopra ad un contenitore, esso viene ingrandito dalla funzione dragEnter.Se poi il giocatore "cambia idea", e trascina lontano dal contenitore il suo oggetto, esso deve tornare della misura inizialeRimuovo "contenitore-over" dalla classe del contenitore */function dragLeave(event) { if (!event.target.classList.contains("dropped")) { event.target.classList.remove("contenitore-hover"); }}var counterRightDropped = 0;/* gestione del rilascio/drop: Se l'oggetto viene rilasciato sopra ad un contenitore:- il contenitore ritorna della misura iniziale di default (come in dragLeave, viene rimosso "contenitore-over" dalla classe)- viene fatto un confronto tra l'id parziale dell'oggetto e l'id accettabile dal contenitore.- Se l'abbinamento è giusto (ossia confronto = true), viene aggiunto "dragged" alla classe dell'oggetto, facendo in modo che non sia più disponibile (effetto visivo css) ne' prendibile (draggable=false)- Viene incrementato o decrementato il contatore del punteggio a seconda dell'esisto del confronto */function drop(event) { event.target.classList.remove("contenitore-hover"); const idAccettabileContenitore = event.target.getAttribute("idAccettabile"); // Prendo l'id che il contenitore accetta const idOggetto = event.dataTransfer.getData("text"); // Con dragStart ho settato l'attributo text a "event.target.id". Qui lo riprendo (ex: "11") const sottostringaID = idOggetto.substr(0, 3); // Sottostringa dell'id dell'oggetto (ex. da "13" a "1") const vita1 = document.getElementById("vita1"); const vita2 = document.getElementById("vita2"); const vita3 = document.getElementById("vita3"); const giocabutton = document.getElementById('gioca'); const nuovaPart = document.getElementById("nuovaPartita"); if (sottostringaID === idAccettabileContenitore) { const oggettoGiusto = document.getElementById(idOggetto); oggettoGiusto.classList.add("dragged"); oggettoGiusto.setAttribute("draggable", "false"); score++; counterRightDropped++; divScore.innerText = "Punteggio: " + score; } else { if (vita1.style.visibility === "visible") { vita1.style.visibility = 'hidden'; } else if (vita3.style.visibility === "visible") { vita3.style.visibility = 'hidden'; } else { vita2.style.visibility = 'hidden'; } score = score - 2; divScore.innerText = "Punteggio: " + score; vite = vite - 1; if (vite == 0) { vita2.style.visibility = 'hidden'; giocabutton.style.visibility = 'hidden'; setTimeout(function() { alert("GAME OVER! \nVite-Alberelli esauriti! \nPunteggio finale: " + score); }, 20) clearInterval(timerOggetti); nuovaPart.style.visibility = 'visible'; } } if (counterRightDropped === 16) { giocabutton.style.visibility = 'hidden'; oggettoElements.forEach(ogg => { ogg.setAttribute("class", "fas fa-check-circle oggetto"); }); setTimeout(function() { alert("HAI VINTO! \nPunteggio finale: " + score); }, 50) clearInterval(timerOggetti); nuovaPart.style.visibility = 'visible'; }}body { margin: 0; height: 100vh; background: linear-gradient(to right bottom, gold, limegreen);}h1,h2,h3 { margin: 0 0 3px 0;}h1 { text-align: center; color: green; font: bold 52px Helvetica, Arial, Sans-Serif; text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902;}h1:hover { position: relative; top: -3px; left: -3px; text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902, 4px 4px #fe4902, 5px 5px #fe4902, 6px 6px #fe4902; cursor: pointer;}#time { color: navy; font: bold 24px Helvetica, Arial, Sans-Serif; text-align: center;}#score { color: blue; font: bold 24px Helvetica, Arial, Sans-Serif; text-shadow: 1px 1px #02a2fe, 2px 2px #02a2fe, 3px 3px #02a2fe; text-align: center;}h2 { color: orange; font: bold 34px Helvetica, Arial, Sans-Serif; text-shadow: 1px 1px #02a2fe, 2px 2px #02a2fe, 3px 3px #02a2fe; text-align: center;}h3 { color: navy; font: bold 24px Helvetica, Arial, Sans-Serif; text-shadow: 1px 1px #02a2fe, 2px 2px #02a2fe, 3px 3px #02a2fe; text-align: center;}.oggettoElements { display: flex; justify-content: center; margin: 32px;}.oggetto { height: 80px; width: 80px; display: flex; align-items: center; justify-content: center; font-size: 64px; margin: 0px 8px; cursor: move; transition: opacity 0.2s;}.oggetto:hover { opacity: 0.5;}.contenitore { height: 104px; width: 128px; margin: 16px auto; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; font-size: 64px; font-weight: bold; background-color: #fff; border: 3px dashed #111; transition: border-width 0.2s, transform 0.2s, background-color 0.4s;}.flexcontainer { display: flex; flex-direction: row;}.contenitore span { font-size: 20px; pointer-events: none; /* The element is never the target of pointer events */}.contenitore.contenitore-hover { border-width: 5px; transform: scale(1.3);}.contenitore.dropped { border-style: solid; color: #fff;}.contenitore.dropped i { pointer-events: none;}.oggetto.dragged { user-select: none; opacity: 0.1; cursor: default;}.oggetto.dragged:hover { opacity: 0.1;}.tabella { height: 70%; width: 20%; margin: 16px auto; display: flex; justify-content: center; align-items: center; flex-direction: column;}body>section { display: table; align: center;}section.oggettoElements { display: table-row;}section.oggettoElements>div { display: table-cell; height: 80px; width: 80px; align-items: center; justify-content: center; visibility: hidden; text-align: center;}section.oggettoElements>div>div { display: flex; height: 30px; width: 100px; align-items: center;}div>span { flex: 1; text-align: center}#gioca { text-align: center; cursor: pointer; visibility: visible;}.tree { height: 50px; width: 50px; margin: 16px auto; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; font-size: 40px; font-weight: bold;}.flexalberi { display: flex; flex-direction: row;}#nuovaPartita { cursor: pointer;}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css"><div onClick="GoToMainMenu();"> <h1>Trash CAN or trash CAN't?</h1></div><div id="gioca"> <h2><u>GIOCA</u> <h2></div><div> <h3>Abbina il rifiuto al bidone giusto!</h3></div><div id="nuovaPartita" onClick="history.go(0);" style="visibility:hidden;"> <h2>GIOCA ANCORA</h2></div><div id="score">Punteggio: 0</div><!-- section contenente le vite-alberelli --><section class="flexalberi"> <i class="fas fa-tree tree" id="vita1" style="color: #008000; visibility:visible;"></i> <i class="fas fa-tree tree" id="vita2" style="color: #008000; visibility:visible;"></i> <i class="fas fa-tree tree" id="vita3" style="color: #008000; visibility:visible;"></i></section><!-- section contenente i contenitori (fissi) in cui andranno trascinati gli oggetti --><section class="contenitore-elements flexcontainer"> <div class="fas fa-trash contenitore" idAccettabile="c-1" style="color: #0000FF;"><span>Carta</span></div> <div class="fas fa-trash contenitore" idAccettabile="c-2" style="color: #008000;"><span>Vetro</span></div> <div class="fas fa-trash contenitore" idAccettabile="c-3" style="color: #FFD700;"><span>Plastica</span></div> <div class="fas fa-trash contenitore" idAccettabile="c-4" style="color: #8B4513;"><span>Organico</span></div></section><!-- Tabella contenente gli oggetti che appariranno sullo schermo durante la partita --><section class="tabella"> <section class="oggettoElements"> <div class="fas fa-prescription-bottle oggetto" draggable="true" style="color: #000000;" id="c-32"> <div><span></span></div> </div> <div class="fas fa-bone oggetto" draggable="true" style="color: #000000;" id="c-42"> <div><span></span></div> </div> <div class="fas fa-flask oggetto" draggable="true" style="color: #000000;" id="c-22"> <div><span></span></div> </div> <div class="fas fa-box-open oggetto" draggable="true" style="color: #000000;" id="c-12"> <div><span></span></div> </div> </section> <section class="oggettoElements"> <div class="far fa-newspaper oggetto" draggable="true" style="color: #000000;" id="c-11"> <div><span></span></div> </div> <div class="fas fa-wine-glass-alt oggetto" draggable="true" style="color: #000000;" id="c-21"> <div><span></span></div> </div> <div class="fas fa-wine-bottle oggetto" draggable="true" style="color: #000000;" id="c-31"> <div><span></span></div> </div> <div class="fas fa-apple-alt oggetto" draggable="true" style="color: #000000;" id="c-41"> <div><span></span></div> </div> </section> <section class="oggettoElements"> <div class="far fa-hourglass oggetto" draggable="true" style="color: #000000;" id="c-23"> <div><span></span></div> </div> <div class="fas fa-drumstick-bite oggetto" draggable="true" style="color: #000000;" id="c-43"> <div><span></span></div> </div> <div class="far fa-map oggetto" draggable="true" style="color: #000000;" id="c-13"> <div><span></span></div> </div> <div class="fas fa-utensils oggetto" draggable="true" style="color: #000000;" id="c-33"> <div><span></span></div> </div> </section> <section class="oggettoElements"> <div class="far fa-file oggetto" draggable="true" style="color: #000000;" id="c-14"> <div><span></span></div> </div> <div class="fas fas fa-cookie-bite oggetto" draggable="true" style="color: #000000;" id="c-44"> <div><span></span></div> </div> <div class="fas fa-shopping-bag oggetto" draggable="true" style="color: #000000;" id="c-34"> <div><span></span></div> </div> <div class="fas fa-vial oggetto" draggable="true" style="color: #000000;" id="c-24"> <div><span></span></div> </div> </section></section>
杨魅力
我让它工作，有错误，有以下更改。$(function() { const delay = 3000; // Funzione per iniziare a giocare: quando l'utente preme "gioca" iniziano ad apparire gli oggetti e si avvia un timer function timerApparizioni() { timerOggetti = setInterval(apparizioneOggetto, delay); } let tuttiVisibili = false; // Funzione per prendere un oggetto a caso della tabella e renderlo visibile function apparizioneOggetto(eve) { let oggettoScelto, colonna, riga; tuttiVisibili = !( Array .from(document.querySelectorAll('div[id^="c-"]')) .some((pe_grid) => { return pe_grid.style.visibility !== 'visible'; }) ); if (tuttiVisibili) { document.getElementById('gioca').setAttribute('disabled', 'disabled'); } else { do { colonna = 1 + Math.floor(4 * Math.random()); riga = 1 + Math.floor(4 * Math.random()); oggettoScelto = document.querySelector(`#c-${colonna}${riga}`); // In alternativa: document.getElementById(`c-${colonna}${riga}`) } while (oggettoScelto.style.visibility === 'visible'); oggettoScelto.style.visibility = 'visible'; } } // funzione per andare alla pagina "menu principale" function GoToMainMenu() { location.href = "mainMenu.html"; } // PARTE INIZIALIZZAZIONE gioco // seleziono per classe oggetti e contenitori const oggettoElements = document.querySelectorAll(".oggetto"); const contenitoreElements = document.querySelectorAll(".contenitore"); // punteggio e vite var vite = 3; var score = 0; const divScore = document.getElementById("score"); // PARTE DEI LISTENERS per il gioco // Aggiungo un listener ad ogni oggetto per "ascoltare" quando inizia il drag oggettoElements.forEach(ogg => { ogg.addEventListener("dragstart", dragStart); }); // Aggiungo più listener ad ogni elemento per "ascoltare" cosa succede tra l'inizio del drag e la sua fine (drop) contenitoreElements.forEach(ogg => { ogg.addEventListener("dragenter", dragEnter); // "Ascolta" se un oggetto è posizionato sopra ad un contenitore ogg.addEventListener("dragover", dragOver); // "Ascolta" se un oggetto è rilasciato sopra ad un contenitore ogg.addEventListener("dragleave", dragLeave); // "Ascolta" se un oggetto va via da un contenitore ogg.addEventListener("drop", drop); // "Ascolta" se un oggetto viene rilasciato sopra ad un contenitore }); // PARTE DEGLI EVENTI DRAG AND DROP per il gioco // Evento "inizio a prendere un oggetto" function dragStart(event) { event.dataTransfer.setData("text", event.target.id); } // Se un oggetto viene posizioneto sopra al contenitore, viene aggiunto "contenitore-over" alla classe del contenitore // Determina l'effetto visivo dell'ingrandirsi di un contenitore quando un oggetto viene trascinato sopra function dragEnter(event) { if (!event.target.classList.contains("dropped")) { event.target.classList.add("contenitore-hover"); } } // "Lascia il comando all'itente": evita la gestione di default e impedisce che venga droppato in automatico function dragOver(event) { if (!event.target.classList.contains("dropped")) { event.preventDefault(); /* developer.mozilla.org Il metodo preventDefault() dell'interfaccia Event dice all'user agent che se l'evento non viene esplicitamente gestito, la sua azione predefinita non dovrebbe essere presa come normalmente. L'evento continua a propagarsi come al solito, a meno che uno dei suoi listener di eventi non chiami stopPropagation() o stopImmediatePropagation(), uno dei due interrompa la propagazione contemporaneamente. */ } } /* Se un oggetto viene posizionato sopra ad un contenitore, esso viene ingrandito dalla funzione dragEnter. Se poi il giocatore "cambia idea", e trascina lontano dal contenitore il suo oggetto, esso deve tornare della misura iniziale Rimuovo "contenitore-over" dalla classe del contenitore */ function dragLeave(event) { if (!event.target.classList.contains("dropped")) { event.target.classList.remove("contenitore-hover"); } } var counterRightDropped = 0; /* gestione del rilascio/drop: Se l'oggetto viene rilasciato sopra ad un contenitore: - il contenitore ritorna della misura iniziale di default (come in dragLeave, viene rimosso "contenitore-over" dalla classe) - viene fatto un confronto tra l'id parziale dell'oggetto e l'id accettabile dal contenitore. - Se l'abbinamento è giusto (ossia confronto = true), viene aggiunto "dragged" alla classe dell'oggetto, facendo in modo che non sia più disponibile (effetto visivo css) ne' prendibile (draggable=false) - Viene incrementato o decrementato il contatore del punteggio a seconda dell'esisto del confronto */ function drop(event) { event.target.classList.remove("contenitore-hover"); const idAccettabileContenitore = event.target.getAttribute("idAccettabile"); // Prendo l'id che il contenitore accetta const idOggetto = event.dataTransfer.getData("text"); // Con dragStart ho settato l'attributo text a "event.target.id". Qui lo riprendo (ex: "11") const sottostringaID = idOggetto.substr(0, 3); // Sottostringa dell'id dell'oggetto (ex. da "13" a "1") const vita1 = document.getElementById("vita1"); const vita2 = document.getElementById("vita2"); const vita3 = document.getElementById("vita3"); const giocabutton = document.getElementById('gioca'); const nuovaPart = document.getElementById("nuovaPartita"); if (sottostringaID === idAccettabileContenitore) { const oggettoGiusto = document.getElementById(idOggetto); oggettoGiusto.classList.add("dragged"); oggettoGiusto.setAttribute("draggable", "false"); score++; counterRightDropped++; divScore.innerText = "Punteggio: " + score; } else { if (vita1.style.visibility === "visible") { vita1.style.visibility = 'hidden'; } else if (vita3.style.visibility === "visible") { vita3.style.visibility = 'hidden'; } else { vita2.style.visibility = 'hidden'; } score = score - 2; divScore.innerText = "Punteggio: " + score; vite = vite - 1; if (vite == 0) { vita2.style.visibility = 'hidden'; giocabutton.style.visibility = 'hidden'; setTimeout(function() { alert("GAME OVER! \nVite-Alberelli esauriti! \nPunteggio finale: " + score); }, 20) clearInterval(timerOggetti); nuovaPart.style.visibility = 'visible'; } } if (counterRightDropped === 16) { giocabutton.style.visibility = 'hidden'; oggettoElements.forEach(ogg => { ogg.setAttribute("class", "fas fa-check-circle oggetto"); }); setTimeout(function() { alert("HAI VINTO! \nPunteggio finale: " + score); }, 50) clearInterval(timerOggetti); nuovaPart.style.visibility = 'visible'; } }});body { margin: 0; height: 100vh; background: linear-gradient(to right bottom, gold, limegreen);}h1,h2,h3 { margin: 0 0 3px 0;}h1 { text-align: center; color: green; font: bold 52px Helvetica, Arial, Sans-Serif; text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902;}h1:hover { position: relative; top: -3px; left: -3px; text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902, 4px 4px #fe4902, 5px 5px #fe4902, 6px 6px #fe4902; cursor: pointer;}#time { color: navy; font: bold 24px Helvetica, Arial, Sans-Serif; text-align: center;}#score { color: blue; font: bold 24px Helvetica, Arial, Sans-Serif; text-shadow: 1px 1px #02a2fe, 2px 2px #02a2fe, 3px 3px #02a2fe; text-align: center;}h2 { color: orange; font: bold 34px Helvetica, Arial, Sans-Serif; text-shadow: 1px 1px #02a2fe, 2px 2px #02a2fe, 3px 3px #02a2fe; text-align: center;}h3 { color: navy; font: bold 24px Helvetica, Arial, Sans-Serif; text-shadow: 1px 1px #02a2fe, 2px 2px #02a2fe, 3px 3px #02a2fe; text-align: center;}.oggettoElements { display: flex; justify-content: center; margin: 32px;}.oggetto { height: 80px; width: 80px; display: flex; align-items: center; justify-content: center; font-size: 64px; margin: 0px 8px; cursor: move; transition: opacity 0.2s;}.oggetto:hover { opacity: 0.5;}.contenitore { height: 104px; width: 128px; margin: 16px auto; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; font-size: 64px; font-weight: bold; background-color: #fff; border: 3px dashed #111; transition: border-width 0.2s, transform 0.2s, background-color 0.4s;}.flexcontainer { display: flex; flex-direction: row;}.contenitore span { font-size: 20px; pointer-events: none; /* The element is never the target of pointer events */}.contenitore.contenitore-hover { border-width: 5px; transform: scale(1.3);}.contenitore.dropped { border-style: solid; color: #fff;}.contenitore.dropped i { pointer-events: none;}.oggetto.dragged { user-select: none; opacity: 0.1; cursor: default;}.oggetto.dragged:hover { opacity: 0.1;}.tabella { height: 70%; width: 20%; margin: 16px auto; display: flex; justify-content: center; align-items: center; flex-direction: column;}body>section { display: table; align: center;}section.oggettoElements { display: table-row;}section.oggettoElements>div { display: table-cell; height: 80px; width: 80px; align-items: center; justify-content: center; visibility: hidden; text-align: center;}section.oggettoElements>div>div { display: flex; height: 30px; width: 100px; align-items: center;}div>span { flex: 1; text-align: center}#gioca { text-align: center; cursor: pointer; visibility: visible;}.tree { height: 50px; width: 50px; margin: 16px auto; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; font-size: 40px; font-weight: bold;}.flexalberi { display: flex; flex-direction: row;}#nuovaPartita { cursor: pointer;}<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>GAME</title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css"> <link rel="stylesheet" type="text/css" href="CSSTEST.css"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script> <script type="text/javascript" src="JSTEST.js"></script></head><body> <div onClick="GoToMainMenu();"> <h1>Trash CAN or trash CAN't?</h1> </div> <div id="gioca" onclick="timerApparizioni();"> <h2><u>GIOCA</u> <h3> </div> <div> <h3>Abbina il rifiuto al bidone giusto!</h3> </div> <div id="nuovaPartita" onClick="history.go(0);" style="visibility:hidden;"> <h2>GIOCA ANCORA</h2> </div> <div id="score">Punteggio: 0</div> <!-- section contenente le vite-alberelli --> <section class="flexalberi"> <i class="fas fa-tree tree" id="vita1" style="color: #008000; visibility:visible;"></i> <i class="fas fa-tree tree" id="vita2" style="color: #008000; visibility:visible;"></i> <i class="fas fa-tree tree" id="vita3" style="color: #008000; visibility:visible;"></i> </section> <!-- section contenente i contenitori (fissi) in cui andranno trascinati gli oggetti --> <section class="contenitore-elements flexcontainer"> <div class="fas fa-trash contenitore" idAccettabile="c-1" style="color: #0000FF;"><span>Carta</span></div> <div class="fas fa-trash contenitore" idAccettabile="c-2" style="color: #008000;"><span>Vetro</span></div> <div class="fas fa-trash contenitore" idAccettabile="c-3" style="color: #FFD700;"><span>Plastica</span></div> <div class="fas fa-trash contenitore" idAccettabile="c-4" style="color: #8B4513;"><span>Organico</span></div> </section> <!-- Tabella contenente gli oggetti che appariranno sullo schermo durante la partita --> <section class="tabella"> <section class="oggettoElements"> <div class="fas fa-prescription-bottle oggetto" draggable="true" style="color: #000000;" id="c-32"> <div><span></span></div> </div> <div class="fas fa-bone oggetto" draggable="true" style="color: #000000;" id="c-42"> <div><span></span></div> </div> <div class="fas fa-flask oggetto" draggable="true" style="color: #000000;" id="c-22"> <div><span></span></div> </div> <div class="fas fa-box-open oggetto" draggable="true" style="color: #000000;" id="c-12"> <div><span></span></div> </div> </section> <section class="oggettoElements"> <div class="far fa-newspaper oggetto" draggable="true" style="color: #000000;" id="c-11"> <div><span></span></div> </div> <div class="fas fa-wine-glass-alt oggetto" draggable="true" style="color: #000000;" id="c-21"> <div><span></span></div> </div> <div class="fas fa-wine-bottle oggetto" draggable="true" style="color: #000000;" id="c-31"> <div><span></span></div> </div> <div class="fas fa-apple-alt oggetto" draggable="true" style="color: #000000;" id="c-41"> <div><span></span></div> </div> </section> <section class="oggettoElements"> <div class="far fa-hourglass oggetto" draggable="true" style="color: #000000;" id="c-23"> <div><span></span></div> </div> <div class="fas fa-drumstick-bite oggetto" draggable="true" style="color: #000000;" id="c-43"> <div><span></span></div> </div> <div class="far fa-map oggetto" draggable="true" style="color: #000000;" id="c-13"> <div><span></span></div> </div> <div class="fas fa-utensils oggetto" draggable="true" style="color: #000000;" id="c-33"> <div><span></span></div> </div> </section> <section class="oggettoElements"> <div class="far fa-file oggetto" draggable="true" style="color: #000000;" id="c-14"> <div><span></span></div> </div> <div class="fas fas fa-cookie-bite oggetto" draggable="true" style="color: #000000;" id="c-44"> <div><span></span></div> </div> <div class="fas fa-shopping-bag oggetto" draggable="true" style="color: #000000;" id="c-34"> <div><span></span></div> </div> <div class="fas fa-vial oggetto" draggable="true" style="color: #000000;" id="c-24"> <div><span></span></div> </div> </section> </section></body></html>基本上是通过调用jQuery的文档就绪函数。$(function() {});在使用javascript访问它们之前，您必须确保dom有时间完成加载页面上的所有元素。我还删除了以下注释代码，因为它对javascript语法进行了不正确的注释。// ORIGINALE prof:<!-- $(document).ready(function(){ --> <!-- $('#runme').click(function(){ --> <!-- let SIZE = 4 --> <!-- let r = (Math.floor(Math.random() * SIZE)) + 1; --> <!-- let c = (Math.floor(Math.random() * SIZE)) + 1; --> <!-- $( "section.oggettoElements:nth-of-type("+r+") i:nth-child("+c+")" ).css( "color", "#FF0000" ); --> <!-- }); --><!-- }); -->