Simple game where you keep the ball from going by your paddle.... detail
How to setup
Step 1: Copy & Paste CSS code below in your HEAD section
CSS
Step 2: Copy & Paste HTML code below in your BODY sectionCode:<style type="text/css"> body{ background-color:white; font-size:10pt; font-family:sans-serif; color:#00436e; } </style> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com -->
HTML
Step 3: must download files belowCode:<script language="javascript"> var xincr=17; // PIXELS STEPS ACROSS var yincr=13; // PIXEL STEPS VERTICAL var yoffset=65; // OFFSET FROM THE TOP OF THE PAGE. WILL BE AUTO CENTERED HORIZONTALLY. 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 startpause(){ if(started){ started=false; clearInterval(id1); if(!ns4)document.f.sp.value=" Game Paused... "; }else{ started=true; if(!ns4)document.f.sp.value=" Press to Pause "; id1=setInterval('animate()',100); }} function animate(){ if(ns4){ x=ball.left; y=ball.top; paddley=paddle.top; }else{ y=parseInt(ball.style.top); x=parseInt(ball.style.left); paddley=parseInt(paddle.style.top); } if(( ( (y<paddley-7)&&(x>=370) ) || ( (y>paddley+37)&&(x>=370) ) )) youmissed(); else{ if(ydir){ if(y+yincr > 190){y=190; ydir=false; }else{y+=yincr} }else{ if(y-yincr < 0){y=0; ydir=true; }else{y-=yincr} } if(xdir){ if(x+xincr > 370){x=370; xdir=false}else{x+=xincr} }else{ if(x-xincr < 20){x=20; xdir=true;}else{x-=xincr} } 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> <!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com -->
Files
ball.gif
paddle.gif































