Return Styles: Pseud0ch, Terminal, Valhalla, NES, Geocities, Blue Moon.

Pages: 1-

long pong

Name: Anonymous 2009-01-18 3:47

I just coded pong (you know the game with the two paddles and the ball) in JavaScript.

Why you ask?

Because I coded it specifically so that when the user stretches the window, the playing field also stretches.

Why you ask?

Because at work there is a guy who I share a cubicle with who has THREE MONITORS. So I plan to use his workstation to stretch the browser window across all three monitors and play long pong.

How cool is that?

Name: Anonymous 2009-01-18 3:49

Not very cool.

Name: Anonymous 2009-01-18 3:51

>>2
Really? shit.

Name: Anonymous 2009-01-18 3:56

Source or it didn't happen.

Name: Anonymous 2009-01-18 3:59

pong in javascript? how long did that take to write? about 5 minutes?

Name: Anonymous 2009-01-18 4:14

>>1
Adam?

Name: Anonymous 2009-01-18 4:18

>>6
Eve?

Name: Anonymous 2009-01-18 4:20

groovy

Name: Anonymous 2009-01-18 4:38

<html>
<body>
<script type="text/javascript">

var field = null;
var ball = null;
var lpaddle = null;
var rpaddle = null;
var score = null;

var ball_x = null;
var ball_y = null;
var ball_dx = 1;
var ball_dy = 1;

var lpaddle_pos = null;
var rpaddle_pos = null;
var lpaddle_d = 0;
var rpaddle_d = 0;

var l_score = 0;
var r_score = 0;

var UP_KEY = 38; // up-arrow
var DN_KEY = 40; //down-arrow

var BALL_WIDTH = 2;
var LEFT_WINS = 1;
var RIGHT_WINS = 0;

var aspectRatio = null;

function pointWon( leftWon )
{
    if ( leftWon ) {
        l_score += 1;
        ball_x = 8;
        ball_dx = 1;
    }   
    else // right won
    {
        r_score += 1;
        ball_x = 92;
        ball_dx = -1;
    }

    ball_y = 2;
    ball_dy = 1;

    score.innerHTML = 'Score: ' + l_score + '/' + r_score ;
}

function calcRatio() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  aspectRatio = myWidth / myHeight;
}

function keyHandler(e) {

    var keynum;
    var keychar;
    var numcheck;

    if(window.event) { // IE
        keynum = e.keyCode;
    }
    else if(e.which) { // Netscape/Firefox/Opera
        keynum = e.which;
    }

    if ( ball_dx > 0 ) // ball travelling to the right
    {
        rpaddle_d += ( (keynum == UP_KEY) ? -1 : 1 );
    }
    else // ball travelling to the left
    {
        lpaddle_d += ( (keynum == UP_KEY) ? -1 : 1 );
     }
}


function gameLoop() {
    calcRatio();
    ball.style.height = ( BALL_WIDTH * aspectRatio ) + '%'; //reset in loop in case of user resize

    ball_x += ball_dx;   
    ball_y += ball_dy;

    lpaddle_pos += lpaddle_d;
    rpaddle_pos += rpaddle_d;

    if ( lpaddle_pos > 80 )
    {
        lpaddle_pos = 80; lpaddle_d = 0;
    }
    else if ( lpaddle_pos < 0 )
    {
        lpaddle_pos = 0; lpaddle_d = 0;
    }

    if ( rpaddle_pos > 80 )
    {
        rpaddle_pos = 80; rpaddle_d = 0;
    }
    else if ( rpaddle_pos < 0 )
    {
        rpaddle_pos = 0; rpaddle_d = 0;
    }

   
    if ( (ball_x <= 4) && (ball_dx < 0) )
    {
        if ( ( ( ball_y + (BALL_WIDTH * aspectRatio) ) >= lpaddle_pos ) &&
             (ball_y  <= (lpaddle_pos + 20) ) )
        {
            ball_dx *= -1;
            ball_dx += lpaddle_d * -0.2;
        }
        else if ( ball_x <= 0 )
        {
            pointWon( RIGHT_WINS );
        }
    }

    if ( ball_x >= ( 96 - BALL_WIDTH  ) && ( ball_dx > 0 ) )
    {
        if ( ( ( ball_y + (BALL_WIDTH * aspectRatio) ) >= rpaddle_pos ) &&
             (ball_y  <= (rpaddle_pos + 20) ) )
        {
            ball_dx *= -1;
            ball_dx += rpaddle_d * -0.2;
            ball
        }
        else if ( ball_x >= (100 - (BALL_WIDTH * aspectRatio) ) )
        {
            pointWon( LEFT_WINS );
        }
    }

    if ( ( ball_y >= ( 100 - (aspectRatio * BALL_WIDTH) ) ) || ( ball_y <= 1 ) )
    {
        ball_dy *= -1;
        ball_y += ball_dy; //this makes the ball pause on bounce
    }
       
    ball.style.left = ball_x + '%';
    ball.style.top  = ball_y + '%';

    lpaddle.style.top = lpaddle_pos + '%';
    rpaddle.style.top = rpaddle_pos + '%';

    setTimeout(gameLoop, 50); // call gameLoop in xx msec
}

