<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>