Skip to content

Instantly share code, notes, and snippets.

Created December 3, 2010 15:19
Show Gist options
  • Save anonymous/727082 to your computer and use it in GitHub Desktop.
Save anonymous/727082 to your computer and use it in GitHub Desktop.
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment