js小游戏——看你能坚持多久

浏览数：32 / 时间：2015年06月09日

点击另存用到的图片。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"  >
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title>看你能坚持多久</title>
		<style type="text/css">
			#top{
				color:white;
				height:20px;
			}
			#time{
				float:left;
			}
			#item{
				float:left;
				border:solid 1px gray;
				width:100px;
				padding:0;
				margin:0 20px;
			}
			#item div{
				background:yellow;
				width:0px;
			} 
			input{
				margin:0 10px;
				float:left;
			}
			#desc{float:left}
			body{background:black}
		</style>
		<script type="text/javascript">
			window.onload = init;
			function init(){
				time = 0;
				timeDiv = document.getElementById(‘time‘);
				input = document.getElementsByTagName(‘input‘)[0];
				body = document.getElementById(‘body‘);
				input.addEventListener(‘click‘,wenzi);
				div = document.getElementById(‘item‘).firstChild;
				width = screen.width;
			}
			
			function action(){
				var xx = document.createElement(‘img‘);
				xx.src = ‘./xingxing.gif‘;
				xx.style.width = random(10,100)+‘px‘;
				xx.style.position = ‘absolute‘;
				xx.style.left = random(0,width-100)+‘px‘;
			 
				xx.style.top = random(20,600)+‘px‘;
				xx.onclick = del;
				body.appendChild(xx);
				
				time++;
				setTime();
				setWidth();
				
				isGameOver();
			}
			function setTime(){
				var timeText = document.createTextNode(‘时间：‘+Math.floor(time*0.5));
				timeDiv.replaceChild(timeText,timeDiv.firstChild);
			}
			function setWidth(){
				div.style.width = num()*5+‘px‘;
				var numText = document.createTextNode(num());
				div.firstChild.replaceChild(numText,div.firstChild.firstChild); 
			}
			function isGameOver(){
				if(num()>=20){
					clearInterval(clock);
					for(var i=0;i<document.images.length;i++){
						(document.images)[i].onclick = ‘‘;
					}
					input.value="重新开始"
					alert(‘游戏结束,您坚持了‘+Math.floor(time*0.5)+‘秒‘);
				}
				
			}
			
			function random(x,y){
				return Math.floor( Math.random() * (y-x+1) ) + x
			}
			
			function num(){
				return document.images.length;
			}
			
			function del(){
				body.removeChild(this);
				setWidth();
			}
			
			function wenzi(){
				if(input.value==‘开始‘){
					input.value = ‘暂停‘;
					begin();
					for(var i=0;i<document.images.length;i++){
						document.images[i].onclick = del;
					}
				}else if(input.value==‘暂停‘){
					input.value = ‘开始‘;
					clearInterval(clock);
					for(var i=0;i<document.images.length;i++){
						(document.images)[i].onclick = ‘‘;
					}
				}else if(input.value==‘重新开始‘){
					input.value = ‘暂停‘;
					while(body.hasChildNodes()) //当div下还存在子节点时 循环继续
					{
						body.removeChild(body.firstChild);
					}
					time = 0;
					timeDiv.innerHTML=‘时间：0‘;
					begin();
				}
			}
			
			function begin(){
				clock = setInterval(‘action()‘,500);
			}
		</script>
	</head>
<body>
	<div id="top">
		<input type="button" value="开始"/>
		<div id="time">时间：0</div>
		<div id="item"><div><font color="red">0</font></div></div><div id="desc"><b>游戏说明：</b>点击消除星星，当星星数量达到20个时游戏结束。看你能坚持多久？</div>
	</div>
	<div id="body"></div>
	
</body>
</html>

js小游戏——看你能坚持多久,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

js小游戏——看你能坚持多久