Spaces:

awacke1
/

Finite-State-Machine-Demo

Running

App Files Files Community

Finite-State-Machine-Demo / index.html

awacke1

Update index.html

bc9487e over 2 years ago

raw

history blame

7.86 kB

	<!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>
	</html>