精品打地鼠实训教程

打地鼠

一.学习目标

复习布局元素

复习元素操作

掌握函数

掌握时钟

二.准备工作

兵

所看：图

三.先静后动

3.1 html页面

<div class="score">
        剩余时间(s):<span id="gametime">20</span>
    	<button type="button" onclick='start()'>开始</button>
</div>

    <table>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>

3.2样式

body {
    background: url(./img/bg.jpg) no-repeat fixed;
    background-size: 100% 100%;
}
.score {
    border: 1px solid red;    text-align: center;
}
table {    margin: 50px 200px;}
td {
    width: 70px;  height: 70px;
    background: url(./img/00.jpg) no-repeat center / cover;
    border-radius: 9px;
}

3.1函数

3.1.0 变量

 let imgs;
 let gameTime = 20;       //20秒后游戏结束；游戏时间
 let chImg;
 let cutTime;
 let mouseBk;
 let count = 0;             //打中地鼠个数

3.1.1开始启动

function start(){
	gameTime = 20; //重置游戏时间
     // 1s调用一次
    chImg = window.setInterval("changeImg()", 1000);
    cutTime = window.setInterval("counterTime()", 1000);
}

3.1.2单击 小老鼠

//每个一段时间之后，随机的切换地鼠钻出来的地鼠，随机换25个img的图片。
			//获得img图片对象
function changeImg(){
		imgs=document.getElementsByTagName("img");
		//查看其长度;
		alert(imgs.length);
		//console.log(Math.random()*25);
		let index=Math.floor(Math.random()*25);
		console.log(index);
		//获得某个图片对象;利用
	  let img=imgs[index];
	  img.src="img/01.jpg";
    setTimeout("hide("+index+")",1300);	  //一会儿加;
}

3.1.3 定时器1秒

setInterval("changeImg()",1000);  //开始方法start写;

3.1.4 老鼠消失

//老鼠消失,回第几个，需要里面放个数：index
function hide(index){
	let img=imgs[index];
	img.src="img/00.jpg";
}						

3.1.5 打老鼠

//打地鼠自己
function hit(img){
		//如果当前的img对象，是01.jpg的时候，才进行切换
		let name=img.src;
	if (substr == '01.jpg') {
        img.src = './img/02.jpg';
        count++;    //积分哦
    }			
}

3.1.6 统计

//在外部定义一个变量，gameTime=20;
//计时的方法；每隔1秒执行一次；
function counterTime(){
	gameTime--;
	//需要显示剩余的时间;
	let game=document.getElementById("gameTime");
		game.innerHTML=gameTime;
				
		if(gameTime==0){
			gameOver();
		}
}

剩余时间：
		<span id="gameTime">0</span>

3.1.7 结束游戏

//游戏结束
			function gameOver(){				
				//停掉计时器;
				//需要把变量放到外面，进行公开的调用;
				clearInterval(chImg);
				clearInterval(cutTime);				
				alert("游戏结束,得分："+count);
				//剩余时间，统一设置为20；
				document.getElementById("gameTime").innerHTML=20;
				//将最后小老鼠，给清除掉；
				for(let i in imgs){
					imgs[i].src="img/00.jpg";
				}
			}