页面赛车

页面赛车

下面为效果显示

脚本说明:
把如下代码加入<body>区域中
<STYLE>.bckgnd {
	HEIGHT: 250px; LEFT: 0px; POSITION: absolute; TOP: -3000px; VISIBILITY: visible; WIDTH: 500px; Z-INDEX: 1
}
.driver {
	HEIGHT: 59px; LEFT: 0px; POSITION: absolute; TOP: -3000px; VISIBILITY: visible; WIDTH: 90px; Z-INDEX: 10
}
.obj {
	HEIGHT: 59px; LEFT: 0px; POSITION: absolute; TOP: -3000px; VISIBILITY: visible; WIDTH: 90px; Z-INDEX: 2
}
.crash {
	HEIGHT: 59px; LEFT: 0px; POSITION: absolute; TOP: -3000px; VISIBILITY: visible; WIDTH: 90px; Z-INDEX: 100
}
</STYLE>
<SCRIPT language=javascript>

var yoffset=20;

var isNS=(document.layers);
var _all=(isNS)? '' : 'all.' ;
var _style=(isNS)? '' : '.style' ;
var _visible=(isNS)? 'show' : 'visible';
var _hidden=(isNS)? 'hide' : 'hidden' ;
var xcntr, cx, carx, ishit, speed=100, hitcount=1, tmp, oktoanimate=true, oktotestcrash=true, okmouse=true;

var ycoords=new Array(0,47,58,68,83,99,122,144,172,200);
var xcoords=new Array();
xcoords[1]=new Array(0,-57,-25,5,37);
xcoords[2]=new Array(0,-67,-31,5,42);
xcoords[3]=new Array(0,-78,-36,6,48);
xcoords[4]=new Array(0,-91,-43,6,57);
xcoords[5]=new Array(0,-105,-50,6,64);
xcoords[6]=new Array(0,-126,-60,6,74);
xcoords[7]=new Array(0,-148,-70,6,84);
xcoords[8]=new Array(0,-171,-80,7,97);
xcoords[9]=new Array(0,-194,-91,7,112);
var oldcarpos=new Array();
var objarray=new Array();
objarray[1]=new Array(0,0,0,0,0);
objarray[2]=new Array(0,0,0,0,0);
objarray[3]=new Array(0,0,0,0,0);
objarray[4]=new Array(0,0,0,0,0);
objarray[5]=new Array(0,0,0,0,0);
objarray[6]=new Array(0,0,0,0,0);
objarray[7]=new Array(0,0,0,0,0);
objarray[8]=new Array(0,0,0,0,0);
objarray[9]=new Array(0,0,0,0,0);

function init(){
resize();
alert('请左右移动鼠标使赛车避开\n\nJavaScript2000');
status="你撞了0辆赛车";
animate(true);
testcrash();
}

function animate(getrandomcar){
if(oktoanimate){
for(j=9;j>=1;j--){
oldcarpos[j]=new Array(0,0,0,0,0);
for(i=0;i<=4;i++){
oldcarpos[j][i]=objarray[j][i];
}
objarray[j]=objarray[j-1];
}
objarray[1]=new Array(0,0,0,0,0);
if(getrandomcar)objarray[1][(Math.floor(Math.random()*4)+1)]=Math.floor(Math.random()*4)+1;
for(sz=1;sz<=9;sz++){
for(carn=1;carn<=4;carn++){
if(oldcarpos[sz][carn]!=0)setpos(0, -3000, eval('drive'+oldcarpos[sz][carn]+sz));
if(objarray[sz][carn]!=0)setpos(xcoords[sz][carn],ycoords[sz],eval('drive'+objarray[sz][carn]+sz));
}}
if(speed>=150)speed-=.3;
setTimeout('animate('+!getrandomcar+')', speed);
}}

function testcrash(){
if(oktotestcrash){
ishit=false;
carx=(isNS)? car.left-xcntr : car.pixelLeft-xcntr;
for(i=1;i<=4;i++){
if(((carx+80>=xcoords[9][i])&&(carx-80<=xcoords[9][i]))&&((objarray[9][i]!=0)||(objarray[8][i]!=0))){
ishit=true;
tmp=i;
oktotestcrash=false;
}}
if(ishit){
okmouse=false;
oktoanimate=false;
if(isNS){
crash.moveTo(car.left,car.top-40);
}else{
crash.pixelLeft=car.pixelLeft;
crash.pixelTop=car.pixelTop-40;
}
setTimeout('resume('+tmp+')',1500);
}
setTimeout('testcrash()',100);
}}

function resume(i){
status='你已经撞了 '+(hitcount++)+' 辆赛车了.';
(isNS)?crash.top=-3000 : crash.pixelTop=-3000;
if(objarray[9][i]!=0){
setpos(0,-3000, eval('drive'+objarray[9][i]+'9'));
objarray[9][i]=0;
}
if(objarray[8][i]!=0){
setpos(0,-3000, eval('drive'+objarray[8][i]+'8'));
objarray[8][i]=0;
}
okmouse=true;
oktoanimate=true;
oktotestcrash=true;
animate();
testcrash();
}

function setpos(dx, dy, obj){
if(isNS){
obj.moveTo(dx+xcntr,dy+yoffset);
}else{
obj.pixelLeft=dx+xcntr;
obj.pixelTop=dy+yoffset;
}}

function mousepos(evt){
cx=(isNS)? evt.pageX : event.clientX;
if((cx<=xcntr+164)&&(cx>=xcntr-156)&&okmouse)setpos(cx-47-xcntr, 200, car);
return false;
}

