javascript - 将 JavaScript 代码包含到 HTML 中。并非全部都在工作-6ren

javascript - 将 JavaScript 代码包含到 HTML 中。并非全部都在工作

转载作者：行者123 更新时间：2023-12-01 08:29:42

我正在尝试将 JavaScript 代码包含到 HTML 代码中。我将所有代码都实现在一个文件中，现在我尝试将其拆分为 3 个文件(.html、.css、.js)。问题是:如果将 JavaScript 脚本放入 .js 文件中，然后放入 <src>到 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; 
    }

    .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 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 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>

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

  function timerApparizioni () {
    timerOggetti = setInterval(apparizioneOggetto, delay);
  }

  let tuttiVisibili = false;

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

  function GoToMainMenu () {
    location.href = 'mainMenu.html';
  }

  const oggettoElements = document.querySelectorAll('.oggetto');
  const contenitoreElements = document.querySelectorAll('.contenitore');

  var vite = 3;
  var score = 0;
  const divScore = document.getElementById('score');
 
  oggettoElements.forEach(ogg => {
    ogg.addEventListener('dragstart', dragStart);
  });

  contenitoreElements.forEach(ogg => {
    ogg.addEventListener('dragenter', dragEnter);
    ogg.addEventListener('dragover', dragOver); 
    ogg.addEventListener('dragleave', dragLeave);
    ogg.addEventListener('drop', drop); 
  });

  function dragStart (event) {
    event.dataTransfer.setData('text', event.target.id);
  }

  function dragEnter (event) {
    if (!event.target.classList.contains('dropped')) {
      event.target.classList.add('contenitore-hover');
    }
  }

  function dragOver (event) {
    if (!event.target.classList.contains('dropped')) {
      event.preventDefault();
    }
  }

  function dragLeave (event) {
    if (!event.target.classList.contains('dropped')) {
      event.target.classList.remove('contenitore-hover');
    }
  }

  var counterRightDropped = 0;

  function drop (event) {

    event.target.classList.remove('contenitore-hover');
    const idAccettabileContenitore = event.target.getAttribute('idAccettabile');  
    const idOggetto = event.dataTransfer.getData('text');  
    const sottostringaID = idOggetto.substr(0, 3); 

    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 文件中，然后将其插入 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 type="text/javascript" src="JSTEST.js"></script>

问题是，它不再起作用了。它只做部分事情。

所以现在我有:

<!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 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 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>

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

  function timerApparizioni () {
    timerOggetti = setInterval(apparizioneOggetto, delay);
  }

  let tuttiVisibili = false;

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

  function GoToMainMenu () {
    location.href = 'mainMenu.html';
  }

  const oggettoElements = document.querySelectorAll('.oggetto');
  const contenitoreElements = document.querySelectorAll('.contenitore');

  var vite = 3;
  var score = 0;
  const divScore = document.getElementById('score');

  oggettoElements.forEach(ogg => {
    ogg.addEventListener('dragstart', dragStart);
  });

  contenitoreElements.forEach(ogg => {
    ogg.addEventListener('dragenter', dragEnter); 
    ogg.addEventListener('dragover', dragOver); 
    ogg.addEventListener('dragleave', dragLeave); 
    ogg.addEventListener('drop', drop); 
  });

  function dragStart (event) {
    event.dataTransfer.setData('text', event.target.id);
  }

  function dragEnter (event) {
    if (!event.target.classList.contains('dropped')) {
      event.target.classList.add('contenitore-hover');
    }
  }

  function dragOver (event) {
    if (!event.target.classList.contains('dropped')) {
      event.preventDefault();
    }
  }

  function dragLeave (event) {
    if (!event.target.classList.contains('dropped')) {
      event.target.classList.remove('contenitore-hover');
    }
  }

  var counterRightDropped = 0;

  function drop (event) {

    event.target.classList.remove('contenitore-hover');
    const idAccettabileContenitore = event.target.getAttribute('idAccettabile'); 
    const idOggetto = event.dataTransfer.getData('text');
    const sottostringaID = idOggetto.substr(0, 3); 

    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。如果您对代码还有任何建议，请写下来；)

最佳答案

啊啊，游戏需要全屏才能看到垃圾

查看不同的 Pane 。 css Pane 可以放入 css 文件中，JS Pane 内容可以放入外部 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>

关于javascript - 将 JavaScript 代码包含到 HTML 中。并非全部都在工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61824921/

文章推荐： python - 带有缩写的spacy分割句子

文章推荐： ruby-on-rails - Rails turbolinks 中断提交远程表单

文章推荐： python - 通过conda安装tensorflow失败

文章推荐： upgrade - docker升级命令

javascript - 执行存在于输入值字段中的 javascript - JavaScript
我有一个 html 格式的表单: 我需要得到 JavaScript在value input 字段执行，但只能通过表单的 submit .原因是页面是一个模板所以我不控制它(不能有
javascript - JavaScript 代码片段正在破坏其他 JavaScript
我管理的论坛是托管软件，因此我无法访问源代码，我只能向页面添加 JavaScript 来实现我需要完成的任务。我正在尝试用超链接替换所有页面上某些文本关键字的第一个实例。我还根据国家/地区代码对这些
javascript - JavaScript 如何使新页面包含更多 JavaScript？
我正在使用 JS 打开新页面并将 HTML 代码写入其中，但是当我尝试使用 document.write() 在新页面中编写 JS 时功能不起作用。显然，一旦看到，主 JS 就会关闭。用于即将打开的
javascript - Javascript 引擎如何在浏览器中执行 Javascript？
提问不是为了解决问题，提问是为了更好地理解系统专家!我知道每当你将 javascript 代码输入 javascript 引擎时，它会立即由 javascript 引擎执行。由于没有看过Engi
javascript - 如何将 JavaScript 变量从一个 JavaScript 文件传递到另一个 JavaScript 文件？
我在一个文件夹中有两个 javascript 文件。我想将一个变量的 javascript 文件传递到另一个。我应该使用什么程序？最佳答案 window.postMessage用于跨文档消息。使
javascript - javascript 中的 javascript 输入问题
我有一个练习，我需要输入两个输入并检查它们是否都等于一个。如果是 console.log 正则 console.log false 我试过这样的事情: function isPositive(fir
javascript - 在加载其他 javascript 库的页面上嵌入 Javascript？
我正在做一个Web应用程序，计划允许其他网站(客户端)在其页面上嵌入以下javascript: 我的网络应用程序位于 http://example.org 。我不能假设客户端网站的页面有 JQue
javascript - 从 Javascript 内部调用 Javascript
目前我正在使用三个外部 JS 文件。我喜欢将所有三个 JS 文件合而为一。尽一切可能。我创建 aio.js 并在 aio.js 中 src="https://code.jquery.com/
javascript - AngularJS/javascript javascript 对象的特殊排序顺序
我有例如像这样的数组: var myArray = []; var item1 = { start: '08:00', end: '09:30' } var item2 = {
javascript - 在 Javascript 内部执行 Javascript？
所以我正在制作一个 Chrome 扩展，它使用我制作的一些 TamperMonkey 脚本。我想要一个“主”javascript 文件，您可以在其中包含并执行其他脚本。我很擅长使用以下行将其他 jav
javascript - 如何将变量从 javascript 移动到 javascript？
我有 A、B html 和 A、B javascript 文件。并且，如何将 A JavaScript 中使用的全局变量直接移动到 B JavaScript 中？示例 JavaScript) va
javascript - 从 javascript 调用 javascript
我需要将以下整个代码放入名为 activate.js 的 JavaScript 中。你能告诉我怎么做吗？ var int = new int({ seconds: 30, mark
javascript - 将变量值从一个 JavaScript 传递到另一个 JavaScript
我已经为我的 .net Web 应用程序创建了母版页 EXAMPLE1.Master。他们的 I 将值存储在 JavaScript 变量中。我想在另一个 JS 文件中检索该变量。示例1.大师:-
javascript - 有没有开源库可以在浏览器中使用 Javascript 来整理 Javascript？
是否有任何库可以用来转换这样的代码: function () { var a = 1; } 像这样的代码: function () { var a = 1; } 在我的浏览器中。因为我在 Gi
javascript - javascript 中的参数列表后缺少语法 javascript 错误 )
我收到语法缺失 ) 错误 $(document).ready(function changeText() { var p = document.getElementById('bidp
javascript - 第一个 JavaScript 完成后启动第二个 JavaScript
我正在制作进度条。它有一个标签。我想调整某个脚本完成的标签。在找到可能的解决方案的一些答案后，我想出了以下脚本。第一个启动并按预期工作。然而，第二个却没有。它出什么问题了？代码如下: HTML:
javascript - 为什么外部 javascript 库会阻止我页面上的 javascript？
这里有一个很简单的问题，我简单的头脑无法回答:为什么我在外部库中加载时，下面的匿名和onload函数没有运行？我错过了一些非常非常基本的东西。 Library.js 只有一行:console.log(
javascript - 如何区分代码内 javascript 和客户端 javascript
我知道 javascript 是一种客户端语言，但如果实际代码中嵌入的 javascript 代码以某种方式与在控制台上运行的代码不同，我会尝试找到答案。让我用一个例子来解释它: 我想创建一个像 Mi
javascript - 将 Javascript 内联到不显眼的 JavaScript？
我如何将这个内联 javascript 更改为 Unobtrusive JavaScript？谢谢! 感谢您的回答，但它不起作用。我的代码是: PHP js文件 document.getElem
javascript - 如何将 JavaScript 对象导出为 JavaScript？
我正在寻找将简单的 JavaScript 对象“转储”到动态生成的 JavaScript 源代码中的最优雅的方法。目的:假设我们有 node.js 服务器生成 HTML。我们在服务器端有一个对象x。

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 将 JavaScript 代码包含到 HTML 中。并非全部都在工作