[html]
<style>

/* global css variables */
:root {
  --how-color: rgba(249, 133, 70, 0.7);
  --scores-color: rgba(46, 191, 158, 0.7);
  --game-color: rgba(170, 145, 224, 0.7);
  --play-color: rgba(30, 152, 166, 0.8);
  --special-color: rgba(173, 168, 28, 0.7);
}

#box34{
  text-align: center;
  margin:0;
  padding:0;
  font-family: 'Handlee', cursive;
  font-size:18px;
  color: rgba(255, 255, 255, 0.75);
  background: radial-gradient(#f09e7287 15%, transparent 16%) 0 0, radial-gradient(#f09e7287 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
  background-size:16px 16px;
  background-color:#615d5d;
  background-attachment: fixed;
  min-height: 500px;
}

/* top navigation */
#header {
  font-size: 45px;
}
header nav {
  position: fixed;
  top: 0px;
  height:auto;
  padding:0px;
  width: 100%;
  transition: transform 0.6s;
  z-index:20;
}
header nav.begone {
  transform: translate3d(0, -100%, 0);
}
nav button{
  position:absolute;
  width:100%;
  left:0;
  background-color: rgb(51, 50, 51);
  color: rgb(255, 255, 255);
  padding: 10px;
  border: none;
  font-size: 17px;
  transition: background-color 0.3s, opacity 0.3s linear;
  outline: none;
  height:40px;
}
#homeButton {
  background-color: rgba(222, 85, 88, 0.7);
  left:0;
  width:50px;
}
#howButton {
  background-color: var(--how-color);
  left:50px;
  width: calc((100% - 50px) / 3);
}
#scoresButton {
  background-color: var(--scores-color);
  left: calc(((100% - 50px) / 3) + 50px);
  width: calc((100% - 50px) / 3);
}
#gameButton {
  background-color: var(--game-color);
  left: calc(((100% - 50px) / 3 * 2) + 50px);
  width: calc((100% - 50px) / 3);
}
button:hover {
  opacity: 0.8;
  cursor: pointer;
}
button.active {
  background-color: rgba(0, 0, 0, 0.2) !important;
}
button {
  font-family: 'Handlee', cursive;
}

/* handles the page transitions */
.showPage{
  -webkit-animation: showPage 2s ease forwards;
  -moz-animation: showPage 2s ease forwards;
  -o-animation: showPage 2s ease forwards;
  animation: showPage 2s ease forwards;
}

/* style of main content */
#content {
  margin-top:40px;
  padding: 10px;
}
#content h1 {
  margin-top:30px;
  font-size:65px;
  font-family: 'Indie Flower', cursive;
  margin-bottom:0px;
  color: rgba(255, 255, 255, 0.25);
}
#content #how article {
  margin-top: 60px;
}