function resize(){
if(isNS){
if((window.innerHeight<450) || (window.innerWidth<600))window.resizeTo(600,450);
}else{
if((document.body.clientHeight<400) || (document.body.clientWidth<600))window.resizeTo(620,420);
}
xcntr=(isNS)? window.innerWidth/2 : document.body.clientWidth/2;
setpos(0, 200, car);
setpos(-250, 0, road);
}

function getkeypress(keypress){
keyp=(isNS)? keypress.which : window.event.keyCode;
if(keyp==32)alert('游戏暂停....\n\n请按 "OK" 继续.');
return false;
}

function reloadNS(){
setTimeout('window.location.reload()', 500);
}

(isNS)? window.onresize=reloadNS : window.onresize=resize;

window.onload=init;

if(isNS)document.captureEvents(Event.MOUSEMOVE | Event.KEYPRESS);
document.onmousemove=mousepos;
document.onkeypress=getkeypress;

</SCRIPT>

<DIV class=bckgnd id=road><IMG border=3 height=250 src="road.gif" 
width=500> </DIV>
<DIV class=crash id=crash><IMG height=59 src="crash.gif" width=90> 
</DIV>
<DIV class=driver id=car><IMG border=0 height=59 src="car.gif" 
width=90> </DIV>
<DIV class=obj id=drive11><IMG height=18 src="drive1.gif" width=28> 
</DIV>
<DIV class=obj id=drive21><IMG height=18 src="drive2.gif" width=28> 
</DIV>
<DIV class=obj id=drive31><IMG height=18 src="drive3.gif" width=28> 
</DIV>
<DIV class=obj id=drive41><IMG height=18 src="drive4.gif" width=28> 
</DIV>
<DIV class=obj id=drive12><IMG height=21 src="drive1.gif" width=33> 
</DIV>
<DIV class=obj id=drive22><IMG height=21 src="drive2.gif" width=33> 
</DIV>
<DIV class=obj id=drive32><IMG height=21 src="drive3.gif" width=33> 
</DIV>
<DIV class=obj id=drive42><IMG height=21 src="drive4.gif" width=33> 
</DIV>
<DIV class=obj id=drive13><IMG height=25 src="drive1.gif" width=38> 
</DIV>
<DIV class=obj id=drive23><IMG height=25 src="drive2.gif" width=38> 
</DIV>
<DIV class=obj id=drive33><IMG height=25 src="drive3.gif" width=38> 
</DIV>
<DIV class=obj id=drive43><IMG height=25 src="drive4.gif" width=38> 
</DIV>
<DIV class=obj id=drive14><IMG height=29 src="drive1.gif" width=44> 
</DIV>
<DIV class=obj id=drive24><IMG height=29 src="drive2.gif" width=44> 
</DIV>
<DIV class=obj id=drive34><IMG height=29 src="drive3.gif" width=44> 
</DIV>
<DIV class=obj id=drive44><IMG height=29 src="drive4.gif" width=44> 
</DIV>
<DIV class=obj id=drive15><IMG height=33 src="drive1.gif" width=50> 
</DIV>
<DIV class=obj id=drive25><IMG height=33 src="drive2.gif" width=50> 
</DIV>
<DIV class=obj id=drive35><IMG height=33 src="drive3.gif" width=50> 
</DIV>
<DIV class=obj id=drive45><IMG height=33 src="drive4.gif" width=50> 
</DIV>
<DIV class=obj id=drive16><IMG height=40 src="drive1.gif" width=61> 
</DIV>
<DIV class=obj id=drive26><IMG height=40 src="drive2.gif" width=61> 
</DIV>
<DIV class=obj id=drive36><IMG height=40 src="drive3.gif" width=61> 
</DIV>
<DIV class=obj id=drive46><IMG height=40 src="drive4.gif" width=61> 
</DIV>
<DIV class=obj id=drive17><IMG height=47 src="drive1.gif" width=72> 
</DIV>
<DIV class=obj id=drive27><IMG height=47 src="drive2.gif" width=72> 
</DIV>
<DIV class=obj id=drive37><IMG height=47 src="drive3.gif" width=72> 
</DIV>
<DIV class=obj id=drive47><IMG height=47 src="drive4.gif" width=72> 
</DIV>
<DIV class=obj id=drive18><IMG height=53 src="drive1.gif" width=81> 
</DIV>
<DIV class=obj id=drive28><IMG height=53 src="drive2.gif" width=81> 
</DIV>
<DIV class=obj id=drive38><IMG height=53 src="drive3.gif" width=81> 
</DIV>
<DIV class=obj id=drive48><IMG height=53 src="drive4.gif" width=81> 
</DIV>
<DIV class=obj id=drive19><IMG height=59 src="drive1.gif" width=90> 
</DIV>
<DIV class=obj id=drive29><IMG height=59 src="drive2.gif" width=90> 
</DIV>
<DIV class=obj id=drive39><IMG height=59 src="drive3.gif" width=90> 
</DIV>
<DIV class=obj id=drive49><IMG height=59 src="drive4.gif" width=90> 
</DIV>
<SCRIPT language=javascript>
for(i=1;i<=9;i++){
for(j=1;j<=4;j++){
eval('var drive'+j+i+'=document.'+_all+'drive'+j+i+_style);
}}
var car=eval('document.'+_all+'car'+_style);
var road=eval('document.'+_all+'road'+_style);
var crash=eval('document.'+_all+'crash'+_style);
</SCRIPT>