javascript实现打地鼠小游戏

 游戏说明:

          点击"开始游戏"按钮，在图中随机产生老鼠，老鼠消失前单击老鼠进行击打，打中一次即可获得100的积分，没有打中老鼠，扣取100积分

css模块

	<style>
				#div0{
					text-align: center;
					width: 1360px;
					height: 600px;
					margin: 60px auto;
					background-image: url("images/bg.jpg");
					position: relative;
				}
				#div_top{
					text-align: left;
					color:brown;
					width: 360px;
					height: 100px;
					position: absolute;
					left: 500px;
				}
				#div_left{
					width: 350px;
					height: 320px;
					position: absolute;
					left: 300px;
					top: 150px;
				}
				#tab_data{
					width:350px;
					height:320px;
				}
				#div_right{
					width: 350px;
					height: 320px;
					position: absolute;
					right: 380px;
					top: 150px;
				}
				#tab{
					width:320px;
					height:320px;
				}
				#tab td{
					background-image:url("images/00.jpg");
					background-repeat:no-repeat;
					background-position:center;
				}
			</style>

html模块

	<div id="div0">
			<div id="div_top">
				 游戏说明:<br/>
				点击"开始游戏"按钮，在下图中随机产生老鼠，老鼠消失前单击老鼠进行击打，<br/>
				打中一次即可获得100的积分，没有打中老鼠，扣取100积分。快快行动吧，考验<br/>您的
				反应和眼力！<br/>
			</div>
			<div id="div_left">
				<table id="tab_data">
					<tr>
						<th>游戏时间：</th>
						<td><input type="text" name="text_time" value="1" />分钟</td>
					</tr>
					<tr>
						<th>倒计时：</th>
						<td><input type="text" name="text_CD" value="60" disabled="disabled"/>秒</td>
					</tr>
					<tr>
						<th>出现间隔：</th>
						<td><input type="text" name="text_hide" value="1" />秒</td>
					</tr>
					<tr>
						<th>停留时间：</th>
						<td><input type="text" name="text_show" value="1" />秒</td>
					</tr>
					<tr>
						<th>得分情况：</th>
						<td><span id="span_score"></span></td>
					</tr>
					<tr>
						<th colspan="2">
							<input type="button" value="开始游戏" id="but_start"/>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="button" value="结束游戏" id="but_end"/>
						</th>
					</tr>
				</table>
			</div>
			<div id="div_right">
				
			</div>
		</div>

js模块

<script>
			var collTd=[];//记录所有的td
			var oTdMouse;//记录被选中的td
			//定义变量记录页面中的标签元素
			var oButStart,oButEnd;
			var oTextTime,oTextHide,oTimeShow,oTimeCD;
			var oSpanScore;
			//定义变量记录时间参数：
			var iAll,iCD,iShow,iHide,iCount,iGet;
			var iCDId,iRandomId,iShow,iChangeId;
			window.onload=function(){
				//创建表格
				createTable();
				//给标签元素变量赋值
				init();
				//给按钮注册事件
				oButStart.onclick=startGame;
				oButEnd.onclick=endGame;
			}
			//开始游戏
			function startGame(){
				iAll=parseInt(oTextTime.value)*60;
				iCD=iAll;
				//每隔1秒钟执行一次倒计时
				iCDId=window.setInterval(setCD,1000);
				iShow=parseInt(oTextShow.value);
				iHide=parseInt(oTextHide.value);
				iCount=0;
				iGet=0;
				//每隔iShow+Hide随机一个td
				randomId();
				iRandomId=window.setInterval(randomId,(iShow+iHide)*1000);
				oButStart.disabled="disabled";
				oButEnd.disabled="";
			}
			//随机td
			function randomId(){
				iCount++;
				var index=parseInt(Math.random()*collTd.length);
				oTdMouse=collTd[index];
				//更改背景图片
				oTdMouse.style.backgroundImage="url('images/01.jpg')";
				//等待show时间结束后 把背景图片设置回来
				iShowId=window.setTimeout("oTdMouse.style.backgroundImage='url(images/00.jpg)';",iShow*1000);
			}
			//设置倒计时
			function setCD(){
				iCD--;
				oTextCD.value=iCD;
				//每隔一秒钟记录一下分数
				var message="共"+iCount+"只，打中"+iGet+"只！";
				oSpanScore.innerHTML=message.fontcolor("blue").bold();
				if(iCD<=0){
					endGame();
				}
			}
			//结束游戏
			function endGame(){
				oButEnd.disabled="disabled";
				oButStart.disabled="";
				window.clearInterval(iCDId);
				window.clearInterval(iRandomId);
			}
			//给标签元素变量赋值
			function init(){
				oButStart=document.getElementById("but_start");
				oButEnd=document.getElementById("but_end");
				
				oTextTime=document.getElementsByName("text_time")[0];
				oTextCD=document.getElementsByName("text_CD")[0];
				oTextHide=document.getElementsByName("text_hide")[0];
				oTextShow=document.getElementsByName("text_show")[0];
				
				oSpanScore=document.getElementById("span_score");
				oTextCD.value=60;
				oButEnd.disabled="disabled";
			}
			//动态生成表格
			function createTable(){
				var oDivRight=document.getElementById("div_right");
				var oTab=document.createElement("table");
				oTab.id="tab";
				for(var i=0;i<6;i++){
					var oTr=document.createElement("tr");
					for(var j=0;j<5;j++){
						var oTd=document.createElement("td");
						oTr.appendChild(oTd);
						collTd.push(oTd);
						//给所有的td添加点击事件
						oTd.onclick=function(){
							if(this==oTdMouse){
								//判断当前单元格的背景图片是不是01.jpg
								if(this.style.backgroundImage.indexOf("01.jpg")!=-1){
									//得一分
									iGet++;
									//背景图片更改为02.jpg
									oTdMouse.style.backgroundImage="url('images/02.jpg')";
									//等待0.2秒更改为00.jpg
									iChangeId=window.setTimeout("oTdMouse.style.backgroundImage='url(images/00.jpg)';",200);
									var message="共"+iCount+"只，打中"+iGet+"只！";
									oSpanScore.innerHTML=message.fontcolor("blue").bold();
								}
								
							}
						}
					}
					oTab.appendChild(oTr);
				}
				oDivRight.appendChild(oTab);
			}
		</script>