JavaScriptBank
2009-09-28 18:55:05
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 section
HTML
Step 3: must download files below
Files
ball.gif
paddle.gif
How to setup
Step 1: Copy & Paste CSS code below in your HEAD section
CSS
<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
-->
Step 2: Copy & Paste HTML code below in your BODY section
HTML
<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
-->
Step 3: must download files below
Files
ball.gif
paddle.gif
