Skip to content

Instantly share code, notes, and snippets.

Created December 3, 2010 15:19

Revisions

  1. @invalid-email-address Anonymous created this gist Dec 3, 2010.
    115 changes: 115 additions & 0 deletions gistfile1.js
    Original 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>