Spaces:

awacke1
/

Finite-State-Machine-Demo

Running

App Files Files Community

awacke1 commited on Mar 11, 2023

Commit

10b277c

•

1 Parent(s): fb4f027

Update index.html

Browse files

Files changed (1) hide show

index.html +106 -108

index.html CHANGED Viewed

@@ -1,111 +1,109 @@
 <!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>

 <!DOCTYPE html>
 <html>
+<head>
+	<meta charset="UTF-8">
+	<title>3D Breakout Game</title>
+	<style>
+		body { margin: 0; }
+		canvas { width: 100%; height: 100%; }
+	</style>
+	<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
+</head>
+<body>
+	<canvas id="gameCanvas"></canvas>
+	<script>
+		var scene = new THREE.Scene();
+		var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+		camera.position.z = 5;
+		scene.add(camera);
+		var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas') });
+		renderer.setClearColor(0x000000);
+		renderer.setPixelRatio(window.devicePixelRatio);
+		renderer.setSize(window.innerWidth, window.innerHeight);
+		var ballGeometry = new THREE.SphereGeometry(0.5, 32, 32);
+		var ballMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
+		var ball = new THREE.Mesh(ballGeometry, ballMaterial);
+		scene.add(ball);
+		var paddleGeometry = new THREE.BoxGeometry(4, 1, 1);
+		var paddleMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
+		var paddle = new THREE.Mesh(paddleGeometry, paddleMaterial);
+		paddle.position.y = -3;
+		scene.add(paddle);
+		var brickGeometry = new THREE.BoxGeometry(2, 1, 1);
+		var brickMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
+		var bricks = [];
+		for (var i = 0; i < 5; i++) {
+			for (var j = 0; j < 6; j++) {
+				var brick = new THREE.Mesh(brickGeometry, brickMaterial);
+				brick.position.x = j * 3 - 7;
+				brick.position.y = i * 2 + 3;
+				scene.add(brick);
+				bricks.push(brick);
+			}
+		}
+		var light = new THREE.PointLight(0xffffff, 1, 100);
+		light.position.set(0, 0, 10);
+		scene.add(light);
+		var speed = 0.05;
+		var xSpeed = speed;
+		var ySpeed = speed;
+		function animate() {
+			requestAnimationFrame(animate);
+			ball.position.x += xSpeed;
+			ball.position.y += ySpeed;
+			if (ball.position.x + 0.5 > 10 || ball.position.x - 0.5 < -10) {
+				xSpeed = -xSpeed;
+			}
+			if (ball.position.y + 0.5 > 10) {
+				ySpeed = -ySpeed;
+			}
+			if (ball.position.y - 0.5 < -4) {
+				alert('Game Over!');
+				location.reload();
+			}
+			if (ball.position.y - 0.5 < paddle.position.y + 0.5 && ball.position.x + 0.5 > paddle.position.x - 2 && ball.position.x - 0.5 < paddle.position.x + 2) {
+				ySpeed = -ySpeed;
+			}
+			for (var i = 0; i < bricks.length; i++) {
+				if (ball.position.y + 0.5 > bricks[i].position.y - 0.5 && ball.position.y - 0.5 < bricks[i].position.y + 0.5 && ball.position.x + 0.5 > bricks[i].position.x - 1 && ball.position.x - 0.5 < bricks[i].position.x + 1) {
+scene.remove(bricks[i]);
+bricks.splice(i, 1);
+ySpeed = -ySpeed;
+}
+}
+		if (bricks.length === 0) {
+			alert('You win!');
+			location.reload();
+		}
+		renderer.render(scene, camera);
+	}
+	document.addEventListener('keydown', function(event) {
+		if (event.keyCode === 37) {
+			paddle.position.x -= 0.5;
+		}
+		if (event.keyCode === 39) {
+			paddle.position.x += 0.5;
+		}
+	});
+	animate();
+</script>
+</body>
 </html>