Update index.html

index.html

@@ -14,11 +14,11 @@
       <a-plane src="#groundTexture" rotation="-90 0 0" height="100" width="100"></a-plane>
       <a-entity id="player" position="0 1.5 -5" movement></a-entity>
       <a-entity id="bird-swarm">
-        <a-sphere color="#F44336" position="0 1.5 -10" radius="0.5"></a-sphere>
-        <a-sphere color="#E91E63" position="0 1.5 -11" radius="0.5"></a-sphere>
-        <a-sphere color="#9C27B0" position="0 1.5 -12" radius="0.5"></a-sphere>
-        <a-sphere color="#2196F3" position="0 1.5 -13" radius="0.5"></a-sphere>
-        <a-sphere color="#4CAF50" position="0 1.5 -14" radius="0.5"></a-sphere>
+        <a-sphere class="bird" color="#F44336" position="0 1.5 -10" radius="0.5"></a-sphere>
+        <a-sphere class="bird" color="#E91E63" position="0 1.5 -11" radius="0.5"></a-sphere>
+        <a-sphere class="bird" color="#9C27B0" position="0 1.5 -12" radius="0.5"></a-sphere>
+        <a-sphere class="bird" color="#2196F3" position="0 1.5 -13" radius="0.5"></a-sphere>
+        <a-sphere class="bird" color="#4CAF50" position="0 1.5 -14" radius="0.5"></a-sphere>
       </a-entity>
     </a-scene>
 
@@ -64,7 +64,7 @@
           });
 
           document.addEventListener('keyup', function (event) {
-            switch (event.key) {
+            switch (
               case 'ArrowUp':
               case 'ArrowDown':
                 stateMachine.stop();
@@ -74,19 +74,50 @@
 
           var birdSwarm = document.querySelector('#bird-swarm');
           var birdState = 'idle';
+          var birdInterval;
 
           var birdStateMachine = new StateMachine({
             init: 'follow',
             transitions: [
               { name: 'follow', from: 'idle', to: 'follow' },
-              { name: 'stop', from: 'follow', to: 'idle' }
+              { name: 'stop', from: 'follow', to: 'idle' },
+              { name: 'click', from: 'follow', to: 'click' },
+              { name: 'release', from: 'click', to: 'follow' }
             ],
             methods: {
               onEnterFollow: function () {
-                birdSwarm.setAttribute('animation', 'property: position; to: 0 1.5 -6; dur: 2000');
+                birdInterval = setInterval(function () {
+                  var birds = document.querySelectorAll('.bird');
+                  var birdPosition = birdSwarm.getAttribute('position');
+                  var randomX = Math.random() * 0.4 - 0.2;
+                  var randomY = Math.random() * 0.4 - 0.2;
+                  var randomZ = Math.random() * 0.4 - 0.2;
+                  birds.forEach(function (bird) {
+                    bird.setAttribute('animation', 'property: position; to: ' + (birdPosition.x + randomX) + ' ' + (birdPosition.y + randomY) + ' ' + (birdPosition.z + randomZ) + '; dur: 1000');
+                  });
+                }, 1000);
               },
               onLeaveFollow: function () {
-                birdSwarm.setAttribute('animation', '');
+                clearInterval(birdInterval);
+                var birds = document.querySelectorAll('.bird');
+                birds.forEach(function (bird) {
+                  bird.setAttribute('animation', '');
+                });
+              },
+              onClick: function (event, from, to) {
+                var target = event.target;
+                target.setAttribute('animation__click', 'property: position; to: 0 2.5 -5; dur: 1000');
+              },
+              onRelease: function (event, from, to) {
+                var target = event.target;
+                target.removeAttribute('animation__click');
+                var birdInterval = setInterval(function () {
+                  var birdPosition = target.getAttribute('position');
+                  var randomX = Math.random() * 0.4 - 0.2;
+                  var randomY = Math.random() * 0.4 - 0.2;
+                  var randomZ = Math.random() * 0.4 - 0.2;
+                  target.setAttribute('animation', 'property: position; to: ' + (birdPosition.x + randomX) + ' ' + (birdPosition.y + randomY) + ' ' + (birdPosition.z + randomZ) + '; dur: 1000');
+                }, 1000);
               }
             }
           });
@@ -117,6 +148,18 @@
                 break;
             }
           });
+
+          var birds = document.querySelectorAll('.bird');
+          birds.forEach(function (bird) {
+            bird.addEventListener('mousedown', function (event) {
+              birdStateMachine.click
+              }, false);
+
+              bird.addEventListener('mouseup', function (event) {
+                birdStateMachine.release(event);
+              }, false);
+            });
+          });
         }
       });
     </script>