Randomize the gulp/+food movement a bit

gorge.css

@@ -301,6 +301,7 @@ button {
   animation: click-popup-food 2s linear;
   animation-fill-mode: both;
   font-size: 36px;
+  --target: -200px;
 }
 
 .click-popup-gulp {
@@ -311,6 +312,7 @@ button {
   animation: click-popup-gulp 2s linear;
   animation-fill-mode: both;
   font-size: 36px;
+  --target: 200px;
 }
 
 @keyframes click-popup-food {
@@ -319,7 +321,7 @@ button {
     opacity: 1;
   }
   100% {
-    transform: translate(0px, -200px) scale(0.5, 0.5);
+    transform: translate(var(--target), -200px) scale(0.5, 0.5);
     opacity: 0;
   }
 }
@@ -330,7 +332,7 @@ button {
     opacity: 1;
   }
   100% {
-    transform: translate(0px, 200px) scale(0.5, 0.5);
+    transform: translate(var(--target), 200px) scale(0.5, 0.5);
     opacity: 0;
   }
 }

gorge.js

@@ -549,6 +549,20 @@ function clickPopup(text, type, location) {
 
   div.classList.add("click-popup-" + type);
 
+  var direction;
+
+  if (type == "food") {
+    direction = -150;
+  } else if (type == "gulp") {
+    direction = -150;
+  }
+
+  direction *= Math.random() * 0.5 + 1;
+
+  direction = Math.round(direction) + "px"
+
+  div.style.setProperty("--target", direction)
+
   div.style.left = location[0] + "px";
   div.style.top = location[1] + "px";