jQuery pong

I like jQuery. A lot. The only thing I like more than jQuery is the community of crazy plugin developers. It reminds me of the python community: anything I need to do, there is a module, and the modules are pretty easy to use. So I thought I would add to the mix.

I wanted to release something that would take the ‘web 2.0′ world by storm. Something that any jQuery jockey could include in his/her app and boost productivity at least by 20%. So I thought, “dude, new-school thought believes downtime, R&R, and even games increase productivity.” Then I pondered. And I pondered. And while I was pondering, I totally made jquery pong (ok, so I retrofitted gameplay from one I found).

Here is one with all the defaults:

The code:

$(document).ready(function(){
    $('#pong1').pong('circle.gif');
});

And here is one in which you will lose:

The code:

$(document).ready(function(){
    $('#pong2').pong('circle.gif',{
        ballSpeed: 10,
        compSpeed: 10,
        playerSpeed: 2,
        paddleHeight: 20
    });
});

Here are all the options:

{
    targetSpeed: 30,  //ms
    ballAngle: 45,    //degrees
    ballSpeed: 8,     //pixels per update
    compSpeed: 5,     //speed of your opponent!!
    playerSpeed: 5,   //pixels per update
    difficulty: 5,
    width: 400,       //px
    height: 300,      //px
    paddleWidth: 10,  //px
    paddleHeight: 40, //px
    paddleBuffer: 1,  //px from the edge of the play area
    ballWidth: 14,    //px
    ballHeight: 14,   //px
    playTo: 10        //points
}

Download it and you’ll need the ball too. Have fun!

Discuss

1
valugi  June 11, 2009 at 1:05 am

doesnt work in chrome.

2
Mark Caron  October 13, 2009 at 6:57 am

@valugi this seems to do the trick:

$this.append(”);

replace line 261 in jquery.pong.js with that line. we add the resize:none to get rid of webkit’s resize handle on textareas, and add in the opt.width/height to stretch the textarea canvas. works in all browsers that I’m aware of.

3
Mark Caron  October 13, 2009 at 7:00 am

@valugi my original comments got stripped, sorry. but, here goes again:

- on line 261, add in resize:none;
- change width:0; to width:’opts.width‘px;
- change height:0; to height:’opts.height‘px;
- i also added in padding:0; for good measure.

4
Mark Caron  October 13, 2009 at 7:02 am

@valugi, this comment thing in WP is annoying. in the width/height I also had 2 plus signs around both opts.width and opts.height

5
big tits at work free  May 13, 2010 at 7:54 pm

Nice, Real big tits at work, [url= http://boards.sonypictures.com/boards/member.php?u=79986 ]Real big tits at work[/url], unfxxo,

comment

Your email is never shared because I like you.

*
*