Sure. Oops I didn't see that board.
OK . . . just so you all know I have no clue what I'm doing . . .
http://www.angelfire.com/journal2/kay_writer/AirPong.html
Or here's the way I have it coded if you just want to see that . . .
<html>
<body>
<style type="text/css">body {background:
url(http://img.photobucket.com/albums/v624/KayWriter/AirSupplyBG1.gif)}
</style>
<center><a href="http://www.angelfire.com/journal2/kay_writer/AirSupplyCorner.html"><img src="http://img.photobucket.com/albums/v624/KayWriter/AirSupplycorner640X213.jpg?t=1175889064" border=0></center>
<font color="Maroon">
<HTML>
<HEAD>
<SCRIPT>
//Script Created by Michael Sigle
//Use on your own site with images as long as you keep this script intact
//Featured on Dynamicdrive.com
//For full source code, visit Dynamicdrive.com
window.onerror=new Function("return true")
var dx;
var dy;
var scor = 0;
var dod;
var pscor = 0;
var escor = 0;
var point;
var los;
var reversal = 0;
function startUp()
{
score.scorebox.value = " "
score.box.value= " "
score.reverse.value = " "
}
function initialize()
{
dx = 1;
dy = 1;
los = Math.round(21 * Math.random()) + 1;
point = 0;
hefr = Math.round(600 * Math.random()) + 35;
vred = Math.round(500 * Math.random()) + 100;
ball.style.posTop = hefr;
ball.style.posLeft = vred;
moveBall()
}
function moveBall()
{
var xp = ball.style.posLeft;
var yp = ball.style.posTop;
var sig = paddle.style.posTop;
var gis = paddle.style.posLeft;
var hit = document.elementFromPoint(xp,yp);
var pore = 615
var place = pore - 1;
if (point < 7)
{
if ((yp >= 415) && (yp <= 615))
paddle.style.posTop = yp - 6;
else
paddle.style.posTop = place
}
if (point >= 7)
{
if ((yp >= 415) && (yp <= 615))
paddle.style.posTop = yp + 13;
else
paddle.style.posTop = place
}
if ((yp < 427) || (yp > 658))
dy = dy * -1
if (point >= 15)
paddle.style.posTop = sig
if (xp >= 758){
escor = escor + .5
score.scorebox.value = " " +escor+ " "
gameLose()
return
}
if (xp <= 427)
{
pscor = pscor + .5
score.box.value = " " +pscor+ " "
gameWin()
return
}
if (hit != null)
{
if (hit.id == "paddle"){
dx = dx * -1;
point = point + 1
}
else if (hit.id == "enemy") {
dx = dx * -1;
}
}
ball.style.posTop += dy
ball.style.posLeft += dx
window.setTimeout("moveBall()", 1, "JavaScript");
}
function movePaddle()
{
var ypos = window.event.y;
if ((ypos >= 415) && (ypos <= 630))
enemy.style.posTop = ypos;
}
function gameLose()
{
if (escor >= 15){
goal.style.visibility = "hidden"
lose.style.visibility = "visible"
alert("Sorry, please try again. You lost by the score of " +escor+ " to " +pscor+ ".")
history.go(-1)
}
else
return
}
function gameWin()
{
if (pscor >= 15){
goal.style.visibility = "hidden"
win.style.visibility = "visible"
alert("Congrats, you won!!!. You won by the score of " +pscor+ " to " +escor+ ".")
history.go(-1)
}
else
return
}
function reverseIt()
{
if (reversal <= 9)
{
if (window.event.keyCode == 118){
dy = dy * -1
reversal = reversal + 1
score.reverse.value = reversal
}
if (window.event.keyCode == 104){
dx = dx * -1
reversal = reversal + 1
score.reverse.value = reversal
}
}
}
</SCRIPT>
</HEAD>
<BODY onLoad="startUp()" onmousemove="movePaddle()" onKeypress="reverseIt()">
<IMG id="ball" SRC="http://www.angelfire.com/journal2/kay_writer/j0433140.jpg" STYLE="position: absolute; Top:515; Left:110; Width:16; Height:15;z-index=3;">
<IMG id="border" SRC="http://img.photobucket.com/albums/v624/KayWriter/Air%20Supply/AirPongTable.jpg" STYLE="position: absolute; Top:425; Left:25; Width:350; Height:250;z-index=2;">
<IMG id="paddle" SRC="http://www.angelfire.com/journal2/kay_writer/blackbar.bmp" STYLE="position: absolute; Top:430; Left:40; Width:15; Height:60; z-index:3">
<IMG id="enemy" SRC="http://www.angelfire.com/journal2/kay_writer/blackbar.bmp" STYLE="position: absolute; Top:430; Left:340; Width:15; Height:60;z-index:3">
<IMG id="bord" SRC="border1.gif" STYLE="position: absolute; Top:425; Left:20; Width:5; Height:250;z-index:3">
<IMG id="borde" SRC="border1.gif" STYLE="position: absolute; Top:425; Left:375; Width:5; Height:250;z-index:3">
<IMG id="bordit" SRC="border3.gif" STYLE="position: absolute; Top:420; Left:25; Width:350; Height:5;z-index:3">
<IMG id="bordit" SRC="border3.gif" STYLE="position: absolute; Top:675; Left:25; Width:350; Height:5;z-index:3">
<INPUT TYPE="button" VALUE="Serve" onClick="initialize()" onmousedown="initialize()" STYLE="position: absolute; Top:415; Left:400;z-index:3">
<FORM NAME="score">
<INPUT TYPE="text" NAME="box" SIZE="10" STYLE="position: absolute; Top:469; Left:400;z-index:3">
<INPUT TYPE="text" NAME="scorebox" SIZE="10" STYLE="position: absolute; Top:520; Left:400;z-index:3">
<INPUT TYPE="text" NAME="reverse" SIZE="10" STYLE="position: absolute; Top:590; Left:400;z-index:3">
<DIV STYLE="position: absolute; Left:400; Top:450;z-index:5">Your Score:</DIV>
<DIV STYLE="position: absolute; Left:400; Top:500;z-index:5">Opponent Score:</DIV>
<DIV STYLE="position: absolute; Left:400; Top:570;z-index:5">Reversals Used:</DIV>
<DIV id="win" STYLE="position: absolute; font-size: 50px; Left:15; Top:690; visibility:hidden;z-index:3">You Win!!!!</DIV>
<DIV id="lose" STYLE="position: absolute; font-size: 50px; Left:15; Top:690; visibility:hidden;z-index:3">You Lose!!!!</DIV>
<DIV id="goal" STYLE="position: absolute; font-size: 16px; Left:15; Top:690; visibility:visible;z-index:3">Move the mouse up and down to move your paddle(the one on the right). Click on "serve" to begin every time a poiint is scored (make sure you press down and let up the mouse button on the serve button). You have ten reversals, also. Press the H key at any time to reverse the horizontal movement, or press V to change the vertical movement. Game is to 15. Good Luck!!<p align="center"><DIV>
</FORM>
</BODY>
</HTML>
</body>
</html>