【JavaScript】小游戏：☆摘星星☆Ver1.0

本文链接：https://blog.csdn.net/duzixi/article/details/7795503

运行环境：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+'" οnclick="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)
				+"' οnclick='hit(\""+id+"\")'>"+id.substring(4)+"</div>";
		document.getElementById("starsID").innerHTML+=strHTML;
	}
	
}

</script>
</HEAD>

<BODY οnlοad="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>