index.html

<!--

Created by Alvin Wan (alvinwan.com)

* ocean animation from Don Mccurdy

-->
<!DOCTYPE html>
<html>
  <head>
    <title>Ergo | Endless Runner Game in Virtual Reality</title>
    <script src="./assets/0.7.0/aframe.min.js"></script>
    <script src="./assets/ocean.js"></script>
    <script src="./assets/runner.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/alvinwan/aframe-low-poly@0.0.2/dist/aframe-low-poly.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js"></script>
    <script src="http://mirrorvr.alvinwan.com/mirrorvr.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
    <link href="./assets/style.css" rel="stylesheet" />
  </head>
  <body>
    <div class="notification-container">
      <div class="notification-desktop">
        <p>This is the default room. If any mobile user joins, your will lose control and this app will mirror that mobile user's screen.
          <a onClick="location.reload();" href="#" class="notification-button">Click to join a random room.</a>
          <a onClick="hideWarning();" class="notification-close"><i class="fas fa-times"></i></a></p>
      </div>
    </div>
    <a-scene fog="type: linear; color: #a3d0ed; near:5; far:20">

      <a-sky color="#a3d0ed"></a-sky>

      <!-- Mixins -->
      <a-assets>
        <a-mixin id="foliage" geometry="
            primitive: cone;
            segments-height: 1;
            segments-radial:4;
            radius-bottom:0.3;"
           material="color:white;flat-shading: true;"></a-mixin>
        <a-mixin id="trunk" geometry="
            primitive: box;
            height:0.5;
            width:0.1;
            depth:0.1;"
           material="color:white;"></a-mixin>
        <a-mixin id="title" text="
            font:exo2bold;
            height:40;
            width:40;
            opacity:0.75;
            anchor:center;
            align:center;"></a-mixin>
        <a-mixin id="copy" text="
            font:exo2bold;
            height:5;
            width:5;
            opacity:0.75;
            anchor:center;
            align:center;"></a-mixin>
        <a-mixin id="heading" text="
            font:exo2bold;
            height:10;
            width:10;
            opacity:0.75;
            anchor:center;
            align:center;"></a-mixin>
        <a-mixin id="text" text="
            font:exo2bold;
            anchor:center;
            align:center;"></a-mixin>
      </a-assets>

      <!-- Lights! -->
      <a-entity light="
          type: directional;
          castShadow: true;
          intensity: 0.4;
          color: #D0EAF9;"
        position="5 3 1"></a-entity>
      <a-light intensity="0.8" type="ambient" position="1 1 1" color="#B4C5EC"></a-light>

      <!-- Camera! -->
      <a-camera camera-listener onload-init-mirrorvr wasd-controls-enabled="false" lane-controls position="0 0 2.5">
          <a-entity id="cursor-mobile" cursor="fuse: true; fuseTimeout: 250"
                position="0 0 -1"
                geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
                material="color: white; shader: flat"
                scale="0.5 0.5 0.5"
                raycaster="far: 50; interval: 1000; objects: .clickable">
          <a-animation begin="fusing" easing="ease-in" attribute="scale"
             fill="backwards" from="1 1 1" to="0.2 0.2 0.2" dur="250"></a-animation>
      </a-camera>

      <!-- Action! -->
      <lp-cone class="iceberg" segments-radial="5" segments-height="3" height="1" amplitude-variance="0.25" radius-top="0.15" radius-bottom="0.5" position="3 -0.1 -1.5">
        <a-animation attribute="rotation" from="-5 0 0" to="5 0 0" repeat="indefinite" direction="alternate"></a-animation>
        <a-animation attribute="position" from="3 -0.2 -1.5" to="4 -0.2 -2.5" repeat="indefinite" direction="alternate" dur="12000" easing="linear"></a-animation>
      </lp-cone>
      <lp-cone class="iceberg" segments-radial="7" segments-height="3" height="0.5" amplitude="0.12" radius-top="0.25" radius-bottom="0.35" position="-3 -0.1 -0.5">
        <a-animation attribute="rotation" from="0 0 -5" to="5 0 0" repeat="indefinite" direction="alternate" dur="1500"></a-animation>
        <a-animation attribute="position" from="-4 -0.2 -0.5" to="-2 -0.2 -0.5" repeat="indefinite" direction="alternate" dur="15000" easing="linear"></a-animation>
      </lp-cone>
      <lp-cone class="iceberg" segments-radial="6" segments-height="2" height="0.5" amplitude="0.1" radius-top="0.25" radius-bottom="0.25" position="-5 -0.2 -3.5">
        <a-animation attribute="rotation" from="5 0 -5" to="5 0 0" repeat="indefinite" direction="alternate" dur="800"></a-animation>
        <a-animation attribute="position" from="-3 -0.2 -3.5" to="-5 -0.2 -5.5" repeat="indefinite" direction="alternate" dur="15000" easing="linear"></a-animation>
      </lp-cone>

      <a-ocean depth="50" width="50" amplitude="0" amplitude-variance="0.1" speed="1.5" speed-variance="1" opacity="1" density="50"></a-ocean>
      <a-ocean depth="50" width="50" opacity="0.5" amplitude="0" amplitude-variance="0.15" speed="1.5" speed-variance="1" density="50"></a-ocean>

      <lp-cone scale="2 2 2" shadow position="0 -3.5 -1.5" rotation="90 0 0" radius-top="1.9" radius-bottom="1.9" segments-radial="20" segments-height="20" amplitude="0.05" amplitude-variance="0.05" height="20" emissive="#005DED" emissive-intensity="0.1">
        <a-entity id="tree-container" position="0 .5 -1.5" rotation="-90 0 0">

          <!-- Tell user to turn around if facing the wrong way! -->
          <a-text value="Turn around!" mixin="title" rotation="0 180 0" position="0 1.1 10"></a-text>
          <a-text value="Turn left" mixin="title" rotation="0 -90 0" position="8 1.1 1.5"></a-text>
          <a-text value="Turn right" mixin="title" rotation="0 90 0" position="-8 1.1 1.5"></a-text>
          <a-text value="Look up" mixin="text" height="2" width="2" color="#333" rotation="-90 0 0" position="0 0.5 1.5"></a-text>

          <a-entity data-tree-position-index="1" id="template-tree-center" class="tree tree-center" shadow scale="0.3 0.3 0.3" position="0 0.6 0">
            <a-entity mixin="foliage"></a-entity>
            <a-entity mixin="trunk" position="0 -0.5 0"></a-entity>
            <a-animation attribute="position" ease="linear" from="0 0.6 -7" to="0 0.6 1.5" dur="5000"></a-animation>
          </a-entity>

          <a-entity data-tree-position-index="0" id="template-tree-left" class="tree tree-left" shadow scale="0.3 0.3 0.3" position="-0.5 0.55 0">
            <a-entity mixin="foliage"></a-entity>
            <a-entity mixin="trunk" position="0 -0.5 0"></a-entity>
            <a-animation attribute="position" ease="linear" from="-0.5 0.55 -7" to="-0.5 0.55 1.5" dur="5000"></a-animation>
          </a-entity>

          <a-entity data-tree-position-index="2" id="template-tree-right" class="tree" shadow scale="0.3 0.3 0.3" position="0.5 0.55 0">
            <a-entity mixin="foliage"></a-entity>
            <a-entity mixin="trunk" position="0 -0.5 0"></a-entity>
            <a-animation attribute="position" ease="linear" from="0.5 0.55 -7" to="0.5 0.55 1.5" dur="5000"></a-animation>
          </a-entity>

          <a-text id="score" value="" mixin="text" height="40" width="40" position="0 1.2 -3" opacity="0.75"></a-text>

          <a-entity id="menu-container">
            <a-entity id="start-menu" position="0 1.1 -3">
              <a-text id="start-copy-desktop" value="Hit any key to start. Move left and right to avoid the trees!" mixin="copy" position="0 1 0"></a-text>
              <a-entity id="start-copy-mobile" position="0 1 0">
                <a-text value="Turn left and right to move your player, and avoid the trees!" mixin="copy"></a-text>
                <a-text value="Start" position="0 0.75 0" mixin="heading"></a-text>
                <a-box id="start-button" position="0 0.65 -0.05" width="1.5" height="0.6" depth="0.1"></a-box>
              </a-entity>
              <a-text value="ERGO" mixin="title"></a-text>
            </a-entity>
            <a-entity id="game-over" position="0 1.1 -3">
              <a-text value="?" mixin="heading" id="game-score" position="0 1.7 0"></a-text>
              <a-text value="Score" mixin="copy" position="0 1.2 0"></a-text>
              <a-text id="game-over-copy-desktop" value="Hit any key to play again." mixin="copy" position="0 0.8 0"></a-text>
              <a-entity id="game-over-copy-mobile">
                <a-text value="Restart" mixin="heading" position="0 0.7 0"></a-text>
                <a-box id="restart-button" position="0 0.6 -0.05" width="2" height="0.6" depth="0.1"></a-box>
              </a-entity>
              <a-text value="Game Over" mixin="title"></a-text>
            </a-entity>
          </a-entity>

          <a-entity id="player" player>
            <a-sphere radius="0.05">
              <a-animation repeat="indefinite" direction="alternate" attribute="position" ease="ease-in-out" from="0 0.5 0.6" to="0 0.525 0.6"></a-animation>
              <a-animation repeat="indefinite" direction="alternate" attribute="radius" from="0.05" to="0.055" dur="1500"></a-animation>
              <a-light type="point" intensity="0.35" color="#FF440C">
                <a-animation repeat="indefinite" direction="alternate-reverse" attribute="intensity" ease="ease-in-out" from="0.35" to="0.5"></a-animation>
              </a-light>
            </a-sphere>
          </a-entity>
        </a-entity>
      </lp-cone>
    </a-scene>
  </body>
</html>