File size: 7,864 Bytes
089f324 43854a2 3aa6634 bc9487e 3aa6634 bc9487e 3aa6634 bc9487e 3aa6634 bc9487e 3aa6634 bc9487e 3aa6634 bc9487e 3aa6634 bc9487e 3aa6634 a7617e0 3aa6634 bc9487e 3aa6634 bc9487e 3aa6634 43854a2 3aa6634 43854a2 3aa6634 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 |
<!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> |