[将javascript代码包含到html中。并不是所有的工作

问题描述 投票:0回答:1

我正在尝试将我的JavaScript代码包含到我的html代码中。我将代码全部实现在一个文件中,现在我试图将其拆分为3个文件(.html,.css,.js)。关键是:如果将javascript脚本放入.js文件,然后将a放入html文件,它将无法正常工作(但只能部分工作)。我必须使用多个文件来执行此操作。例如,如何分割此文件?

<!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">
  <script src="jquery-3.5.0.js"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
          integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
          crossorigin="anonymous"></script>

  <style>

    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;
    }

  </style>
</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>


<script>

  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';
    }
  }

  // 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" ); -->
  <!-- }); -->
  <!-- }); -->



  // 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';
    }
  }

</script>

</body>
</html>

我尝试将所有脚本部分放入一个名为JSTEST.js的.js文件中,然后插入此文件:

<script src="jquery-3.5.0.js"></script>
<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>

将其放入htmlfile。问题是,它将不再起作用。它仅做部分事情。

所以现在我有:

<!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="jquery-3.5.0.js"></script>
  <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>
}

<script src="jquery-3.5.0.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
        crossorigin="anonymous"></script>
<script>
  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';
    }
  }

  // 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" ); -->
  <!-- }); -->
  <!-- }); -->



  // 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';
    }
  }
</script>

我在做什么错?

ps。如果您还对代码有任何建议,请写出它们;)

javascript html jquery
1个回答
0
投票

我尝试过,但是找不到“ runme”,单击Gioca时没有任何反应

我们应该如何启动此代码?

查看其他窗格。 css pan可以放在css中,而JS文件可以放入您的外部JS文件中。完全不需要jQuery

链接标记和外部JS脚本位于头部,与外部CSS文件的链接也位于头部

我们需要修复此部分

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>
© www.soinside.com 2019 - 2024. All rights reserved.