Square Dropper

Physics Simulator Beta Version

HTML

<!doctype>
<html>
<head>
<title>Physics Simulator</title>
</head>
<body>
<canvas id = "myCanvas" width = "800" height = "400" style = "border: 1px solid black">
</canvas>
<p id = "lol"></p>
</body>

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 movementx = [];
var movementy = [];

// runs the create object function when its clicked (making the green squares)
canvas.addEventListener("click", createObjectOnClick);
// sets a timer for the entire canvas
canvas.interval = setInterval(updateGame, 20);

function addObject(xpos, ypos, width, height, color, i, datemade) {
	// counts how many bounces it had and how high each bounce will go
	var bounceCount = 0;
	var bounceHeight = ypos;

	// sets the object properties to what you wrote in the parameters
	this.x = xpos;
	this.y = ypos;
	this.width = width;
	this.height = height;
	// updates the object
	this.update = function(){
		// used to check how many seconds have passed
		var datecheck = new Date().getTime();
		var datehitground = 0;
		var yposval = ypos + movementy[i];
		var velocity = (Math.pow((2 + (datecheck/7 - datemade/7)/20), 2));
		
		// ooh, gravity!
		if (yposval <= 390 && movementy[i] > -0.01) {//fixfixfix movementy based of spawn point not actual velocity so always true
			movementy[i] = movementy[i] + velocity;
		} else {
			if (yposval >= 390) {
				datemade = datecheck;
				yposval = 390;
				yposval = yposval - velocity;
			}
		}
		
		// fills in the color and updates things like position each time
		ctx.fillStyle = color;
		ctx.fillRect(xpos, yposval, width, height);
		
	}
}

// clears it so the objects can be redrawn
function clearCanvas() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
}

// rerouting addObject so it dosen't need parameters when its in the listener
function createObjectOnClick() {
	// adds a timer for that object and makes it go where the mouse is at the moment
	var xposmouse = event.clientX;
	var yposmouse = event.clientY;

	// saves the date made to find out how long it's been alive
	var dateMade = new Date().getTime();
	
	// adds it...