/* styling of the wolves */
.wolves div {
  position: absolute;
  width:100px;
  height:90px;
}
.wolves .top-left {
  top: 60px;
  left: 20px;
  -webkit-animation: wolf-rotate 4s linear infinite;
  -moz-animation: wolf-rotate 4s linear infinite;
  -o-animation: wolf-rotate 4s linear infinite;
  animation: wolf-rotate 4s linear infinite;
}
.wolves .top-right {
  top: 60px;
  left: calc(100% - 120px);
  -webkit-animation: wolf-rotate 4s linear -2s infinite;
  -moz-animation: wolf-rotate 4s linear -2s infinite;
  -o-animation: wolf-rotate 4s linear -2s infinite;
  animation: wolf-rotate 4s linear -2s infinite;
}
.wolf div {
  position: absolute;
}
.wolf .wolf-head {
  width: 0;
  height: 0;
  top: 0px;
  left: 0px;
  border-style: solid;
  border-width: 90px 50px 0 50px;
  border-color: #888 transparent transparent transparent;
  border-radius:100%;
  -webkit-animation: wolf-head-change 4s linear infinite;
  -moz-animation: wolf-head-change 4s linear infinite;
  -o-animation: wolf-head-change 4s linear infinite;
  animation: wolf-head-change 4s linear infinite;
}
.wolf .wolf-ear-left {
  width: 0;
  height: 0;
  top: -20px;
  left: 10px;
  border-style: solid;
  border-width: 0 15px 40px 15px;
  border-color: transparent transparent #888 transparent;
  transform: rotate(-20deg);
}
.wolf .wolf-ear-right {
  width: 0;
  height: 0;
  top: -20px;
  left: 60px;
  border-style: solid;
  border-width: 0 15px 40px 15px;
  border-color: transparent transparent #888 transparent;
  transform: rotate(20deg);
}
.wolf .wolf-eye-left {
  width: 0;
  height: 0;
  top: 25px;
  left: 60px;
  border-style: solid;
  border-width: 18px 14px 0 0;
  border-color: #444 transparent transparent transparent;
  transform: skew(-15deg);
}
.wolf .wolf-eye-right {
  width: 0;
  height: 0;
  top: 25px;
  left: 25px;
  border-style: solid;
  border-width: 0 14px 18px 0;
  border-color: transparent #444 transparent transparent;
  transform: skew(15deg);
}
.wolf .wolf-eyeball-left {
  width: 5px;
  height: 5px;
  top: 27px;
  left: 63px;
  background-color: rgb(255, 255, 255);
  border-radius:50%;
}
.wolf .wolf-eyeball-right {
  width: 5px;
  height: 5px;
  top: 27px;
  left: 31px;
  background-color: rgb(255, 255, 255);
  border-radius:50%;
}
.wolf .wolf-nose {
  width: 0;
  height: 0;
  top: 72px;
  left: 45px;
  border-style: solid;
  border-width: 12px 5px 0 5px;
  border-color: #444444 transparent transparent transparent;
}

/* styling of the box on the home page */
#box {
  padding: 20px;
  width: 300px;
  height:275px;
  text-align: center;
  margin: auto;
  margin-top: 20px;
  border-radius: 0px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
  background-color: rgba(92, 91, 92, 0.4);
}
#box #creator {
  opacity: 0.5;
  font-size: 16px;
}
#box .home-buttons {
  width: 100px;
  height: 100px;
  margin: 20px 10px;
  border: none;
  outline: none;
  transition: background-color 0.3s, opacity 0.3s linear, border-radius 0.4s ease-out;
  color: rgb(255, 255, 255);
  font-size: 18px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
}
#box #homeHowButton {
  background-color: var(--how-color);
  border-radius: 0 40px;
  -webkit-animation: rotate 1.5s ease-out 1.5s forwards;
  -moz-animation: rotate 1.5s ease-out 1.5s forwards;
  -o-animation: rotate 1.5s ease-out 1.5s forwards;
  animation: rotate 1.5s ease-out 1.5s forwards;
}
#box #homePlayButton {
  background-color: var(--game-color);
  border-radius: 40px 0;
  -webkit-animation: rotate 1.5s ease-in 1.5s reverse forwards;
  -moz-animation: rotate 1.5s ease-in 1.5s reverse forwards;
  -o-animation: rotate 1.5s ease-in 1.5s reverse forwards;
  animation: rotate 1.5s ease-in 1.5s reverse forwards;
}
#box .home-buttons:hover, #box #homeHowButton:hover, #box #homePlayButton:hover {
  opacity: 0.8;
  cursor: pointer;
  border-radius: 100%;
}
#box #welcome {
  font-size: 20px;
}

