<!DOCTYPE html>
<h2 id="A">A</h2><div class="square"></div><h1>                  worlds hardest game i swear guys</h1>
<button onclick="check()">A</button>
<style>
button {
  height: 50px;
  border-radius: 20px;
} button:hover {
  background-color: gray;
  color: blue;
} button.clicked {
  color: red;
  background-color: red;
}
  .square {
    position: relative;
    width: 10px;
    height: 150px;
    display: inline-block;
    vertical-align: middle;
    background-color: red;
  }
  #A {
    position: relative;
    vertical-align: middle;
    display: inline-block;
    animation: cAnimation 3s linear infinite;
  }
  @keyframes cAnimation {
    0% { left: 0px; color: black; }
    50% { left: 250px; color: black;}
    99% { left: 550px; color: black; }
    100% { left: 549px; color: red;}
  }
</style>
<script>
  let a = document.getElementById("A");
  let square = document.querySelector(".square")
  function check() {
  let squareLocation = square.getBoundingClientRect();
  let aLocation = a.getBoundingClientRect();
  if (squareLocation.right <= aLocation.right + 45 && squareLocation.right >= aLocation.right - 45 ) {
    alert("Nice!");
  } else if (aLocation.right === squareLocation.right) {
    alert("frame perfect legend")
  } else if (aLocation.right > squareLocation.right) {
    alert("too slow!");
  } else if (aLocation < squareLocation) {
    alert("Slow down!");
  } else {
    alert("your bad skill literally broke my code");
  }
  }
</script>
by