Any links Im missing - HTML/CSS-CodePudding

I have the code:

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

What references am I missing for it to be giving this error? When I press the "shoot" button it gives an error. Im pretty sure Im missing Jquery although I tried linking it and it still did not work. Perhaps I was using the wrong link. Can someone point me in the right direction? I would appreciate any suggestions?

CodePudding user response：

Try importing jQuery library before your script.js file, since your script.js file uses jQuery it should be included first

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

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

<body>

  <div id="container">
    <div id="bar" ></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>

CodePudding user response：

You forgot the jQuery link, you could try adding it first since it log error "Uncaught ReferenceError: $ is not defined"

Do add this Jquery script link before your closing body tag

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