Spaces:

awacke1
/

Finite-State-Machine-Demo

Running

App Files Files Community

awacke1 commited on Mar 11, 2023

Commit

3aa6634

1 Parent(s): c884218

Update index.html

Browse files

Files changed (1) hide show

index.html +192 -157

index.html CHANGED Viewed

@@ -1,167 +1,202 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Finite State Machine Demo with 3D Bird Swarm</title>
     <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
   </head>
   <body>
     <a-scene>
-      <a-assets>
-        <img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
-        <img id="skyTexture" src="https://cdn.aframe.io/a-painter/images/sky.jpg">
-      </a-assets>
-      <a-sky src="#skyTexture"></a-sky>
-      <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 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>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/javascript-state-machine/3.0.0/state-machine.min.js"></script>
-    <script>
-      AFRAME.registerComponent('movement', {
-        init: function () {
-          var el = this.el;
-          var playerState = 'idle';
-          var stateMachine = new StateMachine({
-            init: 'idle',
-            transitions: [
-              { name: 'moveForward', from: ['idle', 'moveBackward'], to: 'moveForward' },
-              { name: 'moveBackward', from: ['idle', 'moveForward'], to: 'moveBackward' },
-              { name: 'stop', from: ['moveForward', 'moveBackward'], to: 'idle' }
-            ],
-            methods: {
-              onEnterMoveForward: function () {
-                el.setAttribute('animation', 'property: position; to: 0 1.5 -2; dur: 2000');
-              },
-              onEnterMoveBackward: function () {
-                el.setAttribute('animation', 'property: position; to: 0 1.5 -8; dur: 2000');
-              },
-              onLeaveMoveForward: function () {
-                el.setAttribute('animation', '');
-              },
-              onLeaveMoveBackward: function () {
-                el.setAttribute('animation', '');
-              }
-            }
-          });
-          document.addEventListener('keydown', function (event) {
-            switch (event.key) {
-              case 'ArrowUp':
-                stateMachine.moveForward();
-                break;
-              case 'ArrowDown':
-                stateMachine.moveBackward();
-                break;
-            }
-          });
-          document.addEventListener('keyup', function (event) {
-            switch (
-              case 'ArrowUp':
-              case 'ArrowDown':
-                stateMachine.stop();
-                break;
-            }
-          });
-          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: 'click', from: 'follow', to: 'click' },
-              { name: 'release', from: 'click', to: 'follow' }
-            ],
-            methods: {
-              onEnterFollow: function () {
-                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 () {
-                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);
-              }
-            }
-          });
-          function updateBirdPosition () {
-            var playerPosition = el.getAttribute('position');
-            birdSwarm.setAttribute('position', playerPosition.x + ' ' + playerPosition.y + ' ' + (playerPosition.z - 5));
-          }
-          setInterval(function () {
-            updateBirdPosition();
-          }, 100);
-          document.addEventListener('keydown', function (event) {
-            switch (event.key) {
-              case 'ArrowUp':
-              case 'ArrowDown':
-                birdStateMachine.follow();
-                break;
-            }
-          });
-          document.addEventListener('keyup', function (event) {
-            switch (event.key) {
-              case 'ArrowUp':
-              case 'ArrowDown':
-                birdStateMachine.stop();
-                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>
   </body>
-</html>

 <!DOCTYPE html>
 <html>
   <head>
     <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
   </head>
   <body>
     <a-scene>
+      <!-- Camera -->
+      <a-entity camera look-controls position="0 2 6"></a-entity>
+      <!-- Field -->
+      <a-box color="green" position="0 -0.5 -10" width="16" height="0.5" depth="26"></a-box>
+      <!-- Ball -->
+      <a-sphere id="ball" color="white" radius="0.2" position="0 0.2 0"></a-sphere>
+      <!-- Particle Systems -->
+      <!-- Team 1 -->
+      <a-entity particle-system="color: #FFC107; accelerationValue: -9.8; accelerationSpread: 2; maxAge: 2; size: 0.1; particleCount: 4;" position="-2 0.5 -3"></a-entity>
+      <a-entity particle-system="color: #FFC107; accelerationValue: -9.8; accelerationSpread: 2; maxAge: 2; size: 0.1; particleCount: 4;" position="2 0.5 -3"></a-entity>
+      <a-entity particle-system="color: #FFC107; accelerationValue: -9.8; accelerationSpread: 2; maxAge: 2; size: 0.1; particleCount: 4;" position="-2 0.5 -7"></a-entity>
+      <a-entity particle-system="color: #FFC107; accelerationValue: -9.8; accelerationSpread: 2; maxAge: 2; size: 0.1; particleCount: 4;" position="2 0.5 -7"></a-entity>
+      <!-- Team 2 -->
+      <a-entity particle-system="color: #2196F3; accelerationValue: -9.8; accelerationSpread: 2; maxAge: 2; size: 0.1; particleCount: 4;" position="-2 0.5 3"></a-entity>
+      <a-entity particle-system="color: #2196F3; accelerationValue: -9.8; accelerationSpread: 2; maxAge: 2; size: 0.1; particleCount: 4;" position="2 0.5 3"></a-entity>
+      <a-entity particle-system="color: #2196F3; accelerationValue: -9.8; accelerationSpread: 2; maxAge: 2; size: 0.1; particleCount: 4;" position="-2 0.5 7"></a-entity>
+      <a-entity particle-system="color: #2196F3; accelerationValue: -9.8; accelerationSpread: 2; maxAge: 2; size: 0.1; particleCount: 4;" position="2 0.5 7"></a-entity>
+      <!-- Script to move the ball -->
+      <script>
+        // Get the ball entity
+        var ball = document.querySelector("#ball");
+        // Set the ball's initial velocity
+        var ballVelocity = new THREE.Vector3(0, 0, 0);
+        // Set the ball's mass
+        var ballMass = 1;
+        // Set the ball's friction coefficient
+    var ballFriction = 0.01;
+    // Set the ball's restitution coefficient
+    var ballRestitution = 0.9;
+    // Set the ball's position update interval
+    var ballInterval = 20; // milliseconds
+    // Set the ball's initial position
+    var ballPosition = new THREE.Vector3(0, 0.2, 0);
+    // Set the ball's size
+    var ballSize = 0.2;
+    // Set the ball's goal width and height
+    var goalWidth = 5;
+    var goalHeight = 3;
+    // Set the ball's movement speed
+    var ballSpeed = 0.2;
+    // Set the ball's maximum velocity
+    var ballMaxVelocity = 10;
+    // Set the ball's reset position
+    var resetPosition = new THREE.Vector3(0, 0.2, 0);
+    // Set the ball's collision radius
+    var ballRadius = 0.4;
+    // Set the ball's collision offset
+    var ballOffset = new THREE.Vector3(0, ballRadius, 0);
+    // Set the ball's collision detection
+    var ballCollisionDetection = true;
+    // Set the ball's collision response
+    var ballCollisionResponse = true;
+    // Set the ball's collision event listener
+    ball.addEventListener("collide", function(event) {
+      // Get the collider object
+      var collider = event.detail.body.el;
+      // Get the collider's velocity
+      var colliderVelocity = collider.getAttribute("particle-system").velocity;
+      // Set the ball's velocity to the collider's velocity
+      ballVelocity.copy(colliderVelocity);
+    });
+    // Set the ball's movement direction
+    var ballDirection = new THREE.Vector3(0, 0, 0);
+    // Set the ball's goal detection
+    function detectGoal() {
+      if (ballPosition.x < -goalWidth / 2 || ballPosition.x > goalWidth / 2 || ballPosition.z < -goalHeight / 2 || ballPosition.z > goalHeight / 2) {
+        resetGame();
+      }
+    }
+    // Set the ball's movement logic
+    function moveBall() {
+      // Update the ball's position
+      ballPosition.add(ballDirection);
+      // Apply friction to the ball's velocity
+      ballVelocity.multiplyScalar(1 - ballFriction);
+      // Apply gravity to the ball's velocity
+      ballVelocity.add(new THREE.Vector3(0, -9.8 * ballMass / 1000, 0));
+      // Apply the ball's velocity to its position
+      ballPosition.add(ballVelocity);
+      // Apply the ball's position to the ball entity
+      ball.setAttribute("position", ballPosition);
+      // Detect if the ball has gone into a goal
+      detectGoal();
+      // Update the ball's position every interval
+      setTimeout(moveBall, ballInterval);
+    }
+    // Set the ball's reset logic
+    function resetGame() {
+      // Reset the ball's position
+      ballPosition.copy(resetPosition);
+      ball.setAttribute("position", ballPosition);
+      // Reset the ball's velocity
+      ballVelocity.set(0, 0, 0);
+      // Reset the ball's direction
+      ballDirection.set(0, 0, 0);
+    }
+    // Set the ball's collision detection
+    function detectCollisions() {
+      // Get all the particle system entities
+      var particleSystems = document.querySelectorAll("a-entity[particle-system]");
+      // Loop through each particle system entity
+      for (var i = 0; i < particleSystems.length; i++) {
+        // Get the particle system's position
+        var particleSystemPosition = particleSystems[i].getAttribute("position");
+        // Get the particle system's velocity
+        var particleSystemVelocity = particleSystems[i].getAttribute("particle-system").velocity;
+        // Get the particle system's direction
+        var particleSystemDirection = new THREE.Vector3(particleSystemVelocity.x, 0, particleSystemVelocity.z);
+        // Get the particle system's radius
+        var particleSystemRadius = particleSystems[i].getAttribute("particle-system").size * particleSystems[i].getAttribute("particle-system").particleCount;
+        // Get the particle system's offset
+        var particleSystemOffset = new THREE.Vector3(0, particleSystemRadius, 0);
+        // Get the particle system's collision detection
+        var particleSystemCollisionDetection = particleSystems[i].getAttribute("particle-system").collisionDetection;
+        // Get the particle system's collision response
+        var particleSystemCollisionResponse = particleSystems[i].getAttribute("particle-system").collisionResponse;
+        // Get the particle system's collision event listener
+        var particleSystemCollisionListener = particleSystems[i].getAttribute("particle-system").collisionListener;
+        // Calculate the distance between the particle system and the ball
+        var distance = particleSystemPosition.distanceTo(ballPosition);
+        // Check if the particle system is colliding with the ball
+        if (distance < particleSystemRadius + ballRadius) {
+          // Set the ball's direction to the particle system's direction
+          ballDirection.copy(particleSystemDirection);
+          // Emit a collision event on the particle system entity
+          if (particleSystemCollisionListener) {
+            particleSystems[i].emit("collision");
+          }
         }
+      }
+      // Check for collisions every interval
+      setTimeout(detectCollisions, 20);
+    }
+    // Set the ball's movement direction to the ball's speed
+    ballDirection.set(0, 0, -ballSpeed);
+    // Start the ball's movement logic
+    moveBall();
+    // Start the ball's collision detection
+    detectCollisions();
+  </script>
+</a-scene>
   </body>
+</html>