Игра Тыквенный бросок для сайта на Хеллоуин

Игра Тыквенный бросок для сайта на Хеллоуин. Простая игра в которой нужно просто бросать тыквы кликом мыши.

HTML

<svg id="defs" xmlns="http://www.w3.org/2000/svg">
   <linearGradient id="_x2E_stem_1_" gradientUnits="userSpaceOnUse" x1="211.5078" y1="105.9541" x2="249.011" y2="105.9541">
            <stop  offset="0" style="stop-color:#006837"/>
            <stop  offset="7.625596e-02" style="stop-color:#007C3E"/>
            <stop  offset="0.1643" style="stop-color:#008C43"/>
            <stop  offset="0.2319" style="stop-color:#009245"/>
            <stop  offset="0.5141" style="stop-color:#339933"/>
            <stop  offset="0.7929" style="stop-color:#006837"/>
            <stop  offset="0.975" style="stop-color:#39B54A"/>
         </linearGradient>

         <linearGradient id="_x2E_pumpkin_1_" gradientUnits="userSpaceOnUse" x1="75.7889" y1="270.599" x2="397.8843" y2="270.599">
            <stop  offset="0" style="stop-color:#F15A24"/>
            <stop  offset="2.075104e-02" style="stop-color:#F26223"/>
            <stop  offset="0.103" style="stop-color:#F57D20"/>
            <stop  offset="0.176" style="stop-color:#F68D1F"/>
            <stop  offset="0.2319" style="stop-color:#F7931E"/>
            <stop  offset="0.5141" style="stop-color:#F15A24"/>
            <stop  offset="0.7929" style="stop-color:#F7931E"/>
            <stop  offset="0.975" style="stop-color:#F15A24"/>
         </linearGradient>
   <defs>
      <symbol id="jack-o-lantern"> 
         <path class="stem st0" d="M230.3,148L230.3,148c-10.4,0-18.8-8.4-18.8-18.8c1.3-13.8,2.7-27.7,4-41.5
            c-4.1-5.8-4-8.8-3.1-10.6c1-2.1,2.8-1.5,5.9-4.4c3.6-3.4,3.3-6.2,6.4-7.9c2-1.1,4.1-1,5.6-0.8h0c1.8,1.8,3.9,4.1,5.7,7
            c4.2,6.4,5.7,12.7,6.2,16.8c2.3,13.8,4.5,27.7,6.8,41.5C249,139.6,240.6,148,230.3,148z"/>

         <path class="pumpkin st1" d="M76,269.1c0.6-36.9,1.4-83,34-120.1c8.8-10.1,29.9-34,59.3-35.3
            c27.3-1.2,33.1,18.4,64.1,19.3c31.9,0.9,39.8-19.4,68.6-17c26.2,2.2,44.5,21,54.7,31.7c37.5,38.9,39.5,90.7,40.7,121.4
            c1.2,32.3,4.4,113.8-43.3,142.6c-21.1,12.7-50.2,13.9-58.1,14.3c-25,1-29.6-5.3-59.2-4.9c-31.3,0.4-35.9,7.6-58.8,6.4
            c-2.4-0.1-37.2-2.2-63.2-22.4C74.3,373.7,75.3,314.8,76,269.1z"/>

         <path id="_x2E_eye-whites" class="left-eye st2" d="M209.1,234.7c1.5,9.3-16,24-32.6,22.8c-19.6-1.4-29.4-24.5-32.5-31.9
               c-2.6-6.1-6.3-15-2.8-18.7c3.1-3.1,9.6-0.4,41.1,12.8C199.7,227.1,208.5,230.9,209.1,234.7z"/>

         <path class="right-eye st2" d="M273.4,234.7c-1.5,9.3,16,24,32.6,22.8c19.6-1.4,29.4-24.5,32.5-31.9
               c2.6-6.1,6.3-15,2.8-18.7c-3.1-3.1-9.6-0.4-41.1,12.8C282.7,227.1,274,230.9,273.4,234.7z"/>

         <path class="st2" d="M328.5,332c0,17.1-44.7,54.5-91.7,54.5s-97.1-41.6-97.1-58.7s50.1,0.2,97.1,0.2S328.5,314.9,328.5,332z"/>
      </symbol>
   </defs>
</svg>


<h1>Happy Halloween!</h1>
<h2>Touch to throw a pumpkin</h2>
<div class="container"></div>
<script id="jackTemplate" type="text/template">
   <div class="jack-image">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480">
      <use xlink:href="#jack-o-lantern" />
   </svg>
   </div>
</script>

CSS

html {
   font-size: 80%;
}

@media screen and (max-width: 480px) {
   html {
      font-size: 40%;
   }
}

body {
   font-family: "Rock Salt";
   overflow: hidden;
   background: hsl(190, 20%, 10%);
   text-align: center;
   visibility: hidden;
}

h1 {
   color: white;
   user-select: none;
   margin: 0;
   font-size: 3rem;
   letter-spacing: 4px;
}
h2 {
   color: hsl(37, 100%, 69%);
   font-size: 1.65rem;
   user-select: none;
   margin: 0;
}

.container {
   height: 100vh;
   width: 100vw;
   position: fixed;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
}

.jack {
   height: 40vmin;
   width: 40vmin;
   position: absolute;
   transform-origin: top left;
}

.jack-image {
   transform: translate(-20vmin, -20vmin);
}

#defs {
   height: 0;
   width: 0;
   overflow: hidden;
}

.st0 {
   fill: url(#_x2E_stem_1_);
}
.st1 {
   fill: url(#_x2E_pumpkin_1_);
   stroke: #f15a24;
   stroke-width: 4;
   stroke-miterlimit: 10;
}
.st2 {
   fill: #ffc338;
   stroke: #5e4900;
   stroke-width: 4;
   stroke-miterlimit: 10;
}

JS

var container = document.querySelector('.container');
var jackTemplate = document.querySelector('#jackTemplate').innerHTML;

function hitTheRoadJack(x, y) { 
   var jack = document.createElement('div');
   jack.classList.add('jack');
   jack.innerHTML = jackTemplate;
   jack.style.left = x;
   jack.style.top = y; 
   
   container.appendChild(jack)
   
   var t1 = just.animate({
      targets: jack, 
      duration: just.shuffle([1000, 1100, 1200]),
      easing: 'ease-out',
      web: {
         opacity: [1, 1, 0],
         scale: .1,
         y: just.random(-140, -110, 'vmin', true),
         x: just.random(-40, 40, 'vmin', true),
         rotate: -420
      }
   });

   t1.play({ destroy: true });

   t1.once('finish', function() {
      container.removeChild(jack)
   })
}

function intro() {
   // show document body
   document.body.style.visibility = 'visible';
   
   var t1 = just.animate({
      targets: just.splitText('h1').characters,
      duration: 430,
      endDelay: 600,
      stagger: 80,
      web: {
         opacity: [0, .3, 1],
         x: [0, -10, 0, -15, 0, -5, 0],
         y: [40, 0]
      }
   })
   
   t1.animate({
      targets: 'h2',
      duration: 1000,
      web: {
         opacity: [0, 1]
      }
   })
   
   t1.play();
   
   t1.on('finish', function() {
      hitTheRoadJack('50vw', '70vw')
   }) 
}

var last = undefined
container.addEventListener('click', function(evt) {
   var now = performance.now()
   if (last === undefined || (now - last) > 200) {
      hitTheRoadJack(evt.clientX + 'px', evt.clientY + 'px');
      last = now;
   }
})

intro();