add advanced mode

cabanier · Oct 20, 2023 · 64d1fde · 64d1fde
1 parent ed3fbd0
commit 64d1fde
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -26,6 +26,74 @@
     <script src="gradient.js"></script>
     <script src="radio.js"></script>
   </head>
+  <style>
+    .slider-checkbox {
+      position: relative;
+    }
+    .slider-checkbox input {
+      margin: 0px;
+      margin-top: 1px;
+      cursor: pointer;
+      opacity: 0;
+      filter: alpha(opacity=0);
+      -moz-opacity: 0;
+      -khtml-opacity: 0;
+      opacity: 0;
+      position: absolute;
+      z-index: 1;
+      top: 0px;
+      left: 0px;
+      background: red;
+      width: 40px;
+      height: 20px;
+      &:checked + .label {
+        &:before {
+          background-color: #1877c1;
+          content: "";
+          padding-left: 6px;
+        }
+        &:after {
+          left: 21px;
+        }
+      }
+    }
+    .slider-checkbox label {
+      position: relative;
+      padding-left: 46px;
+      &:before, &:after {
+        position: absolute;
+        -webkit-border-radius: 10px;
+        -moz-border-radius: 10px;
+        border-radius: 10px;
+        transition: background-color 0.3s, left 0.3s;
+      }
+      &:before {
+        content: "";
+        color: #fff;
+        box-sizing: border-box;
+        padding-left: 23px;
+        font-size: 12px;
+        line-height: 20px;
+        background-color: #888;
+        left: 0px;
+        top: 0px;
+        height: 20px;
+        width: 40px;
+        -webkit-border-radius: 10px;
+        -moz-border-radius: 10px;
+        border-radius: 10px;
+      }
+      &:after {
+        content: "";
+        letter-spacing: 20px;
+        background: #fff;
+        left: 1px;
+        top: 1px;
+        height: 18px;
+        width: 18px;
+      }
+    }
+  </style>
 
   <body style="position: relative">
     <a-scene
@@ -196,6 +264,10 @@
         Click the VR button on the bottom right to start! Browser with WebXR
         support required.
       </p>
+      <section class="slider-checkbox">
+        <input type="checkbox" id="advanced" />
+        <label class="label" style="color: white">Advanced mode. Reset score if you hit the ground or a building</label>
+      </section>
       <p style="font-size: 12px">
         Unofficial, fan-made, open source -
         <a

diff --git a/player.js b/player.js
@@ -193,17 +193,21 @@ AFRAME.registerComponent("player", {
       }
 
       // sound hit wall
-      this.scoreValue = 0;
-      this.updateScore();
+      if (advanced.checked){
+        this.scoreValue = 0;
+        this.updateScore();
+      }
     }
 
     // collide with floor
     if (rigLocalPosition.y < 0) {
       // sound
       if (this.velocity.y < -2) {
         this.playCollideSound("hit-ground", Math.abs(this.velocity.y));
-        this.scoreValue = 0;
-        this.updateScore();
+        if (advanced.checked){
+          this.scoreValue = 0;
+          this.updateScore();
+        }
       }
       // collision
       rigLocalPosition.y = 0;