<!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. CefSharp 开发触屏终端遇到的问题记录

    一.背景 最开始准备使用的 Chromely 做一个终端机项目,本来以为挺顺利的一个事情折腾了两天半.由于无法直接控制窗体的属性,最后还是切换到 .NET Framework 4.8 + CefSha ...

  2. 【EasyExcel详细步骤】（内附源码）

    页面预览 数据导出 数据导入 第01章-Alibaba EasyExcel 1.EasyExcel介绍 1.1.EasyExcel的作用 数据导入:减轻录入工作量 数据导出:统计信息归档 数据传输:异 ...

  3. golang官方包管理vendor模式无法引用非go文件

    主页 微信公众号:密码应用技术实战 博客园首页:https://www.cnblogs.com/informatics/ 背景&问题 golang作为高级计算机语言之一,在云原生以及web网站 ...

  4. IDE中使用Git提交代码报错:Push to origin/release-V2 was rejected

    一.问题由来 当前项目开发好之后,已经正常稳定运行一两个月,在使用过程中基本上没在出现什么BUG.因此公司在讨论准备开发二期项目,自己 就在之前的基础之上,使用git创建了分支,一个分支release ...

  5. AutoFill Chrome插件 影响 Vue接口读取，导致页面卡死，caution: request is not finished yet!

    今天页面突然卡死了,也不知道是因为什么,直连服务器,能行,自己本机nginx的,系统访问某个特定的api就会卡死. 经过尝试,发现今天测试的AutoFill影响的.

  6. Android 开发Day7

    <project version="4"> <component name="ExternalStorageConfigurationManager&q ...

  7. 学会Promise，看这里！！！

    前言 众所周知,在JavaScript的世界中,代码都是单线程执行的.由于这个原因,JavaScript中的耗时操作,如网络操作.浏览器事件等,都需要异步执行.这也导致在JavaScript中异步操作 ...

  8. Java原生序列化与反序列化

    序列化与反序列化 Java序列化是指把Java对象转换为字节序列的过程;而Java反序列化是指把字节序列恢复为Java对象的过程. 为什么需要序列化? 序列化分为两大部分:序列化和反序列化.序列化是这 ...

  9. Oracle字符串分隔函数

    记录一下 CREATE OR REPLACE TYPE str_split IS TABLE OF VARCHAR2 (4000); CREATE OR REPLACE FUNCTION splits ...

  10. 巧用dblink 实现多进程并行查询

    概述 对于分区表的大数据统计分析,由于数据量巨大,往往需要采用并行.但是数据库并行的效率相比分进程分表统计还是有比较大的差距.本文通过巧用dblink,实现分进程分分区统计数据. 例子 kingbas ...