我正在尝试将我的JavaScript代码包含在我的HTML代码中。我在一个文件中实现了所有代码，现在我尝试将其拆分为3个文件（.html，.css，.js）。问题是：如果将JavaScript脚本放入.js文件中，并将a放入HTML文件中，它将无法正常工作（但只能部分工作）。我必须对多个文件执行此操作。例如，如何拆分此文件？<src>
2 回答
一只萌萌小番薯
TA贡献1795条经验 获得超7个赞
啊，游戏需要全屏才能看到垃圾
请参阅不同的窗格。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 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';
}
}
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 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;
}
<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>
杨魅力
TA贡献1811条经验 获得超6个赞
我让它工作，有错误，有以下更改。
$(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" ); -->
<!-- }); -->
<!-- }); -->
添加回答
举报
0/150
提交
取消