After all, who doesn't love pong :)

<!-- begin snippet: js hide: false -->

<!-- language: lang-html -->


    <!DOCTYPE html>
    <html>
    <body>

    <!-- Lets make a simple snake game -->
    <div id="gameArea">
      <canvas id="canvas"></canvas>
      <div id="statsPanel"></div>
    </div>
    <!-- Jquery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <style>
        html, body {
        background: whiteSmoke;
    }

    canvas {
        position: absolute;
    	background: whiteSmoke;
        
    }
    </style>
    <script>
var ar=new Array(33,34,35,36,37,38,39,40);

$(document).keydown(function(e) {
     var key = e.which;
      //console.log(key);
      //if(key==35 || key == 36 || key == 37 || key == 39)
      if($.inArray(key,ar) > -1) {
          e.preventDefault();
          return false;
      }
      return true;
});
    var canvas = document.getElementById("canvas"),
        ctx = canvas.getContext("2d");

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight-50;

    rectw = 10;
    recth = 75;

    var player1 = {
        x: 50,
        y: canvas.height/2-recth/2,
        velY: 0,
        velX: 0,
        color: getRandomColor(),
    },
    player2 = {
        x: canvas.width-(50+rectw),
        y: canvas.height/2-recth/2,
        velY: 0,
        velX: 0,
        color: getRandomColor(),
    };
    multiply = [-1, 1];
    var choice = multiply[Math.floor(Math.random() * multiply.length)];
    temp = getRandomInt(2, 5);
    choice = multiply[Math.floor(Math.random() * multiply.length)];
    temp2 = choice*Math.sqrt(18-Math.pow(temp, 2));
    temp*=-1;
    circle = {
        x: canvas.width/2-rectw/2,
        y: canvas.height/2-recth/2,
        velY: temp,
        velX: temp2,
        color: getRandomColor(),
    }
    var x = 150,
        y = 150,
        velY = 0,
        velX = 0,
        speed = 3,
        friction = 0.98,
        keys = [];
        auto = false;
        score1 = score2 = 0;

    var atime = ptime = getTime();
    function getTime(){
        return(new Date().getTime() / 1000);
    }
    col1 = getRandomColor();
    col2 = getRandomColor();
    col3 = getRandomColor();
    tempX = 0
    tempY = 0
    paused = false;

    function update() {
        if (keys[38]) {
            if (player2.velY > -speed) {
                player2.velY--;
            }
        }

        if (keys[40]) {
            if (player2.velY < speed) {
                player2.velY++;
            }
        }
        if (keys[65]) {
            if(getTime()-atime > 0.75){
                if (auto == false){
                    auto = true;
                }else{
                    auto = false;
                }
                atime = getTime();
            }
        }
        if (keys[32]) {
            if(getTime()-ptime > 0.75){
              if(paused == false){
                tempX = circle.velX;
                tempY = circle.velY;
                circle.velX = circle.velY = 0;
                paused = true;
              }else{
                circle.velX = tempX;
                circle.velY = tempY;
                paused = false;
              }
              ptime = getTime();
            }
        }
        if (keys[13]){
          multiply = [-1, 1];
          var choice = multiply[Math.floor(Math.random() * multiply.length)];
          temp = getRandomInt(2, 5);
          choice = multiply[Math.floor(Math.random() * multiply.length)];
          temp2 = choice*Math.sqrt(32-Math.pow(temp, 2));
          temp*=-1;
          circle.x = canvas.width/2-rectw/2;
          circle.y = canvas.height/2-recth/2;
          circle.velX = circle.velY = 0;
          
          setTimeout(function(){
            score1=score2=0;
            circle = {
              x: canvas.width/2-rectw/2,
              y: canvas.height/2-recth/2,
              velY: temp,
              velX: temp2,
              color: getRandomColor(),
            }
          }
          , 3000);
        }
        if (keys[67]){
          col1 = getRandomColor();
          col2 = getRandomColor();
          col3 = getRandomColor();
          player1.color = getRandomColor();
          player2.color = getRandomColor();
          circle.color = getRandomColor();
        }
        if (auto == false){
            if (keys[87]) {
                if (player1.velY > -speed) {
                    player1.velY--;
                }
            }
        
            if (keys[83]) {
                if (player1.velY < speed) {
                    player1.velY++;
                }
            }
        }else{
            player1.y = circle.y-recth/2;
            player1.velY = 0;
        }
        
        
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.font = "30px Verdana";
        // Create gradient
        var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
        gradient.addColorStop("0", col1);
        gradient.addColorStop("0.5", col2);
        gradient.addColorStop("1.0", col3);
        // Fill with gradient
        ctx.fillStyle = gradient;
        ctx.fillText(score1, 100, 90);
        ctx.fillText(score2, canvas.width-160, 90);
        updatePlayer(player1);
        updatePlayer(player2);
        updateCircle(circle, player1, player2);
        setTimeout(update, 10);
        document.title = score1+", "+score2;
    }

    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    var audio = new Audio('http://www.mediacollege.com/downloads/sound-effects/alien/alien-noise-01.ogg');

    function updateCircle(player, play1, play2) {
        player.y += player.velY;
        player.x += player.velX;

        if (player.x >= canvas.width-(50+rectw)) {
    	if (play2.y <= player.y && player.y <= play2.y+recth){
    	       	player.x = canvas.width-(50+rectw);
    		    player.velX*=-1;
                play2.color = getRandomColor();
                player.color = getRandomColor();
                col1 = getRandomColor();
                col2 = getRandomColor();
                col3 = getRandomColor();
                audio.play();
                            
    	}else{
        		player.x = canvas.width/2-rectw/2;
        		player.y = canvas.height/2-recth/2;
                multiply = [-1, 1];
                var choice = multiply[Math.floor(Math.random() * multiply.length)];
                temp = getRandomInt(2, 5);
                choice = multiply[Math.floor(Math.random() * multiply.length)];
                temp2 = choice*Math.sqrt(32-Math.pow(temp, 2));
                temp*=-1;
                player.velY = temp;
                player.velX = temp2;
                score1++;
    	}
        } else if (player.x <= 60) {
    	if (play1.y <= player.y && player.y <= play1.y+recth){
    		    player.x = 60;
            	player.velX*=-1
                play1.color = getRandomColor();
                player.color = getRandomColor();
                col1 = getRandomColor();
                col2 = getRandomColor();
                col3 = getRandomColor();
                audio.play();
            }else{
                player.x = canvas.width/2-rectw/2;
                player.y = canvas.height/2-recth/2;
                multiply = [-1, 1];
                var choice = multiply[Math.floor(Math.random() * multiply.length)];
                temp = getRandomInt(2, 5);
                choice = multiply[Math.floor(Math.random() * multiply.length)];
                temp2 = choice*Math.sqrt(32-Math.pow(temp, 2));
                temp*=-1;
                player.velY = temp;
                player.velX = temp2;
                score2++;
            }
        }

        if (player.y > canvas.height-5) {
            player.y = canvas.height-5;
    	player.velY*=-1
        } else if (player.y <= 5) {
            player.y = 5;
    	player.velY*=-1
        }

        ctx.fillStyle = player.color;
        ctx.beginPath();
        ctx.arc(player.x, player.y, 5, 0, Math.PI * 2);
        ctx.fill();

    }
    function getRandomColor() {
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';
        for (var i = 0; i < 6; i++ ) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }

    function updatePlayer(player) {

        player.velY *= friction;
        player.y += player.velY;

        if (player.y > canvas.height-recth) {
            player.y = canvas.height-recth;
        } else if (player.y <= 0) {
            player.y = 0;
        }

        ctx.fillStyle = player.color;
        ctx.beginPath();
        ctx.fillRect(player.x, player.y, 10, recth);
    //    ctx.arc(player.x, player.y, 5, 0, Math.PI * 2);
        ctx.fill();
    }

    update();

    document.body.addEventListener("keydown", function (e) {
        keys[e.keyCode] = true;
    });
    document.body.addEventListener("keyup", function (e) {
        keys[e.keyCode] = false;
    });
    </script> 

    </body>
    </html>


<!-- end snippet -->