<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<!--

		-->

		<style type="text/css">

			/*给body添加背景图片*/

			body{

				background: url(img/bg.jpg);

			}

			table{

				margin-left: 150px;

				margin-top: 100px;

			}

		</style>

		<script type="text/javascript">

		//开始游戏的方法

			var imgs;

			var gameTime=0;		//游戏时间

			var chImg;

			var cutTime;

			var mouseBk;

			var cnt=0;

			function start(){

				//要求一秒钟调用一次  使用定时器来实现

				chImg=window.setInterval("changeImg()",1000);

//				changeImg();

				cnt=0;

				gameTime=20;

				cutTime=window.setInterval("countTime()",500);

			}

			//每隔一秒钟随机切换表格中某一个格子的图片，切换成地鼠钻出来

			function changeImg(){

				//获得所有的img对象

				imgs= document.getElementsByTagName("img");

//				alert(imgs.length);25

				//获得一个随机的数组的索引下标  floor:向下取整

				var index=Math.floor(Math.random()*imgs.length);

				//获得随机的一个图片对象

				var img=imgs[index];

				//去切换img的图片资源

				img.src="img/01.jpg";

				//一秒钟之后 被切换的资源还原

				mouseBk=window.setTimeout("mouseBack("+index+")",1000);

			}

			//让随机的出现的地鼠资源还原为初始状态

			function mouseBack(index){

				var img=imgs[index];

				img.src="img/00.jpg";

			}

			//当使用鼠标点击25个图片资源的时候

			function hit(img){

				//如果当前的img对象是01.jpg对象的时候 才进行切换

				var name=img.src;

				//求字符串的字串  只获得最后的六个字符

				var subName=name.substr(name.length-6);

				//当被点击的图片是01.jpg的时候 进行资源的切换

				if(subName=="01.jpg"){

				img.src="img/02.jpg";

				cnt++;

				}

			}

			//计时的方法  该方法要求游戏启动后 每隔一秒钟执行一次

			function countTime(){

				gameTime--;

				var game= document.getElementById("gametime");

				game.innerHTML=gameTime;

				if(gameTime==0){

					//游戏结束

					gameOver();

				}

			}

			//游戏结束 清理资源

			function gameOver(){

			//停掉我们的计时器

			window.clearInterval(chImg);

			window.clearInterval(cutTime);

			window.clearInterval(mouseBk);

				//将表格中所有的图片资源 重置

				for(var i in imgs){

					imgs[i].src="img/00.jpg";

				}

				alert("游戏结束，count="+cnt);

			}

		</script>

	</head>

	<body>

		<!--添加游戏时间的文本-->

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

		<!--定义开始按钮-->

		<input type="button" value="开始" onclick="start()"/>

		<!--定义一个五行五列的表格 使用背景图片填充表格-->

		<!--快速生成一个五行五列的表格：table>ts*5>td*5  tab键-->

		<!--快速生成一个五行五列的表格：table>ts*5>td*5>img[src='img/00.jpg']  tab键-->

		<table border="1px">

			<tr>

				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>

				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>

				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>

				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>

				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>

			</tr>

			<tr>

				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>

				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>

				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>

				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>

				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>

			</tr>

			<tr>

				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>

				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>

				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>

				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>

				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>

			</tr>

			<tr>

				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>

				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>

				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>

				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>

				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>

			</tr>

			<tr>

				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>

				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>

				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>

				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>

				<td ><img src="img/00.jpg" onclick="hit(this)"/></td>

			</tr>

		</table>

	</body>

</html>

　　

用到的图片资源