/* styling of the text on the how page */
#how .line {
  position: relative;
  margin: 0 auto;
  white-space: nowrap;
  line-height: 40px;
  overflow: hidden;
  opacity: 0;
}
#how .line-1 {
  -webkit-animation: fadein 1s ease-in 1.5s forwards;
  -moz-animation: fadein 1s ease-in 1.5s forwards;
  -o-animation: fadein 1s ease-in 1.5s forwards;
  animation: fadein 1s ease-in 1.5s forwards;
}
#how .line-2 {
  -webkit-animation: fadein 1s ease-in 3.5s forwards;
  -moz-animation: fadein 1s ease-in 3.5s forwards;
  -o-animation: fadein 1s ease-in 3.5s forwards;
  animation: fadein 1s ease-in 3.5s forwards;
}
#how .line-3 {
  -webkit-animation: fadein 1s ease-in 5.5s forwards;
  -moz-animation: fadein 1s ease-in 5.5s forwards;
  -o-animation: fadein 1s ease-in 5.5s forwards;
  animation: fadein 1s ease-in 5.5s forwards;
}
#how .line-4 {
  -webkit-animation: fadein 1s ease-in 7.5s forwards;
  -moz-animation: fadein 1s ease-in 7.5s forwards;
  -o-animation: fadein 1s ease-in 7.5s forwards;
  animation: fadein 1s ease-in 7.5s forwards;
}
#how .line-5 {
  -webkit-animation: fadein 1s ease-in 9.5s forwards;
  -moz-animation: fadein 1s ease-in 9.5s forwards;
  -o-animation: fadein 1s ease-in 9.5s forwards;
  animation: fadein 1s ease-in 9.5s forwards;
}
#how .particle-gold {
  width: 60px;
  height: 60px;
  margin: auto;
  opacity: 0;
  margin-top: 20px;
  -webkit-animation: fadein 1s ease-in 11s forwards, rotate 2s linear infinite;
  -moz-animation: fadein 1s ease-in 11s forwards, rotate 2s linear infinite;
  -o-animation: fadein 1s ease-in 11s forwards, rotate 2s linear infinite;
  animation: fadein 1s ease-in 11s forwards, rotate 2s linear infinite;
}

/* styling of the high scores table */
.table-scores {
  width: 275px;
  border: solid 0px;
  border: none;
  border-collapse: separate;
  border-spacing: 0 7px;
  line-height: 20px;
  margin: auto;
  margin-top: 30px;
  opacity: 0;
  -webkit-animation: fadein 1.5s ease-out 2s forwards;
  -moz-animation: fadein 1.5s ease-out 2s forwards;
  -o-animation: fadein 1.5s ease-out 2s forwards;
  animation: fadein 1.5s ease-out 2s forwards;
}
.table-scores th {
  color: rgba(50, 135, 168, 0.8);
}
.table-scores td {
  font-size: 14px;
  line-height: 20px;
  border-bottom: 1px solid rgba(220, 220, 220, 0.2);
}
.scores-header-name, .scores-name {
  text-align:left;
}
.scores-header-score, .scores-score {
  text-align: right;
}

/* styling of the game */
#game {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#game .game-title {
  padding-top: 50px;
  font-size: 60px;
  color: rgba(200, 200, 200, 0.15);
}
#gameComponents {
  display: none;
}
#gameComponents .game-score {
  margin: auto;
  margin-top: 100px;
  text-align: center;
  font-size: 60px;
  color: rgba(200, 200, 200, 0.2);
  opacity: 0;
  z-index: -1;
  position: relative;
  transition: opacity 0.3s linear;
  -webkit-animation: fadein 1.5s ease-in forwards;
  -moz-animation: fadein 1.5s ease-in forwards;
  -o-animation: fadein 1.5s ease-in forwards;
  animation: fadein 1.5s ease-in forwards;
}
#gameComponents #gameTimer {
  margin: auto;
  margin-top: 100px;
  text-align: center;
  font-size: 50px;
  color: rgba(200, 200, 200, 0.2);
  opacity: 0;
  z-index: -1;
  position: relative;
  transition: opacity 0.3s linear;
  -webkit-animation: fadein 1.5s ease-in forwards;
  -moz-animation: fadein 1.5s ease-in forwards;
  -o-animation: fadein 1.5s ease-in forwards;
  animation: fadein 1.5s ease-in forwards;
}
#gameScore, #gameScoreBest {
  margin: auto;
  text-align: center;
  font-size: 60px;
  color: rgba(200, 200, 200, 0.15);
  opacity: 0;
}
#gameScore {
  margin-top: 120px;
  opacity: 0;
  -webkit-animation: show-scores 0.75s forwards 0.25s;
  -moz-animation: show-scores 0.75s forwards 0.25s;
  -o-animation: show-scores 0.75s forwards 0.25s;
  animation: show-scores 0.75s forwards 0.25s;
}
#gameScoreBest {
  opacity: 0;
  -webkit-animation: show-scores 0.75s forwards 1s;
  -moz-animation: show-scores 0.75s forwards 1s;
  -o-animation: show-scores 0.75s forwards 1s;
  animation: show-scores 0.75s forwards 1s;
}
#gameStartButton, #gameReplayButton {
  position: absolute;
  left: calc(50% - 75px);
  top: calc(50%);
  margin: auto;
  background-color: var(--play-color);
  width: 150px;
  height: 50px;
  font-size: 18px;
  color: rgb(255, 255, 255);
  border: none;
  outline: none;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
  transition: background-color 0.3s, opacity 0.3s linear;
}
#gameReplayButton {
  top: calc(60%);
  opacity: 0;
  -webkit-animation: spin 1.5s forwards 2s;
  -moz-animation: spin 1.5s forwards 2s;
  -o-animation: spin 1.5s forwards 2s;
  animation: spin 1.5s forwards 2s;
}
#gameStartButton:hover, #gameReplayButton:hover {
  opacity: 0.8 !important;
}

