initial wall sound effect

package-lock.json

@@ -91,6 +91,11 @@
         "webvr-polyfill": "^0.10.5"
       }
     },
+    "aframe-aabb-collider-component": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/aframe-aabb-collider-component/-/aframe-aabb-collider-component-2.2.1.tgz",
+      "integrity": "sha512-DejvmaP+1Em660oMEPU8C4SYmiRkn7bpq0ttBwqw/N3In8/QODI2S1RYuJHEkZWde6XCfAiSuBpOBcRTnbSn/w=="
+    },
     "aframe-atlas-uvs-component": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/aframe-atlas-uvs-component/-/aframe-atlas-uvs-component-2.0.0.tgz",

package.json

@@ -6,6 +6,7 @@
     "start": "webpack-dev-server --host 0.0.0.0 --progress --colors --hot --inline --port 3000"
   },
   "dependencies": {
+    "aframe-aabb-collider-component": "^2.2.1",
     "aframe-atlas-uvs-component": "^2.0.0",
     "aframe-audioanalyser-component": "^5.1.0-beta",
     "aframe-event-decorators": "^1.0.2",

src/components/song.js

@@ -1,6 +1,6 @@
 const utils = require('../utils');
 
-var once = {once: true};
+var ONCE = {once: true};
 var BASE_VOLUME = 0.75;
 
 /**
@@ -27,14 +27,9 @@ AFRAME.registerComponent('song', {
     this.audioAnalyser.gainNode.gain.value = BASE_VOLUME;
 
     // Restart, get new buffer source node and play.
-    this.el.addEventListener('pausemenurestart', () => {
-      this.source.disconnect();
-      this.data.analyserEl.addEventListener('audioanalyserbuffersource', evt => {
-        this.source = evt.detail;
-        if (this.data.isBeatsPreloaded) { this.source.start(); }
-      }, once);
-      this.audioAnalyser.refreshSource();
-    });
+    this.el.addEventListener('pausemenurestart', this.onRestart.bind(this));
+    this.el.addEventListener('wallhitstart', this.onWallHitStart.bind(this));
+    this.el.addEventListener('wallhitend', this.onWallHitEnd.bind(this));
   },
 
   update: function (oldData) {
@@ -94,7 +89,7 @@ AFRAME.registerComponent('song', {
         this.source = evt.detail;
         this.source.onended = this.victory;
         resolve(this.source);
-      }, once);
+      }, ONCE);
       this.analyserSetter.src = utils.getS3FileUrl(data.challengeId, 'song.ogg');
       data.analyserEl.setAttribute('audioanalyser', this.analyserSetter);
       this.audioAnalyser.xhr.addEventListener('progress', evt => {
@@ -122,5 +117,26 @@ AFRAME.registerComponent('song', {
     const progress = evt.loaded / evt.total;
     this.songLoadingIndicator.setAttribute(
       'geometry', 'thetaLength', progress * 360);
+  },
+
+  onRestart: function () {
+    if (this.source) { this.source.disconnect(); }
+    this.data.analyserEl.addEventListener('audioanalyserbuffersource', evt => {
+      this.source = evt.detail;
+      if (this.data.isBeatsPreloaded) { this.source.start(); }
+    }, ONCE);
+    this.audioAnalyser.refreshSource();
+  },
+
+  onWallHitStart: function () {
+    const gain = this.audioAnalyser.gainNode.gain;
+    gain.linearRampToValueAtTime(0.2, this.context.currentTime + 0.1);
+    this.source.detune.linearRampToValueAtTime(-1000, this.context.currentTime + 0.1);
+  },
+
+  onWallHitEnd: function () {
+    const gain = this.audioAnalyser.gainNode.gain;
+    gain.linearRampToValueAtTime(BASE_VOLUME, this.context.currentTime + 0.2);
+    this.source.detune.linearRampToValueAtTime(0, this.context.currentTime + 0.2);
   }
 });

src/components/wall.js

@@ -9,21 +9,23 @@ AFRAME.registerComponent('wall', {
 
   pause: function () {
     this.el.object3D.visible = false;
+    this.el.removeAttribute('collidable');
   },
 
   play: function () {
     this.el.object3D.visible = true;
+    this.el.setAttribute('collidable', '');
   },
 
   tock: function (time, delta) {
     this.el.object3D.position.z += this.data.speed * (delta / 1000);
-    this.returnToPool();
+    if (this.el.object3D.position.z > this.maxZ) { this.returnToPool(); }
   },
 
   returnToPool: function () {
-    if (this.el.object3D.position.z < this.maxZ) { return; }
     this.el.sceneEl.components.pool__wall.returnEntity(this.el);
     this.el.object3D.position.z = 9999;
     this.el.pause();
+    this.el.removeAttribute('collidable');
   },
 });

src/index.html

@@ -143,7 +143,16 @@
         material="shader: flat; transparent: true; src: #cursorMeshImg; depthTest: false"
         sub-object="from: #cursorLaser; name: glow"></a-mixin>
       <a-entity id="cameraRig">
-        <a-entity id="camera" position="0 1.6 0.5" camera look-controls wasd-controls></a-entity>
+        <a-entity id="camera" position="0 1.6 0.5" camera look-controls wasd-controls>
+          <a-entity
+            id="cameraCollider"
+            bind__aabb-collider="enabled: isPlaying"
+            aabb-collider="objects: [collidable]; interval: 50; collideNonVisible: false"
+            geometry="primitive: box; width: 0.25; height: 0.25; depth: 0.25"
+            proxy-event__wallhitstart="event: hitstart; to: a-scene; as: wallhitstart"
+            proxy-event__wallhitend="event: hitend; to: a-scene; as: wallhitend"
+            visible="false"></a-entity>
+        </a-entity>
 
         {% macro saber (hand, otherHand, bladeColor, beamColor) %}
           <a-entity id="{{ hand }}Hand"

src/index.js

@@ -2,6 +2,7 @@ function requireAll (req) { req.keys().forEach(req); }
 
 require('../vendor/BufferGeometryUtils');
 
+require('aframe-aabb-collider-component');
 require('aframe-atlas-uvs-component');
 require('aframe-audioanalyser-component');
 require('aframe-event-set-component');

src/state/index.js

@@ -307,6 +307,7 @@ function difficultyComparator (a, b) {
 }
 
 function takeDamage (state) {
+  if (!state.isPlaying) { return; }
   state.damage++;
   state.score.combo = 0;
   checkGameOver(state);