我缺少任何鏈接-HTML/CSS-有解無憂

我有代碼：

var score = 0;
$('button').click(function() {
  $('#shot').addClass('shot-animation');
  $('#shot').one('animationend', function() {
    if (collision($('#shot'), $('#bar'))) {

      var audio = document.getElementById("collision-sound");
      audio.play();
      $('#bar').addClass('bar-flash');
      $('#bar').one('animationend', function(e) {
        if (e.originalEvent.animationName === 'flash') {
          $('#bar').removeClass('bar-flash');
        }
      });
        score;
      $('#score').text(score);
      if (score === 10) {
        $('#bar').removeClass('bar-animation');
        $('#bar').addClass('bar-animation-2');
      }
    }
    $('#shot').removeClass('shot-animation');
  });
});

function collision($div1, $div2) {
  var x1 = $div1.offset().left;
  var y1 = $div1.offset().top;
  var h1 = $div1.outerHeight(true);
  var w1 = $div1.outerWidth(true);
  var b1 = y1   h1;
  var r1 = x1   w1;
  var x2 = $div2.offset().left;
  var y2 = $div2.offset().top;
  var h2 = $div2.outerHeight(true);
  var w2 = $div2.outerWidth(true);
  var b2 = y2   h2;
  var r2 = x2   w2;

  if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
  return true;
}

#bar {
  width: 200px;
  height: 15px;
  position: absolute;
  background-color: blue;
}

.bar-animation {
  animation-direction: alternate;
  animation-duration: 3s;
  animation-name: oscillate;
  animation-iteration-count: infinite;
}

.bar-animation-2 {
  animation-direction: alternate;
  animation-duration: 2s;
  animation-name: oscillate;
  animation-iteration-count: infinite;
}

.bar-flash {
  animation-name: flash;
  animation-duration: 200ms;
  animation-iteration-count: 4;
}

@keyframes flash {
  from {
    background-color: blue;
  }
  to {
    background-color: yellow;
  }
}

@keyframes oscillate {
  from {
    left: 0%;
  }
  to {
    left: calc(100% - 200px);
  }
}

#cannon {
  position: fixed;
  bottom: 0%;
  left: 50%;
  background-color: brown;
  height: 30px;
  width: 30px;
}

#shot {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background-color: green;
  position: fixed;
  bottom: 2%;
  left: 50.25%;
  border: 2px solid white;
}

.shot-animation {
  animation-name: shoot;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes shoot {
  from {
    bottom: 0%;
  }
  to {
    bottom: calc(100% - 30px);
  }
}

button {
  position: fixed;
  bottom: 0%;
  padding: 5px;
  font-size: 20px;
}

button:hover {
  cursor: pointer;
}

#score-box {
  font-size: 20px;
  color: black;
  position: fixed;
  bottom: 0%;
  right: 0%;
  padding: 20px;
  border: 1px solid grey
}

<!DOCTYPE html>

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- CSS file Included -->
  <link rel="stylesheet" type="text/css" href="style.css">

  <!-- JavaScript file included -->
  <script src="script.js"></script>
</head>

<body>

  <div id="container">
    <div id="bar" class="bar-animation"></div>
  </div>


  <div id="cannon">
    <div id="shot">
    </div>
  </div>


  <button>Shoot</button>

  <div id="score-box">
    <span>Score : </span><span id="score">0</span>
  </div>

  <audio preload="auto" src="https://s3-us-west-2.amazonaws.com/embedsound/bomb.mp3" id="collision-sound"></audio>
</body>

</html>

我缺少哪些參考資料才能給出這個錯誤？當我按下“拍攝”按鈕時，它會出錯。我很確定我錯過了 Jquery，盡管我嘗試鏈接它但它仍然不起作用。也許我使用了錯誤的鏈接。有人可以指出我正確的方向嗎？我會很感激任何建議？

uj5u.com熱心網友回復：

