Pong

Installation Instructions:

1: Copy and paste the following script in the BODY section of your page:
Select all...

var w3c=(document.getElementById)?true:false;
var ns4=(document.layers)?true:false;
var ie4=(document.all && !w3c)?true:false;
var ie5=(document.all && w3c)?true:false;
var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false;

var paddley, x, y, w_x, w_y, id1, py=0, missed=1, xdir=false, ydir=true, started=false;
var outer, paddle, field, pc, ball;

function getid(id){
if(ns4) return findlayer(id,document);
else if(ie4)return document.all[id];
else return document.getElementById(id);
}

// FUNCTION TO FIND NESTED LAYERS IN NS4 BY MIKE HALL
function findlayer(name,doc){
var i,layer;
for(i=0;i<doc.layers.length;i++){
layer=doc.layers[i];
if(layer.name==name)return layer;
if(layer.document.layers.length>0)if((layer=findlayer(name,layer.document))!=null)return layer;
}
return null;
}

function moveidto(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x+'px';
id.style.top=y+'px';
}}

function showid(id){
if(ns4)id.visibility="show";
else id.style.visibility="visible";
}

function youmissed(){
x+=xincr;
(ydir)? y+=yincr: y-=yincr;
moveball();
clearInterval(id1);
alert('You missed!\n\nTotal misses so far: '+(missed++)+'\n\nPress Ok to continue..');
id1=setInterval('animate()',100);
x=200;
y=100;
xdir=false;
ydir=true;
moveball();
}

function moveball(){
if((y-20<=160)&&(y-20>=0))moveidto(pc,0,y-20);
moveidto(ball,x,y);
}

function movepaddle(evnt){
py=((ie4||ie5)?event.clientY:evnt.pageY)-40-yoffset;
if((py>=0)&&(py<=160))moveidto(paddle,380,py);
return false;
}

window.onresize=function(){
  if(ns4)setTimeout('history.go(0)',400);
  else resize();
}

function resize(){
var ww=(ie4||ie5)?document.body.clientWidth:window.innerWidth;
moveidto(outer,(ww-400)/2, yoffset);
}

window.onload=function(){
paddle=getid('paddle');
field=getid('field');
pc=getid('pc');
ball=getid('ball');
outer=getid('outer');
resize();
moveidto(paddle,380,0);
moveidto(pc,0,0);
moveidto(ball,200,100)
x=200;
y=100;
showid(ball);
showid(pc);
showid(field);
showid(paddle);
if(ns4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=movepaddle;
alert('INSTRUCTIONS\n\n- Use the paddle and try to keep the ball from hitting the wall.\n- Use the mouse to move the paddle. You do not need to click the paddle to move it.\n- Press the "Start" button to start/pause the game.\n- The game will keep track of your misses.');
}

var txt=(ns4)?'<layer name="outer" visibility="visible" width="400" height="300">':'<div id="outer" style="position:absolute; width:400px; height:300px">';
txt+=(ns4)?'<layer name="ball" visibility="hidden" z-index="4"><img src="ball.gif"></layer>':'<div id="ball" style="position:absolute; visibility:hidden; z-index:10"><img src="ball.gif"></div>';
txt+=(ns4)?'<layer name="paddle" visibility="hidden" z-index="2"><img src="paddle.gif"></layer>':'<div id="paddle" style="position:absolute; visibility:hidden; z-index:5"><img src="paddle.gif"></div>';
txt+=(ns4)?'<layer name="pc" visibility="hidden" z-index="3"><img src="paddle.gif"></layer>':'<div id="pc" style="position:absolute; visibility:hidden; z-index:5"><img src="paddle.gif"></div>';
txt+=(ns4)?'<layer name="field" left="0" top="0" left="0" visibility="hidden" bgcolor="black" z-index="1" width="400" height="200"></layer>':'<div id="field" style="position:absolute; top:0px; left:0px; visibility:hidden; width:400px; height:200px; z-index:2; background-color:black;"></div>';
txt+=(ns4)?'<layer name="text" top="220" left="0">':'<div id="text" style="position:absolute; top:220px; width:400px;">';
txt+='<table border="0" width="400"><tr><td align="center"><form name="f"><input type="button" name="sp" value="  Start / Pause  " onClick="startpause()"></form></td></tr></table>';
txt+=(ns4)?'</layer>':'</div>';
txt+=(ns4)?'</layer>':'</div>';
document.write(txt);
</script>

2: Adjust the few settings at the top of the script.

3: If you have other content in your page after the game, youll have to add a bunch of linebreaks ( <br> ) or something to add enough whitespace.