Spaces:

awacke1
/

Finite-State-Machine-Demo

Running

App Files Files Community

awacke1 commited on Mar 11, 2023

Commit

fb4f027

•

1 Parent(s): bc9487e

Update index.html

Browse files

Files changed (1) hide show

index.html +82 -179

index.html CHANGED Viewed

@@ -1,207 +1,110 @@
 <!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>
-      <!-- Ground -->
-      <a-box id="ground" 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 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 ground object
-        var ground = document.querySelector("#ground");
-        // 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, 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, 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 ground object's position to the ball's position
-      ballPosition.setY(Math.max(ballPosition.y, ground.object3D.position.y + ballRadius));
-      // 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
-        // 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>

 <!DOCTYPE html>
 <html>
   <head>
+    <meta charset="utf-8">
+    <title>3D Breakout Game</title>
     <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
   </head>
   <body>
+    <a-scene physics="debug: true">
+      <!-- Add a camera to the scene -->
+      <a-entity camera look-controls position="0 1.6 0"></a-entity>
+      <!-- Create the game room cube -->
+      <a-box width="10" height="10" depth="10" color="#555" static-body></a-box>
+      <!-- Create the paddle -->
+      <a-plane width="2" height="0.2" color="#f00" position="0 -4.9 0" kinematic-body></a-plane>
+      <!-- Create the ball -->
+      <a-sphere radius="0.2" color="#00f" position="0 -4.5 0" dynamic-body></a-sphere>
+      <!-- Create the bricks -->
+      <a-box width="1" height="0.5" depth="0.5" color="#0f0" position="-2.5 2.5 0" static-body></a-box>
+      <a-box width="1" height="0.5" depth="0.5" color="#0f0" position="-1.5 2.5 0" static-body></a-box>
+      <a-box width="1" height="0.5" depth="0.5" color="#0f0" position="-0.5 2.5 0" static-body></a-box>
+      <a-box width="1" height="0.5" depth="0.5" color="#0f0" position="0.5 2.5 0" static-body></a-box>
+      <a-box width="1" height="0.5" depth="0.5" color="#0f0" position="1.5 2.5 0" static-body></a-box>
+      <a-box width="1" height="0.5" depth="0.5" color="#0f0" position="2.5 2.5 0" static-body></a-box>
+      <!-- Add the mouse events to move the paddle -->
+      <script>
+        // Get the paddle element
+        var paddle = document.querySelector('[kinematic-body]');
+        // Add an event listener for mouse movement
+        window.addEventListener('mousemove', function (event) {
+          // Get the x and y coordinates of the mouse
+          var x = event.clientX / window.innerWidth * 2 - 1;
+          var y = event.clientY / window.innerHeight * 2 - 1;
+          // Move the paddle along the x-axis based on the mouse position
+          paddle.object3D.position.x = x * 5;
+        });
+      </script>
+      <!-- Add the script for ball movement and collision detection -->
+      <script>
+        // Get the ball element
+        var ball = document.querySelector('[dynamic-body]');
+        // Set the initial velocity of the ball
+        var velocity = new THREE.Vector3(0, 0, -5);
+        ball.body.velocity.copy(velocity);
+        // Add an event listener for collision detection
+        ball.addEventListener('collide', function (event) {
+          // Get the object that the ball collided with
+          var object = event.detail.body.el;
+          // If the object is a
+      // brick, remove it and update the score
+      if (object.hasAttribute('static-body')) {
+        object.parentNode.removeChild(object);
+        // update the score here
+      }
+      // If the object is the game room cube, bounce the ball back
+      if (object.hasAttribute('static-body') && object.tagName === 'A-BOX') {
+        // Get the normal of the collision
+        var normal = event.detail.contact.ni;
+        // Reflect the velocity of the ball off the normal
+        velocity.reflect(normal);
+        // Set the new velocity of the ball
+        ball.body.velocity.copy(velocity);
+      }
     });
+    // Add a function to update the position of the ball every frame
+    function updateBallPosition() {
+      // If the ball is below the paddle, reset the game
+      if (ball.object3D.position.y < -5) {
+        // reset the game here
       }
+      // If the ball is outside the game room cube, bounce it back
+      if (ball.object3D.position.x < -4.5 || ball.object3D.position.x > 4.5) {
+        velocity.x = -velocity.x;
+        ball.body.velocity.copy(velocity);
+      }
+      if (ball.object3D.position.y > 4.5) {
+        velocity.y = -velocity.y;
+        ball.body.velocity.copy(velocity);
+      }
+      if (ball.object3D.position.z < -4.5 || ball.object3D.position.z > 4.5) {
+        velocity.z = -velocity.z;
+        ball.body.velocity.copy(velocity);
       }
+      // Update the position of the ball based on its velocity
+      ball.object3D.position.addScaledVector(velocity, 1 / 60);
     }
+    // Add the update function to the scene's update loop
+    var scene = document.querySelector('a-scene');
+    scene.addEventListener('update', updateBallPosition);
   </script>
 </a-scene>
   </body>