/* styling of the particles */
#particle-box {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.particle {
  position:absolute;
  opacity: 0;
  transition: all 1s ease-in-out;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}
.particle-red, .bit-red {
  background-color: rgba(222, 85, 88, 1);
}
.particle-green, .bit-green {
  background-color: rgba(46, 191, 158, 1);
}
.particle-blue, .bit-blue {
  background-color: rgba(0, 145, 224, 1);
}
.particle-gold, .bit-gold {
  background-color: var(--special-color);
  border-radius: 30% 0;
}
div.particle:hover {
  cursor: pointer;
  width: 150px !important;
  height: 150px !important;
  opacity: 0.5 !important;
  -webkit-animation-play-state: paused !important;
  -moz-animation-play-state: paused !important;
  -o-animation-play-state: paused !important;
  animation-play-state: paused !important;
}

/* styling of the explosions when you click a particle */
.explosion {
  position: absolute;
  width: 600px;
  height: 600px;
  pointer-events: none;
}
.bit {
  position: absolute; 
  width: 10px;
  height: 10px;
  -webkit-animation: pop 1.5s ease-in reverse forwards;
  -moz-animation: pop 1.5s ease-in reverse forwards;
  -o-animation: pop 1.5s ease-in reverse forwards;
  animation: pop 1.5s ease-in reverse forwards;
}

@-webkit-keyframes showPage {
  from {
    opacity:0;
    transform: translateY(-100%);
  }
  to {
    opacity:1;
    transform: translateY(0%);
  }
}
@-moz-keyframes showPage {
  from {
    opacity:0;
    transform: translateY(-100%);
  }
  to {
    opacity:1;
    transform: translateY(0%);
  }
}
@-o-keyframes showPage {
  from {
    opacity:0;
    transform: translateY(-100%);
  }
  to {
    opacity:1;
    transform: translateY(0%);
  }
}
@keyframes showPage {
  from {
    opacity:0;
    transform: translateY(-100%);
  }
  to {
    opacity:1;
    transform: translateY(0%);
  }
}

