JavaScript Ping Pong Game

JavaScript game with source. Links to table tennis rules.

Overview

You've either come to this page to (1) read table tennis rules or (2) play my simple ping pong JavaScript game. (1) and (2) have nothing to do with each other, but to help those in category (1), there are table tennis links listed below. Further down the page is the JavaScript game section.

Ping Pong (Table Tennis) Rules

International Table Tennis Federation - Laws The rules according to the ITTF Handbook. http://www.ittf.com/ittf_handbook/ittf_hb.html	USA Table Tennis - Rules The rules according to USATT. http://www.usatt.org/rules/index.shtml
About.com - Rules of the Game of Table Tennis Rules similar to USATT and ITTF. Also highlights specific aspects of the game. http://tabletennis.about.com/cs/rules/index.htm

As a bonus, here's the answer to a question I had. (Answer is derived from USATT Stump the Ump.)
Q. What happens when Player A serves, and the ball hits the net, but lands on opposing Player B's side?
A. This is a "let". No point is scored for either player, and Player A serves again. This process can repeat an unlimited number of times.

JavaScript Ping Pong Game

Play Ping Pong (Opens in new window)

Only works in Internet Explorer 4 and above. When the game is open, press "Start". Use your mouse to move the paddle. A ball (asterisk) bounces off walls in a predictable pattern. Prevent the ball from "falling through." If the ball does fall through it will stop. Press "Start" to try again. You can also pause the game during play.

HTML/JavaScript for the Ping Pong game

Public Domain

The HTML and JavaScript listed below are released to the public domain. Read the Terms of Use for details. The contents of this page are still copyrighted.

Display in new window (better for viewing)
Select All (better for copying)

var incrX;
var incrY;
var limit;

var titleH = 30;
var titleT = 0; 
var ballWH = 20;
var paddleW = 80;
var paddleH = 20;
var boardW = 440;
var boardH = 380;
var boardT = titleH;
var boardL = 20;
var buttonH = 30;

var mouseX = 0;
var mouseY = 0;

// Set up event capturing.
document.onmousemove = getMousePosition;

function moveIt()
{
	if (!gameOver)
	{
		return;
	}

limit = 0;
	incrX = ballWH;
	incrY = ballWH;

ball.style.pixelLeft = boardL;
   	ball.style.pixelTop = boardT+(ballWH*4);

gameOver=false;
	keepMoving();
}

function pauseIt()
{
	if (!gameOver)
	{
		gamePaused = !gamePaused;
		if (!gamePaused)
		{
			keepMoving();
		}
	}
}

function keepMoving()
{
	limit++;

if(gameOver || gamePaused)
	{
		return;
	}

if(ball.style.pixelTop+ballWH>=boardT+boardH)
	{
		incrY = -ballWH;
	}
	else if (ball.style.pixelTop<=boardT)
	{
		incrY = ballWH;
	}

if(ball.style.pixelLeft+ballWH>=boardW+boardL)
	{
		incrX = -ballWH;
	}
	else if (ball.style.pixelLeft<=boardL)
	{
		incrX = ballWH;
	}

ball.style.pixelTop = ball.style.pixelTop + incrY;
	ball.style.pixelLeft = ball.style.pixelLeft + incrX;

if (ball.style.pixelTop+ballWH > boardT+boardH-paddleH)
	{
		checkIfHitBall();
	}

pause=setTimeout("keepMoving()",50);
}

function getMousePosition(e)
{
  	mouseX = event.clientX + document.body.scrollLeft;
  	mouseY = event.clientY + document.body.scrollTop;

movePaddle();

return true;
}

// only do this if paddle has been created, otherwise error will occur on load
	if (gameLoaded)
	{
		oldPaddlePos = paddle.style.pixelLeft;
		paddle.style.pixelLeft = paddleLeft;
	}

}

//-->
</script>

</head>

<table border=0 cellspacing=2>
<tr>
	<td align=center colspan=2
	><br><img src="images/pixel.gif" name="bg" id="bg"
	width=440 height=440 alt="This will not work in Netscape"
	style="visibility:visible; position:relative;"></td>
</tr>
</table>

<div id="title" style="position:absolute; color: black; font-size: 16pt;" align="center">Ping Pong: Version 1</div>

with (title.style) {
   backgroundColor = '#ffff00';
   visibility = "visible";
   pixelLeft = boardL;
   pixelTop = titleT;
   width = boardW;
   height = titleH;
  }

with (board.style) {
   backgroundColor = '#000000';
   visibility = "visible";
   pixelLeft = boardL;
   pixelTop = boardT;
   width = boardW;
   height = boardH;
  }

with (ball.style) {
   backgroundColor = '#000000';
   visibility = "visible";
   pixelLeft = boardL;
   pixelTop = boardT+(ballWH*4);
   width = ballWH;
   height = ballWH;
  }

with (paddle.style) {
   backgroundColor = '#ffffff';
   visibility = "visible";
   pixelLeft = boardL;
   pixelTop = boardT+boardH-paddleH;
   width = paddleW;
   height = paddleH;
  }

with (btnStart.style) {
   backgroundColor = '#00ff00';
   visibility = "visible";
   pixelLeft = boardL;
   pixelTop = boardT+boardH;
   width = boardW/2;
   height = buttonH;
  }

with (btnPause.style) {
   backgroundColor = '#00ff00';
   visibility = "visible";
   pixelLeft = boardL+(boardW/2);
   pixelTop = boardT+boardH;
   width = boardW/2;
   height = buttonH;
  }
	
  // indicate that the game is finished loading.
  gameLoaded=true;
//-->
</script>

</body>
</html>

Updates

May 2, 2002 - Minor update to the ping pong JavaScript game. One of the image references was pointing to the wrong directory level. Sorry, but the game still does not work in Netscape.