Pong in the shortest code

  • The challenge is simple. Give the shortest code possible to reproduce the classic 2-player game of pong http://en.wikipedia.org/wiki/Pong . The level of graphics and functionality should be as close as possible to this javascript demonstration http://codeincomplete.com/posts/2011/5/14/javascript_pong/demo.html (but without the extra options you can click on on the left or the frame, fps etc. information in the bottom right).



    As always the code must be written in a free language (in both senses) and should be runnable on linux. Any libraries used must also be free, easily available and not be written for the purposes of this competition (and also not already contain a working version of Pong!).


    Honestly, this question is a little too difficult for code golf. The ball physics for Pong is pretty complicated.

    @beary605, I don't think the ball physics are too complicated. My solution is 'as close as possible' to the javascript demonstration, and the physics are quite simple.

    Just for reference there are some other code-golf, Noughts and Crosses (aka Tic-Tac-Toe) (both could use additional entries, who likes to "win" by default?), Write a small HTTP server, Self-Interpreting Interpreter, Self-compiling compiler, Compile Regexes ...

    @felipa, Can you formalize 'as close as possible'? I don't know why my sed solution isn't in the lead.

    @boothby My mistake. I didn't have time to actually run the python code and made a wrong assumption.

    @felipa When you have the time, I would recommend you try it. In its current form, it is as fully featured as the 953 byte HTML/JS solution, with the exception that there is no pause function. Graphically, I think it is also quite agreeable. Nevertheless, I would like to request that it not be selected as the accepted answer, as its validity seems to be contentious.

    AFAIK, "a free language (in both senses)" is certainly not "always" a requirement. We get plenty of answers in C#, Mathematica, etc.

    Why so ugly colors?

  • grc

    grc Correct answer

    8 years ago

    Javascript, 883 (+ 70 HTML)


    c=document.getElementById('c').getContext('2d')
    c.fillStyle="#FFF"
    c.font="60px monospace"
    w=s=1
    p=q=a=b=0
    m=n=190
    x=300;y=235
    u=-5;v=3
    setInterval(function(){if(w&&!s)return;s=0
    c.clearRect(0,0,640,480)
    for(i=5;i<480;i+=20)c.fillRect(318,i,4,10)
    m+=p;n+=q
    m=m<0?0:m;m=m>380?380:m
    n=n<0?0:n;n=n>380?380:n
    x+=u;y+=v
    if(y<=0){y=0;v=-v}
    if(y>=470){y=470;v=-v}
    if(x<=40&&x>=20&&y<m+110&&y>m-10){u=-u+0.2;v+=(y-m-45)/20}
    if(x<=610&&x>=590&&y<n+110&&y>n-10){u=-u-0.2;v+=(y-n-45)/20}
    if(x<-10){b++;x=360;y=235;u=5;w=1}
    if(x>640){a++;x=280;y=235;u=-5;w=1}
    c.fillText(a+" "+b,266,60)
    c.fillRect(20,m,20,100)
    c.fillRect(600,n,20,100)
    c.fillRect(x,y,10,10)},30)
    document.onkeydown=function(e){k=(e||window.event).keyCode;w=w?0:k=='27'?1:0;p=k=='65'?5:k=='81'?-5:p;q=k=='40'?5:k=='38'?-5:q;}
    document.onkeyup=function(e){k=(e||window.event).keyCode;p=k=='65'||k=='81'?0:p;q=k=='38'||k=='40'?0:q}


    /* Variable index:
    a -> left player score
    b -> right player score
    c -> context
    e -> event
    i -> counter for dashed line
    k -> keycode
    m -> left paddle y
    n -> right paddle y
    p -> left paddle y velocity
    q -> right paddle y velocity
    s -> is start of game
    u -> ball x velocity
    v -> ball y velocity
    w -> game is waiting (paused)
    x -> ball x
    y -> ball y
    */

    The script can be placed at the end of <body> or called onLoad. It needs the following canvas element:


    <canvas id="c"width="640"height="480"style="background:#000"></canvas>

    Player 1 uses the q and a keys, and player 2 uses the p and l keys. Press the esc key to pause and any key to start/continue.


    You can play it in your browser here.


    I wasn't sure of the physics to use, so I started off with a simple reflection method and then added some variety and experimented with it a bit. The ball's velocity in the y direction is affected by where on the paddle you hit the ball, so you have some control over where the ball goes. The ball's velocity in the x direction slowly increases with each hit in the rally.


    I suspect that it will be beaten quite easily by solutions using libraries, but I had fun making it in plain javascript.


    That's a really nice implementation.

    Could be golfed a bit more, I know I'm about two years late here. but you could assign `20` to a variable named `g` and save one measly byte.

    Damn, it's hard to play on an azerty keyboard...

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM