Full version: jsB@nk » Game » Skill » Pong
URL: https://www.javascriptbank.com/pong-index.html
Simple game where you keep the ball from going by your paddle.
Full version: jsB@nk » Game » Skill » Pong
URL: https://www.javascriptbank.com/pong-index.html
<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--><script language="javascript">var xincr=17; // PIXELS STEPS ACROSSvar yincr=13; // PIXEL STEPS VERTICALvar 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 HALLfunction 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-->http://javascriptbank.com/javascript/game/Pong/ball.gifhttp://javascriptbank.com/javascript/game/Pong/paddle.gif