diff --git a/src/components/beat.js b/src/components/beat.js index 6cee649..25006d5 100644 --- a/src/components/beat.js +++ b/src/components/beat.js @@ -35,14 +35,7 @@ AFRAME.registerComponent('beat', { var el = this.el; var color; var size = this.data.size; - this.beatCollidersConfiguration = [ - {position: {x: size / 2, y: 0, z: 0}, size: {width: size / 5.0, height: size, depth: size}}, - {position: {x: -size / 2, y: 0, z: 0}, size: {width: size / 5.0, height: size, depth: size}}, - {position: {x: 0, y: size / 2, z: 0}, size: {width: size, height: size / 5.0, depth: size}}, - {position: {x: 0, y: -size / 2, z: 0}, size: {width: size, height: size / 5.0, depth: size}}, - {position: {x: 0, y: 0, z: size / 2}, size: {width: size, height: size, depth: size / 5.0}}, - {position: {x: 0, y: 0, z: -size / 2}, size: {width: size, height: size, depth: size / 5.0}} - ]; + this.beatBoundingBox = new THREE.Box3(); this.boundingBox = new THREE.Box3(); this.saberEls = this.el.sceneEl.querySelectorAll('[saber-controls]'); this.backToPool = false; @@ -50,6 +43,8 @@ AFRAME.registerComponent('beat', { this.returnToPoolTimer = 800; this.rightCutPlanePoints = []; this.leftCutPlanePoints = []; + this.missElLeft = document.querySelector('#missLeft'); + this.missElRight = document.querySelector('#missRight'); this.initBlock(); this.initColliders(); this.initFragments(); @@ -98,34 +93,29 @@ AFRAME.registerComponent('beat', { }, initColliders: function () { - var beatColliderEl; - var beatCollidersConfiguration = this.beatCollidersConfiguration; - var beatCollidersEls = this.beatCollidersEls = []; + var data = this.data; var i; var size; + var hitColliderConfiguration = { + position: {x: 0, y: data.size / 2, z: 0}, + size: {width: data.size, height: data.size / 5.0, depth: data.size} + }; - for (i = 0; i < 6; i++) { - beatColliderEl = document.createElement('a-entity'); - size = beatCollidersConfiguration[i].size; - beatColliderEl.setAttribute('geometry', { - primitive: 'box', - height: size.height, - width: size.width, - depth: size.depth - }); - beatColliderEl.object3D.position.copy(beatCollidersConfiguration[i].position); - beatColliderEl.object3D.visible = false; - beatCollidersEls.push(beatColliderEl); - if (i == 2) { this.correctBeatColliderEl = beatColliderEl; } - this.el.appendChild(beatColliderEl); - if (this.data.debug) { - beatColliderEl.object3D.visible = true; - if (i == 2) { - beatColliderEl.setAttribute('material', 'color', 'yellow'); - } else { - beatColliderEl.setAttribute('material', 'color', 'purple'); - } - } + var hitColliderEl = this.hitColliderEl = document.createElement('a-entity'); + hitColliderEl.setAttribute('geometry', { + primitive: 'box', + height: hitColliderConfiguration.size.height, + width: hitColliderConfiguration.size.width, + depth: hitColliderConfiguration.size.depth + }); + + hitColliderEl.object3D.position.copy(hitColliderConfiguration.position); + hitColliderEl.object3D.visible = false; + this.el.appendChild(hitColliderEl); + + if (data.debug) { + hitColliderEl.object3D.visible = true; + hitColliderEl.setAttribute('material', 'color', 'purple'); } }, @@ -195,6 +185,19 @@ AFRAME.registerComponent('beat', { }); }, + missBeat: function (hand) { + var missEl = hand === 'left' ? this.missElLeft : this.missElRight; + if (!missEl) { return; } + missEl.object3D.position.copy(this.el.object3D.position); + missEl.object3D.position.y += 0.5; + missEl.object3D.position.z -= 0.5; + missEl.object3D.visible = true; + setTimeout(function () { + missEl.object3D.visible = false; + }, 3000); + this.destroyed = true; + }, + destroyBeat: (function () { var parallelPlaneMaterial = new THREE.MeshBasicMaterial({color: '#00008b', side: THREE.DoubleSide}); var planeMaterial = new THREE.MeshBasicMaterial({color: 'grey', side: THREE.DoubleSide}); @@ -290,16 +293,11 @@ AFRAME.registerComponent('beat', { cutLeftMaterial.clippingPlanes.push(leftBorderInnerPlane) cutLeftMaterial.clippingPlanes.push(leftBorderOuterPlane) - for (i = 0; i < 6; i++) { - this.beatCollidersEls[i].object3D.visible = false; - } - this.partLeftEl.object3D.visible = true; this.partRightEl.object3D.visible = true; this.el.sceneEl.renderer.localClippingEnabled = true; this.destroyed = true; - this.el.sceneEl.emit('beatdestroyed', null, false); this.gravityVelocity = 0.1; this.rotationAxis.copy(this.rightCutPlanePoints[0]).sub(this.rightCutPlanePoints[1]); @@ -393,6 +391,7 @@ AFRAME.registerComponent('beat', { var rotationStep = 2 * Math.PI / 150; return function (time, timeDelta) { + var beatBoundingBox; var boundingBox; var i; var plane; @@ -400,15 +399,25 @@ AFRAME.registerComponent('beat', { var saberEls = this.saberEls; if (!this.destroyed) { - if (!this.correctBeatColliderEl.getObject3D('mesh')) { return; } - boundingBox = this.boundingBox.setFromObject(this.correctBeatColliderEl.getObject3D('mesh')); + if (!this.hitColliderEl.getObject3D('mesh')) { return; } + boundingBox = this.boundingBox.setFromObject(this.hitColliderEl.getObject3D('mesh')); + beatBoundingBox = this.beatBoundingBox.setFromObject(this.blockEl.getObject3D('mesh')); for (i = 0; i < saberEls.length; i++) { saberBoundingBox = saberEls[i].components['saber-controls'].boundingBox; - if (boundingBox && saberBoundingBox && saberBoundingBox.intersectsBox(boundingBox)) { + if (!boundingBox || !saberBoundingBox) { break; } + if (saberBoundingBox.intersectsBox(boundingBox)) { this.destroyBeat(saberEls[i]); + this.el.sceneEl.emit('beathit', null, false); + break; + } + if (saberBoundingBox.intersectsBox(beatBoundingBox)) { + this.destroyBeat(saberEls[i]); + this.missBeat(saberEls[i].getAttribute('saber-controls').hand); + this.el.sceneEl.emit('beatmissed', null, false); break; } } + this.el.object3D.position.z += this.data.speed * (timeDelta / 1000); this.backToPool = this.el.object3D.position.z >= 2; } else { diff --git a/src/index.html b/src/index.html index 8b5ffae..a615dad 100644 --- a/src/index.html +++ b/src/index.html @@ -63,6 +63,10 @@ + + + + diff --git a/src/state/index.js b/src/state/index.js index ac7a570..f158d75 100644 --- a/src/state/index.js +++ b/src/state/index.js @@ -66,6 +66,15 @@ AFRAME.registerState({ localStorage.setItem('activeHand', state.activeHand); }, + beathit: state => { + state.score.score += 1; + state.score.combo += 1; + }, + + beatmissed: state => { + state.score.combo = 0; + }, + beatloaderfinish: (state) => { state.challenge.isLoading = false; },