mantisbayne/gist:7918624

## gistfile1.txt
$(function() {
	//Setting width, height and context for the canvas
	var width = 1000,
		height = 600,
		//Shorthand for JQuery object
		$canvas = $('canvas'),
		//JQuery returns an array, so we need the first object
		canvas = $canvas[0],
	context = canvas.getContext('2d');
	canvas.width = width;
	canvas.height = height;
	$canvas.width(width);
	$canvas.height(height);

	//The paddle will move along the y-axis
	var y = 0;

	function animate() {
		//Styling the background first
		context.fillStyle = '#E0FFFF';
		context.clearRect(0, 0, width, height);
		//Styling the paddle
		context.fillStyle = '#FF1493';
		//y-100 because we want the mouse to be in the center of the paddle
		context.fillRect(0, y-100, 50, 200);
		//How many times it calls the function
		setTimeout(animate, 30)
	}
	setTimeout(animate, 30);

	//When the mouse moves, function that paddle moves along y-axis
	$canvas.mousemove(function(event) {
		y = event.clientY;
	});

	function Ball() {
		this.x = x;
		this.y = y;
		this.speedX = 0;
		this.speedY = 0;
		this.radius = 8;
	}

	Ball.prototype.draw = function(draw) {
		context.fillStyle = 'black';
		context.beginPath();
		context.arc(x, y, this.radius, 0, 2*Math.PI);
		context.stroke();
	}

	Ball.prototype.move = function(speed) {
		this.x += this.speedX;
		this.y += this.speedY;
	}

	ball = new Ball();

})

## gistfile2.html
<!DOCTYPE html>
<html>
	<head>
		<title>PONG</title>
		<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body>
		<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
		<script type="text/javascript" src="scripts/trent.js"></script>
		<canvas></canvas>
	</body>
</html>
	$(function() {
	//Setting width, height and context for the canvas
	var width = 1000,
	height = 600,
	//Shorthand for JQuery object
	$canvas = $('canvas'),
	//JQuery returns an array, so we need the first object
	canvas = $canvas[0],
	context = canvas.getContext('2d');
	canvas.width = width;
	canvas.height = height;
	$canvas.width(width);
	$canvas.height(height);

	//The paddle will move along the y-axis
	var y = 0;

	function animate() {
	//Styling the background first
	context.fillStyle = '#E0FFFF';
	context.clearRect(0, 0, width, height);
	//Styling the paddle
	context.fillStyle = '#FF1493';
	//y-100 because we want the mouse to be in the center of the paddle
	context.fillRect(0, y-100, 50, 200);
	//How many times it calls the function
	setTimeout(animate, 30)
	}
	setTimeout(animate, 30);

	//When the mouse moves, function that paddle moves along y-axis
	$canvas.mousemove(function(event) {
	y = event.clientY;
	});

	function Ball() {
	this.x = x;
	this.y = y;
	this.speedX = 0;
	this.speedY = 0;
	this.radius = 8;
	}

	Ball.prototype.draw = function(draw) {
	context.fillStyle = 'black';
	context.beginPath();
	context.arc(x, y, this.radius, 0, 2*Math.PI);
	context.stroke();
	}

	Ball.prototype.move = function(speed) {
	this.x += this.speedX;
	this.y += this.speedY;
	}

	ball = new Ball();

	})
	<!DOCTYPE html>
	<html>
	<head>
	<title>PONG</title>
	<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body>
	<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
	<script type="text/javascript" src="scripts/trent.js"></script>
	<canvas></canvas>
	</body>
	</html>