The Physics Simulator

For Physics EOY project.

HTML

<!doctype>
<html>
<head>
<title>Physics Simulator</title>
</head>
<style>

</style>
<body>
<canvas id = "myCanvas" width = "980" height = "617" style = "border: 1px solid black">
</canvas>
<br></br><br>
<div id = "settings">
<div id = "title">Settings</div>
<h4>Formulas used:</h4>
<p>
<br><img style = "position: relative; left: -90px; top: 60px; width: 500px; height: 150px; margin: -100px;" src = "http://img.sparknotes.com/content/testprep/bookimgs/sat2/physics/0017/x=x0.gif"></img>
</p><br><br><br><br><br>
<p id = "smallChecks">Bouncing: 
<input type = "checkbox" id = "bouncingCheck" checked = "true"></input><br></br>
No Sliding: 
<input type = "checkbox" id = "frictionCheck"></input><br></br>
Hints?: 
<input type = "checkbox" id = "alertCheck" checked = "true"></input><br></br>
Wall Bounce: 
<input type = "checkbox" id = "wallCheck"></input>
</p><p></p>
<p id = "hints">Hints found: 0/5</p>
<p>Projectile Tracing (can cause lag): 
<input type = "checkbox" id = "tracingCheck" checked = "true"></input>
</p>
<p>Projectile Type: 
<select id = "selectProjectile">
	<option value = 0.9>Rubber ball</option>
	<option value = 0.7>Tennis ball</option>
	<option value = 0.5>Steel ball</option>
	<option value = 0.3>Copper ball</option>
</select>
</p>
<p>Initial Velocity: 
<input id = "initialV" value = 2></input>
</p>
<p>Angle: 
<input id = "angle" value = 0></input>
</p>
<p>Height: 
<input id = "height" value = 10></input>
</p>
<p>Gravity: 
<input id = "gravity" value = 9.8></input>
</p>
<p>µ Value: 
<input id = "friction" value = 0.4></input>
</p>
<button id = "go" style = "width: 80px; height: 40px; font-size: 20px" onclick = "createObjectOnClick()">Go!</button>
<button style = "width: 80px; height: 40px; font-size: 20px" onclick = "clearObjects()">Clear</button>
</div>
<script src = "PhysicsSimulator.js"></script>
</body>

CSS

#settings {
	position: relative;
	left: 1000px;
	top: -670px;
	margin: 10px;
	padding: 5px;
	background-color: lightblue;
	font-family: "Arial";
	font-style: oblique;
	border-width: 1px;
	border-style: solid;
	border-color: black;
	width: 300px;
}

#title {
	text-align: center;
	font-size: 30px;
	font-weight: bold;
	padding: 1.5px;
	padding-top: 6px;
}

p {
	padding: 1.5px;
	color: black;
}

h2 {
	padding: 1.5px;
	color: black;
	font-weight: bold;
}

h4 {
	padding: 1.5px;
	color: black;
}

#hints {
	font-weight: bold;
}

#smallChecks {
	position: relative;
	margin-left: 160px;
	margin-top: -150px;
}

button {
	position: relative;
	left: 70px;
}

JavaScript

// creates a link to the canvas and sets it up so you can draw on it
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var allObjectsCreated = [];
var settings = [[true, false, true, false, 2, 0, 10, 9.8, 0.4, ""]];
var allowUpdate = false;
var dist = 0;
var distanceCalc = [];
var numPress = -1;
var hints = 0;

// to make sure no hints repeat
var hintArray = [false, false, false, false, false];
	
// runs the create object function when its clicked (making the green squares)
// sets a timer for the entire canvas
canvas.interval = setInterval(updateGame, 20);

// adds the cliff to the simulation
clearObjects();

// runs the program once
createObjectOnClick();

// function to add objects to simulation
function addObject(xpos, ypos, radius, color, bordercolor, i, datemade, grav, xvel, yvel, material, circ, width, height, fric, src) {
	var yposval = ypos;
	var yvelocity = yvel;
	var xposval = xpos;
	var xvelocity = xvel;
	var gravity = grav;
	var bounceTime = 0;
	var bounceFreq = new Date().getTime();
	var allPos = [[xposval, yposval]];
	var an = 0;
	
	// sets the object properties to what you wrote in the parameters
	this.width = width;
	this.height = height;
	this.radius = radius;
	this.friction = friction;
	
	var imgObj = new Image();
	imgObj.src = src;
	
	// updates the object every 20 milliseconds
	this.update = function() {
		allPos.push([xposval, yposval]);

		// runs every time it touches the ground
		if (yposval > 600) {
			// if bouncing is on, reverse the yvelocity and make it smaller
			// otherwise, set it to zero
			if (yvelocity >= 0.5) {
				if (document.getElementById("bouncingCheck").checked) {
					// reverses the direction of the velocity and makes it smaller
					yvelocity = -(yvelocity * material);
					// finds out how often the ball bounces
					bounceFreq = new Date().getTime() - bounceTime;
					bounceTime = new Date().getTime();
				} else {
					yposval = 600;
					yvelocity = 0;
					bounceFreq =...