html whack a mole

html whack a mole game

HTML

<div id="gamecontainer">
  <div id="gameinformation">
    <p id="scoretext">Score:&nbsp;</p>
    <div id="scorecontainer">
    </div>
  </div>
  <div id="pipecontainer">
    <div class="pipe">
      <div class="1 hitpoint"></div>
      <div class="2 hitpoint"></div>
      <div class="3 hitpoint"></div>
    </div>
    <div class="pipe">
      <div class="4 hitpoint"></div>
      <div class="5 hitpoint"></div>
      <div class="6 hitpoint"></div>
    </div>
    <div class="pipe">
      <div class="7 hitpoint"></div>
      <div class="8 hitpoint"></div>
      <div class="9 hitpoint"></div>
    </div>
  </div>
  <div id="statusupdate">
    <p id="result"></p>
  </div>
</div>

CSS

@keyframes shake {
  5%,
  15%,
  25%,
  35%,
  45%,
  55%,
  65%,
  75%,
  85%,
  95% {
    left: 0;
    right: 1vh;
    outline: none;
    border-color: red;
    box-shadow: 0 0 10px red;
  }
  10%,
  20%,
  30%,
  40%,
  50%,
  60%,
  70%,
  80%,
  90%,
  100% {
    left: 1vh;
    right: 0;
    outline: none;
    border-color: red;
    box-shadow: 0 0 10px red;
  }
}

@-webkit-keyframes shake {
  5%,
  15%,
  25%,
  35%,
  45%,
  55%,
  65%,
  75%,
  85%,
  95% {
    left: 0;
    right: 1vh;
    outline: none;
    border-color: red;
    box-shadow: 0 0 10px red;
  }
  10%,
  20%,
  30%,
  40%,
  50%,
  60%,
  70%,
  80%,
  90%,
  100% {
    left: 1vh;
    right: 0;
    outline: none;
    border-color: red;
    box-shadow: 0 0 10px red;
  }
}

@-moz-keyframes shake {
  5%,
  15%,
  25%,
  35%,
  45%,
  55%,
  65%,
  75%,
  85%,
  95% {
    left: 0;
    right: 1vh;
    outline: none;
    border-color: red;
    box-shadow: 0 0 10px red;
  }
  10%,
  20%,
  30%,
  40%,
  50%,
  60%,
  70%,
  80%,
  90%,
  100% {
    left: 1vh;
    right: 0;
    outline: none;
    border-color: red;
    box-shadow: 0 0 10px red;
  }
}

@-o-keyframes shake {
  5%,
  15%,
  25%,
  35%,
  45%,
  55%,
  65%,
  75%,
  85%,
  95% {
    left: 0;
    right: 1vh;
    outline: none;
    border-color: red;
    box-shadow: 0 0 10px red;
  }
  10%,
  20%,
  30%,
  40%,
  50%,
  60%,
  70%,
  80%,
  90%,
  100% {
    left: 1vh;
    right: 0;
    outline: none;
    border-color: red;
    box-shadow: 0 0 10px red;
  }
}

html {
  height: 100%;
  width: 100%;
}

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
  width: 100%;
}

#gamecontainer {
  height: 100%;
  width: 100%;
  background-color: #49c1e2;
}

#gameinformation {
  height: 10%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 10%;
}

#pipecontainer {
  height: 80%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.pipe {
  height: 8vh;
  width: 100vw;
 ...

JavaScript

var score = 0;
var numberofpipes = 9;
var lastnum = 0;
var intervalseconds;
var interval;
var haslost = false;
var checkpipetimer;
var timeoutfunc;
var timeoutinit;
var timers = [];
var burstingpipes = {};
var timeoutinit = setTimeout(startaburst, 3000);
$('#scorecontainer').text(score);
//starts a bursting pipe
function startaburst() {
  clearTimeout(timeoutinit);
  if (score < 10) {
    intervalseconds = 2;
  } else if (score >= 10 && score < 25) {
    intervalseconds = 1.5;
  } else if (score >= 25 && score < 40) {
    intervalseconds = 1;
  } else if (score >= 40 && score < 60) {
    intervalseconds = 0.5;
  } else if (score >= 60) {
    intervalseconds = 0.25;
  } else if (score > 100) {
    intervalseconds = 0.1;
  }
  interval = intervalseconds * 1000;
  burstingpipe();
  //creating a loop with the new timeout value as the game gets harder.
  //also assigning it to the timeoutfunc variable so i can cancel the loop later.
  timeoutfunc = setTimeout(startaburst, interval);
}

//adds the bursting pipe attributes to the pipe intersections
function burstingpipe() {
  randomnum = Math.floor(Math.random() * 9) + 1;
  //cant be the same twice in case of overlapping
  if ((randomnum == lastnum) || $("." + randomnum).hasClass("burstingpipe")) {
    //if the random num is still valid after -1, -1
    if (((randomnum - 1) >= 0) && !($("." + (randomnum - 1)).hasClass("burstingpipe"))) {
      randomnum = (randomnum - 1);
      //add one to the random number
    } else if (((randomnum + 1) <= (numberofpipes)) && !($("." + (randomnum + 1)).hasClass("burstingpipe"))) {
      randomnum = (randomnum + 1);
    } else {
      burstingpipe();
    }
  }
  //make the lastnum the current number so we dont get 2 in a row
  lastnum = randomnum;
  randomdiv = $("." + randomnum);
  console.log(randomdiv.hasClass("burstingpipe"));
  //adds shake animation and red glow
  console.log(randomnum);
  randomdiv.addClass("burstingpipe");

  //setting a timeout of 3 seconds, so th user has 3...