@-webkit-keyframes wolf-rotate {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(20deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@-moz-keyframes wolf-rotate {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(20deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@-o-keyframes wolf-rotate {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(20deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes wolf-rotate {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(20deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes wolf-head-change {
  0% {
    border-color: #F98546 transparent transparent transparent;
  }
  20% {
    border-color: #2EBF9E transparent transparent transparent;
  }
  40% {
    border-color: #218F76 transparent transparent transparent;
  }
  60% {
    border-color: #0091e0 transparent transparent transparent;
  }
  80% {
    border-color: #f3554a transparent transparent transparent;
  }
  100% {
    border-color: #F98546 transparent transparent transparent;
  }
}
@-moz-keyframes wolf-head-change {
  0% {
    border-color: #F98546 transparent transparent transparent;
  }
  20% {
    border-color: #2EBF9E transparent transparent transparent;
  }
  40% {
    border-color: #218F76 transparent transparent transparent;
  }
  60% {
    border-color: #0091e0 transparent transparent transparent;
  }
  80% {
    border-color: #f3554a transparent transparent transparent;
  }
  100% {
    border-color: #F98546 transparent transparent transparent;
  }
}
@-o-keyframes wolf-head-change {
  0% {
    border-color: #F98546 transparent transparent transparent;
  }
  20% {
    border-color: #2EBF9E transparent transparent transparent;
  }
  40% {
    border-color: #218F76 transparent transparent transparent;
  }
  60% {
    border-color: #0091e0 transparent transparent transparent;
  }
  80% {
    border-color: #f3554a transparent transparent transparent;
  }
  100% {
    border-color: #F98546 transparent transparent transparent;
  }
}
@keyframes wolf-head-change {
  0% {
    border-color: #F98546 transparent transparent transparent;
  }
  20% {
    border-color: #2EBF9E transparent transparent transparent;
  }
  40% {
    border-color: #218F76 transparent transparent transparent;
  }
  60% {
    border-color: #0091e0 transparent transparent transparent;
  }
  80% {
    border-color: #f3554a transparent transparent transparent;
  }
  100% {
    border-color: #F98546 transparent transparent transparent;
  }
}

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-moz-keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  0% {
    opacity: 0;
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(360deg);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg);
  }
}
@-moz-keyframes spin {
  0% {
    opacity: 0;
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(360deg);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg);
  }
}
@-o-keyframes spin {
  0% {
    opacity: 0;
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(360deg);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg);
  }
}
@keyframes spin {
  0% {
    opacity: 0;
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(360deg);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg);
  }
}

@-webkit-keyframes show-scores {
  from {
    opacity: 0;
    transform: rotate(0deg);
  }
  to {
    opacity: 1;
    transform: rotate(360deg);
  }
}
@-moz-keyframes show-scores {
  from {
    opacity: 0;
    transform: rotate(0deg);
  }
  to {
    opacity: 1;
    transform: rotate(360deg);
  }
}
@-o-keyframes show-scores {
  from {
    opacity: 0;
    transform: rotate(0deg);
  }
  to {
    opacity: 1;
    transform: rotate(360deg);
  }
}
@keyframes show-scores {
  from {
    opacity: 0;
    transform: rotate(0deg);
  }
  to {
    opacity: 1;
    transform: rotate(360deg);
  }
}

@-webkit-keyframes move {
  0% {
    transform: translateY(500px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(-100px)  rotate(360deg);
    opacity: 0;
  }
}
@-moz-keyframes move {
  0% {
    transform: translateY(500px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(-100px)  rotate(360deg);
    opacity: 0;
  }
}
@-o-keyframes move {
  0% {
    transform: translateY(500px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(-100px)  rotate(360deg);
    opacity: 0;
  }
}
@keyframes move {
  0% {
    transform: translateY(500px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(-100px)  rotate(360deg);
    opacity: 0;
  }
}

@-webkit-keyframes pop {
  from {
    transform: rotate(360deg);
    opacity: 0;
  }
  to {
    transform: rotate(0deg);
    top: 50%;
    left: 50%;
    opacity: 1;
  }
}
@-moz-keyframes pop {
  from {
    transform: rotate(360deg);
    opacity: 0;
  }
  to {
    transform: rotate(0deg);
    top: 50%;
    left: 50%;
    opacity: 1;
  }
}
@-o-keyframes pop {
  from {
    transform: rotate(360deg);
    opacity: 0;
  }
  to {
    transform: rotate(0deg);
    top: 50%;
    left: 50%;
    opacity: 1;
  }
}
@keyframes pop {
  from {
    transform: rotate(360deg);
    opacity: 0;
  }
  to {
    transform: rotate(0deg);
    top: 50%;
    left: 50%;
    opacity: 1;
  }
}

</style>
<script>

var game_score = 0;
var game_score_best = 0;
var GAME_TIMER_START = 30;
var game_timer = 0;
var game_highscores = false;
var game_over = false;
var gameCountdownTimer;
var gameSpecialTimer = 0;
var game_scores = [
  {
    name: "Grant Jenkins",
    score: 131
  },
  {
    name: "Could be you",
    score: 0
  },
  {
    name: "Could be you",
    score: 0
  },
  {
    name: "Could be you",
    score: 0
  },
  {
    name: "Could be you",
    score: 0
  },
  {
    name: "Could be you",
    score: 0
  },
  {
    name: "Could be you",
    score: 0
  },
  {
    name: "Could be you",
    score: 0
  },
  {
    name: "Could be you",
    score: 0
  },
  {
    name: "Could be you",
    score: 0
  }
];
game_scores.sort(function(a, b) {
  return b.score - a.score; 
});

// get random number between min and max value
function rand(min, max) {
  return Math.floor(Math.random() * (max + 1)) + min;
}

//add explosions when you click on a particle
function explode(x, y, bitcolor) {
  var particles = 15,
      // explosion container and its reference to be able to delete it on animation end
      explosion = $('<div class="explosion"></div>');

  //put the explosion container into the game page
  $('#game').append(explosion);

  //position the container to be centered
  explosion.css('left', x - explosion.width() / 2);
  explosion.css('top', y - explosion.height() / 2);

  for (var i = 0; i < particles; i++) {
    //random end positions for each of the particles
    var x = (explosion.width() / 2) + rand(80, 150) * Math.cos(2 * Math.PI * i / rand(particles - 10, particles + 10));
    var y = (explosion.height() / 2) + rand(80, 150) * Math.sin(2 * Math.PI * i / rand(particles - 10, particles + 10));

    //create the particle elements
    elm = $('<div class="bit bit-' + bitcolor + '" style="' +
            'top: ' + y + 'px; ' +
            'left: ' + x + 'px"></div>');

    // no need to add the listener on all generated elements
    if (i == 0) { 
      //when animation ends then it will automatically remove the element
      elm.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
        explosion.remove();
      });
    }
    //add the particle
    explosion.append(elm);
  }
}

//event triggered when the user clicks on a particle
var particleClick = function(e) {
  let particleWidth = this.offsetWidth;

  //if particle reached full width
  if(particleWidth === 150) {
    //add appropriate score/time based on type of particle
    switch($(this).data("type")) {
      case "time":
        game_score++;
        game_timer+=5;
        break;
      case "points":
        game_score+=5;
        game_timer++;
        break;
      default:
        game_score++;
        game_timer++;
    }

    //add the score to the screen
    $(".game-score").text(game_score);

    //get the color of the particle
    var arr = $(this).attr("class").split('-');
    var item = arr[arr.length-1];

    //remove the particle
    this.remove();

    //add explosions
    explode(e.pageX, e.pageY, item);

    //create a new particle in place if the existing one
    createParticle();
  }
}

//creates each particle
var createParticle = function() {
  //initiate and set properties on particle
  let particle = {
    x: Math.random() * window.innerWidth,
    y: Math.random() * window.innerHeight + 20,
    size: Math.random() * 25 + 10,
    speed: Math.random() * 6 + 3,
    delay: Math.random() * 0.3 + 0.2,
    color: Math.random() < 0.33 ? "red" : Math.random() < 0.5 ? "green" : "blue",
    data: "normal"
  };

  //increase the special timer so that we get a
  //special particle at least every 5 particles
  gameSpecialTimer = (gameSpecialTimer + 1) % 5;

  //if special particle the set properties here
  if(Math.random() < 0.1 || gameSpecialTimer === 0) {
    particle.color = "gold";
    particle.data = Math.random() < 0.3 ? "time" : "points";
  }

  //append the particle to the particle box
  $("#particle-box").append("<div class='particle particle-" + 
                            particle.color + "' data-type='" + particle.data + "'></div>");

  //get the particle that was just added
  var last = $("#particle-box").children().last();

  //setup the click event for the particle
  last.on( "click", particleClick );

  //add appropriate css properties including css animation
  last.css(
    "animation", 
    "move " + particle.speed + "s infinite linear " + particle.delay + "s");
  last.css(
    "left", 
    particle.x);
  last.css(
    "top", 
    particle.y);
  last.css(
    "width", 
    particle.size);
  last.css(
    "height", 
    particle.size);
}

//setup the initial particles for each game
var setupParticles = function() {
  //remove any existing particles
  $("#particle-box").empty();

  //create an initial set of 40 particles
  for(var i = 0; i < 40; i++) {
    createParticle();
  }
}

//reset the game
var resetGame = function() {
  //reset game timer    
  game_timer = 0;

  //set game over to true
  game_over = true;

  //reset special timer
  gameSpecialTimer = 0;

  //clear the existing interval if it exists
  clearInterval(gameCountdownTimer);

  //remove any existing explosions
  $(".explosion").empty();

  //remove all particles
  $("#particle-box").empty();

  //show/hide appropriate components
  $("#gameStartButton").show();
  $("#gameComponents").hide();
  $("#gameOver").hide();
}

//starts the game
var startGame = function() {
  //reset score
  game_score = 0;

  //set game over to false
  game_over = false;

  //reset game score
  $(".game-score").text(game_score);

  //reset timer
  game_timer = GAME_TIMER_START;

  //hide/show components
  $("#gameStartButton").hide();
  $("#gameOver").hide();
  $("#gameComponents").show();

  //setup particles
  setupParticles();

  //display initial timer
  $("#gameTimer").text(game_timer + " seconds remaining");

  //setup interval to control the timing of the game
  gameCountdownTimer = setInterval(function(){
    //if game over...
    if(game_timer <= 0){
      //clear the interval (remove it)
      clearInterval(gameCountdownTimer);

      if(!game_over) {
        //set best score to be the max score
        game_score_best = Math.max(game_score_best, game_score);

        //display the scores
        $("#gameScore").text("Score: " + game_score);
        $("#gameScoreBest").text("Best Score: " + game_score_best);

        //display the game over box
        $("#gameOver").show();

        //remove the particles
        $("#particle-box").empty();

        //hide the start button and game components
        $("#gameStartButton").hide();
        $("#gameComponents").hide();
      }
    }
    //else if game still in progress
    else {
      $("#gameTimer").text(game_timer + " seconds remaining");
    }
    //decrease the timer by 1 each second
    game_timer -= 1;
  },
                                   1000); //interval set to 1 second
}

setupScores = function() {
  var scoresTable = '<table cellspacing="0" class="table-scores">' +
      '<thead>' +
      '<tr>' +
      '<th class="scores-header-name">Name</th>' +
      '<th class="scores-header-score">Score</th>' +
      '</tr>' +
      '</thead>' +
      '<tbody>';

  for(var i = 0; i < game_scores.length; i++) {
    let score = game_scores[i];

    scoresTable += '<tr>' +
      '<td class="scores-name">' + score.name + '</td>' +
      '<td class="scores-score">' + score.score + '</td>' +
      '</tr>';
  }

  scoresTable += '</tbody></table>';

  $("#scoresTable").empty();
  $("#scoresTable").append(scoresTable);
}

$(".page").css({display: "none"});
$("#home").css({display: "block"});
var switchPage = function (page){
  $(".page").css({display: "none"});
  $(page).css({display: "block",});

  $(".page").removeClass('showPage');
  $(page).addClass('showPage');

  $('button').removeClass('active');
  $(page+"Button").addClass('active');

  //reset game
  if(page === "#game") {
    resetGame();
  }
  //build highscores (only once)
  else if(page === "#scores" && !game_highscores) {
    setupScores();
  }
};
//switch to the home page when first get to the site
switchPage("#home");


</script>

<!--
  Particles (Game)
  Grant Jenkins, March 2023
  #cpc-random-button, #codepenchallenge

  - All animations using CSS animations
  - All particles are divs with translations
  - Wolves are pure HTML/CSS (style/animations)
  - CSS caters for all major browsers (webkit, moz, o)

  Check out my Khan Academy projects here:
  https://www.khanacademy.org/profile/grantjenkins/projects
  
  Find me in the Microsoft Power Automate forums here:
  https://powerusers.microsoft.com/t5/user/viewprofilepage/user-id/76589

    -----------------------------------------------------
    If you want to submit your score, let me know :)
    -----------------------------------------------------
-->

<div id="box34">
<html>
    <head>
        <meta charset="utf-8">
        <title>Particles (Game)</title>
        <link 
        href="https://fonts.googleapis.com/css?family=Indie+Flower|Material+Icons|Handlee&display=swap" 
        rel="stylesheet">
       
    </head>
    <body>
        <header>
            <nav>
                <button id="homeButton" onClick="switchPage('#home');" class="active material-icons">house</button>
                <button id="howButton" onClick="switchPage('#how');">How To Play</button>
                <button id="scoresButton" onClick="switchPage('#scores');">High Scores</button>
                <button id="gameButton" onClick="switchPage('#game');">Play</button>
            </nav>
        </header> <!--Navigation-->
        <div id="content">
            <div id="home" class="page"> <!--Home Page-->
                <div class="wolves">
                    <div class="wolf top-left">
                        <div class="wolf-ear-left"></div>
                        <div class="wolf-ear-right"></div>
                        <div class="wolf-head"></div>
                        <div class="wolf-eye-left"></div>
                        <div class="wolf-eye-right"></div>
                        <div class="wolf-eyeball-left"></div>
                        <div class="wolf-eyeball-right"></div>
                        <div class="wolf-nose"></div>
                    </div>
                    <div class="wolf top-right">
                        <div class="wolf-ear-left"></div>
                        <div class="wolf-ear-right"></div>
                        <div class="wolf-head"></div>
                        <div class="wolf-eye-left"></div>
                        <div class="wolf-eye-right"></div>
                        <div class="wolf-eyeball-left"></div>
                        <div class="wolf-eyeball-right"></div>
                        <div class="wolf-nose"></div>
                    </div>
                </div> <!--Wolves-->
            
                <h1 id="header">Particles</h1>
                <div id="box">
                    <p id="creator">A game by Grant Jenkins</p>
                    <p id="welcome">Welcome to Particles, a game of speed and accuracy.</p>
                    <div id="circles">
                        <button id="homeHowButton" class="home-buttons" onClick="switchPage('#how');">How</button>
                        <button id="homePlayButton" class="home-buttons" onClick="switchPage('#game');">Play</button>
                    </div>
                </div>
                
            </div> <!--home-->
            <div id="how" class="page"> <!--How page-->
                <h1>How</h1>
                <article>
                    <p class="line line-1">You need to hover over the particles as they move up the screen.</p>
                    <p class="line line-2">When a particle reaches full size you need to click on it.</p>
                    <p class="line line-3">Clicking on a particle will award you one point and add one second to your time.</p>
                    <p class="line line-4">There are special gold particles that award you even more points/time.</p>
                    <p class="line line-5">Click on the Play button to get started.</p>
                    <div class="particle-gold"></div>
                </article>
                <div class="wolves">
                    <div class="wolf top-left">
                        <div class="wolf-ear-left"></div>
                        <div class="wolf-ear-right"></div>
                        <div class="wolf-head"></div>
                        <div class="wolf-eye-left"></div>
                        <div class="wolf-eye-right"></div>
                        <div class="wolf-eyeball-left"></div>
                        <div class="wolf-eyeball-right"></div>
                        <div class="wolf-nose"></div>
                    </div>
                    <div class="wolf top-right">
                        <div class="wolf-ear-left"></div>
                        <div class="wolf-ear-right"></div>
                        <div class="wolf-head"></div>
                        <div class="wolf-eye-left"></div>
                        <div class="wolf-eye-right"></div>
                        <div class="wolf-eyeball-left"></div>
                        <div class="wolf-eyeball-right"></div>
                        <div class="wolf-nose"></div>
                    </div>
                </div> <!--Wolves-->
                
            </div> <!--how-->
            <div id="scores" class="page"> <!--Scores page-->
                <h1>Scores</h1>
                <div id="scoresTable"></div>
                <div class="wolves">
                    <div class="wolf top-left">
                        <div class="wolf-ear-left"></div>
                        <div class="wolf-ear-right"></div>
                        <div class="wolf-head"></div>
                        <div class="wolf-eye-left"></div>
                        <div class="wolf-eye-right"></div>
                        <div class="wolf-eyeball-left"></div>
                        <div class="wolf-eyeball-right"></div>
                        <div class="wolf-nose"></div>
                    </div>
                    <div class="wolf top-right">
                        <div class="wolf-ear-left"></div>
                        <div class="wolf-ear-right"></div>
                        <div class="wolf-head"></div>
                        <div class="wolf-eye-left"></div>
                        <div class="wolf-eye-right"></div>
                        <div class="wolf-eyeball-left"></div>
                        <div class="wolf-eyeball-right"></div>
                        <div class="wolf-nose"></div>
                    </div>
                </div> <!--Wolves-->
                
            </div> <!--scores-->
            <div id="game" class="page"> <!--game page-->
                <div id="particle-box"></div>
                <div id="gameComponents">
                    <div id="gameTimer"></div>
                    <div class="game-score">0</div>
                </div>
                <div id="gameOver">
                    <div id="gameScore" class="game-score">0</div>
                    <div id="gameScoreBest">0</div>
                    <button id="gameReplayButton" onclick="startGame();">Replay</button>
                </div>
                <button id="gameStartButton" onclick="startGame();">Start</button>
            </div> <!--Game-->
        </div> <!--Content-->
    
        <!--jQuery library-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    </body>
</html>
</div>
[/html]