Created
December 3, 2010 15:19
Revisions
-
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,115 @@ <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>