Ball Bouncer Demo

by mikegyoung

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Ball Bouncer Demo</title>
		<meta name="description" content="Ball Bouncer Demo">
    
    <!-- A-Frame library -->
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
		
		<script>		

			// global variables
			var gameState = 0;   // game state, 0: initialize game, 1: game in-progress, 2: game over (not used yet)

			// game loop time variables
			var cT;   // current time
			var dT;   // delta time
			var pT;   // previous time

			const gameLoopSpeed = 15;   // used for regulating the speed of the game

			var ballX = 0;      // ball X position
			var ballY = -7.5;   // ball Y position
			var ballZ = 0;           // ball Z position
			var ballXVelocity = 0;   // ball X velocity
			var ballYVelocity = 0;   // ball Y velocity
			var ballZVelocity = 0;   // ball Z velocity
			var gravity = 0.003;     // gravity
			var ballRadius = 0.3;   // ball radius
			
			// initialize game variables
			function initGame() {
				ballX = 0;   // starting X position of the ball
				ballY = 3;   // starting Y position of the ball
				ballZ = 0;               // starting Z position of the ball
				ballXVelocity = 0;   // starting ball X velocity
				ballYVelocity = 0;     // starting ball Y velocity
				ballZVelocity = 0;   // starting ball Z velocity
				
				// add a bunch of triangles to simulate a case where frames would need to be dropped for the logic to keep up
				let cntr1 = 0;
				while (cntr1 != 5000) {
					let ax = Math.random() * 16.0 - 8.0;
					let bx = Math.random() * 16.0 - 8.0;
					let cx = Math.random() * 16.0 - 8.0;
					let ay = Math.random() * 8.0;
					let by = Math.random() * 8.0;
					let cy = Math.random() * 8.0;
					let az = Math.random() * 16.0 - 8.0;
					let bz = Math.random() * 16.0 - 8.0;
					let cz = Math.random() * 16.0 - 8.0;
					el = document.createElement('a-triangle');
					el.setAttribute('color', "#888888");
					el.setAttribute('opacity',...