function init() {
    ball = document.getElementById('ball');
    lpaddle = document.getElementById('left-paddle');
    rpaddle = document.getElementById('right-paddle');

    ball_x = parseInt( ball.style.left );
    ball_y = parseInt( ball.style.top  );

    lpaddle_pos = parseInt( lpaddle.style.top );
    rpaddle_pos = parseInt( rpaddle.style.top );

    field = document.getElementById('field');
   
    score = document.getElementById('score');

    calcRatio();
    ball.style.width = BALL_WIDTH + '%';

    gameLoop(); //start animation
}   

window.onkeydown = keyHandler;
window.onload = init;


</script>

<div id="field"; style="position: relative; width:100%; color: white; background: #000; height: 100%">

    <div id="score">Welcome to long pong</div>

    <div id="left-paddle" style="position: absolute; width: 2%; background: white; height: 20%; left: 2%; top: 40%;"></div>

    <div id="right-paddle" style="position: absolute; width: 2%; background: white; height: 20%; right: 2%; top: 40%;"></div>

    <div id="ball" style="background: white; position: absolute; width: 30px; height: 30px; left: 50%; top: 50%;"></div>

</div>

</body>
</html>

Name: =+=*=F=R=O=Z=E=N==V=O=I=D=*=+= !FrOzEn2BUo 2009-01-18 4:38

With or without canvas ?

_________________________
orbis terrarum delenda est

Name: Anonymous 2009-01-18 4:39

I know the code could be cleaner but it works well enough.

Name: Anonymous 2009-01-18 4:47

pretty cool, bro

Name: Anonymous 2009-01-18 4:51

>>9
Terrible!

Name: Anonymous 2009-01-18 4:58

>>13
you are terrible

Name: Anonymous 2009-01-18 6:17

>>9
This is basically the reason everyone should start their programming careers by reading SICP.

Name: Anonymous 2009-01-18 6:57

Why is there no lispscript. This would have taken 5 lines. I would have used a fbetrigjgjrijgirrg-lisp-terminology and fapped all over myself. As the semen cooled upon my stomach, i would know that that is as good as my life could ever be.

Name: Anonymous 2009-01-18 7:26

>>15
explain yourself if you are in fact not a troll

Name: Anonymous 2009-01-18 7:29

>>17
Read >>9 for explanation.

Name: Anonymous 2009-01-18 7:54

this is dreadful.  Why must each player use the same keys?? how is that ergonomic?  Or do you not have any friends so you didn't envisage that scenario?

What about the score?  WHy is there not a bounded header area for score and whatever. The left bat just clobbers the score. This is completely retarded. Absolotely terrible. Also there's some kind of fucked up inertia on the bats and they don't move straight away.

Name: Anonymous 2009-01-18 8:08

>>29
>Why must each player use the same keys??
Yeah I basically meant it only for one player. Making it 2 players wouldn't be difficult.
>What about the score?
The score's just an afterthought. The whole thing's just a joke so the score doesn't matter. Moving the score wouldn't be difficult at all, just add style="left: 50%;" to the score div.
>Also there's some kind of fucked up inertia on the bats and they don't move straight away.
That's a defect in JavaScript. The key inputs have to come via a keyboard event, so I can't just poll the keyboard every loop. You have to tap the keyboard to move the paddles. Each tap of up or down will accelerate the paddle in that direction.

Name: Anonymous 2009-01-18 8:13

>>20
Well I'm sorry, but this is not enterprise quality. What about if it was rewritten as a java applet. Would the keys be better/

Name: =+=*=F=R=O=Z=E=N==V=O=I=D=*=+= !FrOzEn2BUo 2009-01-18 8:19

"The key inputs have to come via a keyboard event, so I can't just poll the keyboard every loop."
The event loop should be instead event driven routine which manipulates normal flow.

_________________________
orbis terrarum delenda est

Name: =+=*=F=R=O=Z=E=N==V=O=I=D=*=+= !FrOzEn2BUo 2009-01-18 8:34

for example when Event A occurs after loop finished it gets delayed to next loop cycle(the paddle updated coord.).
Event driven routine would reposition the paddle as key is pushed.The whole thing would be better looking with <canvas>.

_________________________
orbis terrarum delenda est

Name: Anonymous 2009-01-18 11:22

>>9
Buggy pong.

Name: Anonymous 2009-03-06 11:29


Lpaddle.

Name: Anonymous 2011-02-03 5:12

Don't change these.
Name: Email:
Entire Thread Thread List
All trademarks and copyrights on this site are owned by their respective parties. All comments and posts are the responsibility of their own posters.
- Tinychan + 2ch Mode -