嘗試在您的script.js檔案之前匯入 jQuery 庫，因為您的 script.js 檔案使用 jQuery，所以應該首先包含它

var score = 0;
$('button').click(function() {
  $('#shot').addClass('shot-animation');
  $('#shot').one('animationend', function() {
    if (collision($('#shot'), $('#bar'))) {

      var audio = document.getElementById("collision-sound");
      audio.play();
      $('#bar').addClass('bar-flash');
      $('#bar').one('animationend', function(e) {
        if (e.originalEvent.animationName === 'flash') {
          $('#bar').removeClass('bar-flash');
        }
      });
        score;
      $('#score').text(score);
      if (score === 10) {
        $('#bar').removeClass('bar-animation');
        $('#bar').addClass('bar-animation-2');
      }
    }
    $('#shot').removeClass('shot-animation');
  });
});

function collision($div1, $div2) {
  var x1 = $div1.offset().left;
  var y1 = $div1.offset().top;
  var h1 = $div1.outerHeight(true);
  var w1 = $div1.outerWidth(true);
  var b1 = y1   h1;
  var r1 = x1   w1;
  var x2 = $div2.offset().left;
  var y2 = $div2.offset().top;
  var h2 = $div2.outerHeight(true);
  var w2 = $div2.outerWidth(true);
  var b2 = y2   h2;
  var r2 = x2   w2;

  if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
  return true;
}

#bar {
  width: 200px;
  height: 15px;
  position: absolute;
  background-color: blue;
}

.bar-animation {
  animation-direction: alternate;
  animation-duration: 3s;
  animation-name: oscillate;
  animation-iteration-count: infinite;
}

.bar-animation-2 {
  animation-direction: alternate;
  animation-duration: 2s;
  animation-name: oscillate;
  animation-iteration-count: infinite;
}

.bar-flash {
  animation-name: flash;
  animation-duration: 200ms;
  animation-iteration-count: 4;
}

@keyframes flash {
  from {
    background-color: blue;
  }
  to {
    background-color: yellow;
  }
}

@keyframes oscillate {
  from {
    left: 0%;
  }
  to {
    left: calc(100% - 200px);
  }
}

#cannon {
  position: fixed;
  bottom: 0%;
  left: 50%;
  background-color: brown;
  height: 30px;
  width: 30px;
}

#shot {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background-color: green;
  position: fixed;
  bottom: 2%;
  left: 50.25%;
  border: 2px solid white;
}

.shot-animation {
  animation-name: shoot;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes shoot {
  from {
    bottom: 0%;
  }
  to {
    bottom: calc(100% - 30px);
  }
}

button {
  position: fixed;
  bottom: 0%;
  padding: 5px;
  font-size: 20px;
}

button:hover {
  cursor: pointer;
}

#score-box {
  font-size: 20px;
  color: black;
  position: fixed;
  bottom: 0%;
  right: 0%;
  padding: 20px;
  border: 1px solid grey
}

<!DOCTYPE html>

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- CSS file Included -->
  <link rel="stylesheet" type="text/css" href="style.css">

<!-- import jQuery first  -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>

<body>

  <div id="container">
    <div id="bar" class="bar-animation"></div>
  </div>


  <div id="cannon">
    <div id="shot">
    </div>
  </div>


  <button>Shoot</button>

  <div id="score-box">
    <span>Score : </span><span id="score">0</span>
  </div>

  <audio preload="auto" src="https://s3-us-west-2.amazonaws.com/embedsound/bomb.mp3" id="collision-sound"></audio>
</body>

</html>

uj5u.com熱心網友回復：

您忘記了 jQuery 鏈接，您可以嘗試先添加它，因為它會記錄錯誤“未捕獲的 ReferenceError：$ 未定義”

請在結束正文標記之前添加此 Jquery 腳本鏈接

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/488232.html

標籤：javascript html css 动画

上一篇：OnMouseenter添加影像的不透明度過渡

下一篇：如何使用Javascript將新創建的元素存盤到localStorage或Cookie？