/gist:727082

## gistfile1.js
<html>
<head>
<script type="text/javascript">;
function mainLoop(){
	ctx.clearRect(0,0,500,410);
	playerPaddle.shape()
	enemyPaddle.shape()
	ball1.drawBall()


}
function keyPressed (event){
        keyCode = event.which
    if (keyCode==38){
		if (playerPaddle.yCoord > 0){
			playerPaddle.yCoord = playerPaddle.yCoord - 10
		}
    }
	else if (keyCode==40){
		if (playerPaddle.yCoord < 360){
			playerPaddle.yCoord = playerPaddle.yCoord + 10
		}
	}
	ball1.ballMove()
	mainLoop()
}
function isTouching(thePaddle,theBall){
	if (thePaddle.top < theBall.bottom && thePaddle.bottom > theBall.top && thePaddle.right > theBall.left && thePaddle.left < theBall.right){
		return true
	}
	else{
		return false
	}
}
function Paddle(side){
	this.yCoord = 180
	if (side === "left"){
		this.xCoord = 10
		this.shape = function(){
			ctx.fillStyle = '#3ac6e5';
			ctx.fillRect(this.xCoord,this.yCoord,12,50);
			this.bounds()
		}
	}
	else if (side === "right") {
		this.xCoord = 478
		this.shape = function(){
			ctx.fillStyle = '#EE3B3B';
			ctx.fillRect(this.xCoord,this.yCoord,12,50);
			this.bounds()
		}
	}
	this.bounds = function(){
		this.top = this.yCoord
		this.left = this.xCoord
		this.bottom = this.yCoord + 50
		this.right = this.xCoord + 12
	}
}


function Ball(){
	this.xCoord=400
	this.yCoord=200
	this.xRate=5
	this.yRate=5
	this.drawBall = function(){
		ctx.fillStyle = '#000000'
		ctx.fillRect(this.xCoord, this.yCoord, 8, 8)
		this.top = this.yCoord
		this.left = this.xCoord
		this.bottom = this.yCoord - 8
		this.right = this.xCoord + 8
		if (isTouching(playerPaddle,this) === true) {
			this.ballDirection("left");
		}
		else if (isTouching(enemyPaddle,this) === true) {
			this.ballDirection("right");
		}
	}
	this.ballDirection = function(side){
		if (side === "left"){
			this.xMove = function(){
				this.xCoord = this.xCoord + this.xRate
			}
		}
		else if (side === "right"){
			this.xMove = function(){
				this.xCoord = this.xCoord - this.xRate
			}
		}
	}
	this.xMove = function(){
		this.xCoord = this.xCoord + this.xRate
	}
	this.yMove = function(){
	}
	this.ballMove = function(){
		this.xMove()
		this.yMove()
	}
}
</script>
</head>
<body onload="mainLoop()" onkeydown="keyPressed(event)">
<canvas id="c" width="500" height="410" ></canvas>
<script type="text/javascript">;
        var canvas = document.getElementById("c");
        var ctx = canvas.getContext("2d")
        var playerPaddle = new Paddle("left")
        var enemyPaddle = new Paddle("right")
		var ball1 = new Ball()
</script>
</body>
</html>
	<html>
	<head>
	<script type="text/javascript">;
	function mainLoop(){
	ctx.clearRect(0,0,500,410);
	playerPaddle.shape()
	enemyPaddle.shape()
	ball1.drawBall()


	}
	function keyPressed (event){
	keyCode = event.which
	if (keyCode==38){
	if (playerPaddle.yCoord > 0){
	playerPaddle.yCoord = playerPaddle.yCoord - 10
	}
	}
	else if (keyCode==40){
	if (playerPaddle.yCoord < 360){
	playerPaddle.yCoord = playerPaddle.yCoord + 10
	}
	}
	ball1.ballMove()
	mainLoop()
	}
	function isTouching(thePaddle,theBall){
	if (thePaddle.top < theBall.bottom && thePaddle.bottom > theBall.top && thePaddle.right > theBall.left && thePaddle.left < theBall.right){
	return true
	}
	else{
	return false
	}
	}
	function Paddle(side){
	this.yCoord = 180
	if (side === "left"){
	this.xCoord = 10
	this.shape = function(){
	ctx.fillStyle = '#3ac6e5';
	ctx.fillRect(this.xCoord,this.yCoord,12,50);
	this.bounds()
	}
	}
	else if (side === "right") {
	this.xCoord = 478
	this.shape = function(){
	ctx.fillStyle = '#EE3B3B';
	ctx.fillRect(this.xCoord,this.yCoord,12,50);
	this.bounds()
	}
	}
	this.bounds = function(){
	this.top = this.yCoord
	this.left = this.xCoord
	this.bottom = this.yCoord + 50
	this.right = this.xCoord + 12
	}
	}


	function Ball(){
	this.xCoord=400
	this.yCoord=200
	this.xRate=5
	this.yRate=5
	this.drawBall = function(){
	ctx.fillStyle = '#000000'
	ctx.fillRect(this.xCoord, this.yCoord, 8, 8)
	this.top = this.yCoord
	this.left = this.xCoord
	this.bottom = this.yCoord - 8
	this.right = this.xCoord + 8
	if (isTouching(playerPaddle,this) === true) {
	this.ballDirection("left");
	}
	else if (isTouching(enemyPaddle,this) === true) {
	this.ballDirection("right");
	}
	}
	this.ballDirection = function(side){
	if (side === "left"){
	this.xMove = function(){
	this.xCoord = this.xCoord + this.xRate
	}
	}
	else if (side === "right"){
	this.xMove = function(){
	this.xCoord = this.xCoord - this.xRate
	}
	}
	}
	this.xMove = function(){
	this.xCoord = this.xCoord + this.xRate
	}
	this.yMove = function(){
	}
	this.ballMove = function(){
	this.xMove()
	this.yMove()
	}
	}
	</script>
	</head>
	<body onload="mainLoop()" onkeydown="keyPressed(event)">
	<canvas id="c" width="500" height="410" ></canvas>
	<script type="text/javascript">;
	var canvas = document.getElementById("c");
	var ctx = canvas.getContext("2d")
	var playerPaddle = new Paddle("left")
	var enemyPaddle = new Paddle("right")
	var ball1 = new Ball()
	</script>
	</body>
	</html>