运行环境:IE浏览器、360浏览器源代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Get the Star </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT="Lotusiki"> <META NAME="Keywords" CONTENT="game star"> <META NAME="CreateTime" CONTENT="2012.7.2"> <META NAME="Version" CONTENT="1.0"> <style> v\:* { behavior: url(#default#VML);} </style> <script language="javascript">
var stage=1; var time=10; var num=0; var score=0; var quota; var gameOver=false; var msg =["Stage 01:Click all the stars in 10 seconds.", "Stage 02:Click all the stars within 10 seconds in order.", "Stage 03:Catch all the stars.", "All stages passed. Congratulations!"]; var animationId = {}; function init(){ alert(msg[stage-1]); starID=0; gameOver=false; document.getElementById("stars").innerHTML=""; document.getElementById("starsID").innerHTML=""; document.getElementById("msg").innerHTML=msg[stage-1]; switch(stage){ case 1:stage1();break; case 2:stage2();break; case 3:stage3();break; case 4:ending(); } } function showClock(){ time--; document.getElementById("clock").innerHTML=time; if (time==0){ clearInterval(clockId); alert("Game Over!"); init(); } } function move(id){ var oStar=document.getElementById(id); var left=0; var top=0; try{ left=oStar.style.left.substr(0,oStar.style.left.length-2)-0; top =oStar.style.top.substr(0,oStar.style.top.length-2)-0; left+=5; top+=5; oStar.style.left=left+"px"; oStar.style.top=top+"px"; }catch(e){ } if((top>600)&&(!oStar.taked)){ oStar.fillcolor="black"; clearInterval(throwStarId); for(var i=0;i<starID;i++){ clearInterval(animationId[i]); } if(!gameOver){ if (stage!=3){ clearInterval(clockId); } } alert("Game Over! "+id+" missded."); gameOver=true; init(); } } function moveEnd(id){ var oStar=document.getElementById(id); var left=0; var top=0; try{ left=oStar.style.left.substr(0,oStar.style.left.length-2)-0; top =oStar.style.top.substr(0,oStar.style.top.length-2)-0; left+=3; top+=7; oStar.style.left=left+"px"; oStar.style.top=top+"px"; }catch(e){ } if (top>800){ clearInterval(animationId[id.substring(4)]); } } function hit(id){ var oStar=document.getElementById(id); oStar.fillcolor="#f0c010"; var take=(stage==2)?(!oStar.taked && (id.substring(4)==num)):(!oStar.taked); if(take){ num++; score++; document.getElementById("score").innerHTML=score; oStar.taked=true; oStar.style.visibility="hidden"; if (stage==2){ var idStar=document.getElementById("id"+id); idStar.style.visibility="hidden"; } } if (num==quota){ switch (stage){ case 1: case 2: clearInterval(clockId);break; case 3: for (var i=0;i<starID ;i++ ){ clearInterval(animationId[i]); } } var goNext=confirm("Stage Passed! Go to Next Stage."); if (goNext){ stage++; init(); }else{ init(); } } } function stage1(){ quota=15; time=10; num=0; for (var j=0;j<quota ;j++ ){ var alfa=Math.random()*360; var top=Math.random()*500+100; var left=Math.random()*800+100; var r=Math.random()*10+17; createStar("star"+j,r,2.61,alfa,top,left,"#f0f030"); } clockId=setInterval("showClock()",1000); } function stage2(){ quota=10; time=10; num=0; for (var j=0;j<quota ;j++ ){ var alfa=Math.random()*360; var top=Math.random()*500+100; var left=Math.random()*800+100; var r=Math.random()*10+17; createStar("star"+j,r,2.61,alfa,top,left,"#f0f030"); } clockId=setInterval("showClock()",1000); } var starID=0; function stage3(){ quota=10; time=20; num=0; throwStarId=setInterval("throwStar()",Math.random()*500+500); } function throwStar(){ var id="star"+starID; var alfa=Math.random()*360; var left=Math.random()*600+50; var r=Math.random()*10+17; createStar(id,r,2.61,alfa,top,left,"#f0f030"); animationId[starID]=setInterval("move('"+id+"')",20); starID++; if (starID>=quota){ clearInterval(throwStarId); } } function ending(){ throwStarId=setInterval("throwStarEnd()",Math.random()*500+10); } function throwStarEnd(){ var id="star"+starID; var alfa=Math.random()*360; var left=Math.random()*1000; var r=Math.random()*5+8; createStar(id,r,2.61,alfa,50,left,"#f0f030"); animationId[starID]=setInterval("moveEnd('"+id+"')",10); starID++; if (starID>score){ clearInterval(throwStarId); if (confirm("Do you want to play again?")){ for (var i=0;i<starID ;i++ ){ clearInterval(animationId[i]); } stage=1; init(); }else{ alert("Thanx for playing! See you next time! (By Lotusiki)"); window.close(); } } } function createStar(id,r,k,alfa,top,left,color){ var strHTML=""; strHTML+='<v:polyline id="'+id+'" onclick="hit(\''+id+'\')"'; var strPoints=""; var angle=alfa; for (i=0;i<=10 ;i++ ){ angle+=36; var l=(i%2==0)?r:r*k; var x=l*Math.cos(angle*Math.PI/180); var y=l*Math.sin(angle*Math.PI/180); strPoints+=x+","+y; if (i!=10){ strPoints+=","; } } strHTML+=' points="'+strPoints+'"'; strHTML+=' filled="true" fillcolor="'+color+'"'; strHTML+=' style="position:absolute;top:'+top+';left:'+left+'"></>'; document.getElementById("stars").innerHTML+=strHTML; if (stage==2){ strHTML ="<div id ='id"+id+"' style='position:absolute;top:"+(top-100)+";left:"+(left-15) +"' onclick='hit(\""+id+"\")'>"+id.substring(4)+"</div>"; document.getElementById("starsID").innerHTML+=strHTML; } }
</script> </HEAD> <BODY onload="init()" bgcolor="#003090"> <div style="font-size:24px;color:white"><span id="msg"></span><br/> Time left:<span id="clock"></span><br/> Score:<span id="score"></span></div> <div id="starsID" style="position:absolute;z-index:10;font-size:20px;font-weight:bold"></div> <div id="stars"></div> </BODY> </HTML>