Spaces:

awacke1
/

Finite-State-Machine-Demo

Running

App Files Files Community

Finite-State-Machine-Demo / index.html

awacke1

Update index.html

fb4f027 over 2 years ago

raw

history blame

4.28 kB

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