Red overlay

kopiro · Nov 21, 2023 · 6c8cf11 · 6c8cf11
1 parent c8e1886
commit 6c8cf11
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -12,11 +12,14 @@
   </head>
   <body>
     <div id="container">
-      <div id="screen">
-        <div id="scene">
-          <div id="start"></div>
-          <div id="road"></div>
-          <div id="road-final-line"></div>
+      <div id="tv">
+        <div id="overlay"></div>
+        <div id="screen">
+          <div id="scene">
+            <div id="start"></div>
+            <div id="road"></div>
+            <div id="road-final-line"></div>
+          </div>
         </div>
       </div>
       <div id="trackers"></div>

diff --git a/script.js b/script.js
@@ -10,7 +10,7 @@ const $scene = $("#scene");
 const $trackers = $("#trackers");
 const $resetButton = $("#reset-button");
 const $start = $("#start");
-const $music = $("#music");
+const $overlay = $("#overlay");
 
 const game = {
   $: { rocks: [], bushes: [], players: {}, progress: {} },
@@ -65,6 +65,11 @@ function loadGame() {
       z: game.trackLength,
       frame: 0,
       coopValue: 0,
+      lastZ: game.trackLength,
+      playerPushX: null,
+      nextX: null,
+      jumpingT: null,
+      wonT: null,
     };
     return acc;
   }, game.$.players || {});
@@ -196,6 +201,21 @@ function checkForPlayerCollision() {
           t: now,
           x: p2.x + -1 * direction * kPlayerCollisionPushX,
         };
+
+        // Show a quick red overlay
+        $overlay.animate(
+          [
+            { background: "transparent" },
+            { background: "rgba(255, 0, 0, 0.5)" },
+            { background: "transparent" },
+          ],
+          {
+            duration: 200,
+            easing: "ease-in-out",
+            fill: "forwards",
+          }
+        );
+
         return;
       }
     }

diff --git a/style.css b/style.css
@@ -50,19 +50,36 @@ body {
   width: 150px;
 }
 
-#screen {
+#tutorial {
+  color: #999;
+}
+
+#tv {
   width: var(--screen-size);
   height: var(--screen-size);
   position: relative;
   margin: 0 auto;
-  perspective-origin: 100% -10%;
-  perspective: 1000px;
   overflow: hidden;
   border: 3px solid var(--primary-color);
 }
 
-#tutorial {
-  color: #999;
+#screen {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  perspective-origin: 100% -10%;
+  perspective: 1000px;
+}
+
+#overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
 }
 
 #scene {