实训篇-JavaScript-打地鼠的更多相关文章

  1. SSM 实训笔记 -11- 使用 Spring MVC + JDBC Template 实现筛选、检索功能（maven）

    SSM 实训笔记 -11- 使用 Spring MVC + JDBC Template 实现筛选.检索功能(maven) 本篇是新建的一个数据库,新建的一个完整项目. 本篇内容: (1)使用 Spri ...

  2. Java企业实训 - 01 - Java前奏

    前言: 虽然个人专攻.NET方向,不过由于个人是干教育行业的,方方面面的东西,不能说都必须精通,但肯定多少都会涉及到. 一个菜鸟学员,从啥都不会,经过一步步学习,最后到企业上手掌管一个模块甚至一个项目 ...

  3. <实训|第三天>Linux登录界面的修改以及Richard Stallman、自由软件运动

    在写博客之前我想说两点: 承认一个错误,昨天写的实训第二天,我把redhat6.7写成了Linux6.7,感谢热心人士的指出! 昨天写的文章名字太长了,今天改善,内容感觉表述不全,希望各位谅解! 官方 ...

  4. Android实训案例（八）——单机五子棋游戏，自定义棋盘，线条，棋子，游戏逻辑，游戏状态存储，再来一局

    Android实训案例(八)--单机五子棋游戏,自定义棋盘,线条,棋子,游戏逻辑,游戏状态存储,再来一局 阿法狗让围棋突然就被热议了,鸿洋大神也顺势出了篇五子棋单机游戏的视频,我看到了就像膜拜膜拜,就 ...

  5. Android实训案例(四)——关于Game，2048方块的设计，逻辑，实现，编写，加上色彩，分数等深度剖析开发过程！

    Android实训案例(四)--关于Game,2048方块的设计,逻辑,实现,编写,加上色彩,分数等深度剖析开发过程! 关于2048,我看到很多大神,比如医生,郭神,所以我也研究了一段时间,还好是研究 ...

  6. Android实训案例(三)——实现时间轴效果的ListView,加入本地存储，实现恋爱日记的效果！

    Android实训案例(三)--实现时间轴效果的ListView,加入本地存储,实现恋爱日记的效果! 感叹离春节将至,也同时感叹时间不等人,一年又一年,可是我依然是android道路上的小菜鸟,这篇讲 ...

  7. 【C语言期末实训】学生学籍管理系统

    目录: 一,设计要求 ,总体要求: ,具体功能: 二,设计框架 三,程序代码 ,声明函数和头文件 ,声明结构体 ,声明全局变量 ,主体启动函数 ,主菜单函数 ,创建学生档案函数 ,编辑学生档案函数 , ...

  8. JS相关实训

    今天又是无聊的一天,我的脑袋一直在嗡嗡叫,想着一些奇怪的问题,比如我为什么总是感到这么失落,为什么我喜欢的女孩不喜欢我呢,真是头大啊.不过既然有作业了我这个五好公民当然要认真写了.没时间让我思考这么复 ...

  9. vi, Java, Ant, Junit自学报告 - 实训week1

    vi, Java, Ant, Junit自学报告 2017软件工程实训 15331023 陈康怡 vi Vi是linux系统的标准文本编辑器,采用指令的方式进行操作,此处仅记录部分常用的指令. vi模 ...

  10. UML基础与Rose建模实训教程

    目  录 第1章  初识UML. 1 1.1 初识UML用例图... 1 1.2 初识UML类图... 3 第2章  Rational Rose工具... 6 2.1 安装与配置Rational Ro ...

随机推荐

  1. 远程服务调用（RPC与Rest本质区别）

    一.背景 远程服务将计算机程序的工作范围从单机扩展到网络,从本地延伸至远程,是构建分布式系统的首要基础.远程服务调用(Remote Procedure Call,RPC)在计算机科学中已经存在了超过四 ...

  2. 建筑、工程和施工产业中的3D可视化

    3D视觉效果是传达想法,概念或设计的强大工具,它也用于在概念阶段推销该想法. AEC行业的可视化已经走了很长一段路,从将设计提交给客户进行批准,现在用于项目的每个阶段,从项目投标,获得客户和理事会的批 ...

  3. Python 从MySQL数据库中把查询结果集写入到Excel

    import xlwt # 引入pymysql包 import pymysql # 连接数据库并打开library数据库 sql="SELECT * FROM\ user1;" c ...

  4. ElasticSearch分页查询的实现

    1.设置mapping PUT /t_order { "settings": { "number_of_shards": 1, "number_of_ ...

  5. 如何用LOTO示波器实测LC串联谐振？

    一个电感和一个电容串联,在某个特定的频率,就会发生谐振,这个频率就是谐振频率.串联谐振电路有如下特点: 谐振时整个电路阻抗呈电阻性,阻抗最小,电流达到最大: 谐振时电感和电容两端的电压达到最大. 上图 ...

  6. FBNet/FBNetV2/FBNetV3：Facebook在NAS领域的轻量级网络探索 | 轻量级网络

    FBNet系列是完全基于NAS方法的轻量级网络系列,分析当前搜索方法的缺点,逐步增加创新性改进,FBNet结合了DNAS和资源约束,FBNetV2加入了channel和输入分辨率的搜索,FBNetV3 ...

  7. KingbaseES查找慢查询语句和阻塞会话

    在处理数据库性能问题时,识别和分析慢查询及阻塞会话是至关重要的步骤.数据库管理员和开发人员常常需要依赖特定的工具和查询语句来追踪这些性能瓶颈. 当数据库响应变慢或出现处理延迟时,第一步通常是查找那些执 ...

  8. KingbaseES V8R6 集群运维系列--sys_monitor.sh stop关闭集群分析

    案例说明: 对于KingbaseES V8R6集群关闭整个集群通过执行'sys_monitor.sh stop'命令完成,本案例解析了在执行'sys_monitor.sh stop'后,数据库的关闭方 ...

  9. 参数 ora_input_emptystr_isnull 对于数据存储的影响

    原生的PG 对于 '' 和 null 认为是不同值:空值 和不确定值:而oracle 认为二者都是不确定的值.KingbaseES 为了兼容Oracle,增加了参数ora_input_emptystr ...

  10. 【已解决】Android----java.lang.NullPointerException:---java.lang.NullPointerException:

    2021-03-06 13:26:12.274 8544-8544/com.example.helloworld E/AndroidRuntime: FATAL EXCEPTION: main Pro ...