<!doctype html>
<head>
<title>Space Battle</title>
<script src="../src/input.js"></script>
<script src="../src/vector.js"></script>
<script src="../src/priorityqueue.js"></script>
<script src="../src/collision.js"></script>
<script src="../src/physics.js"></script>
<script src="../src/RenderObject.js"></script>
<script src="../src/game.js"></script>
<script>
	function createBall(physicsSystem) {

	    const ball = {
	            renderObject: createRenderObject("randomColouredBall", 5),
	            physicsObject: new PhysicsModel(physicsSystem, 5, 0.1, {x: Math.random() * 100, y: Math.random() * 100})
	        };

	    ball.physicsObject.addExternalForce(vector2dFromAngle(Math.random() * 360, 2), 1);
	    physicsSystem.add(ball.physicsObject);
	 
	    return ball;
	}

	class BallGame extends Game {
		constructor() {
			super();

			this.balls = [];

			for (let i = 0; i < 5; i++) {
				this.balls.push(createBall(this.physicsSystem));
			}
		}
	
	    update(time) {
	        this.physicsSystem.update(this.physicsFrameTime);
	    }

	    render(interoplate) {
	        for (let ball of this.balls) {
	            ball.renderObject.rotate(ball.physicsObject.rotateAngle);
	            ball.renderObject.moveTo(ball.physicsObject.position.x, ball.physicsObject.position.y);
	        }
	    }
	}

	window.onload = function() {
	    const game = new BallGame();
	    game.run();
	}
</script>
<style>
svg {height: 95vh;}
</style>
</head>
<body>
<svg id='render' viewBox="0 0 200 100">
<rect width="100" height="100" fill="black"/>
<g transform='translate(0,100)scale(1,-1) ' id="gameobjects">
</g>
</svg>
</body>
</html>

Add prototype ball bouncy thing
Add prototype ball bouncy thing
