<!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. php-fpm进程过多，导致CPU过高

    今天发现服务器的php-fpm进程突然过多,导致CPU过高,其他项目的访问受到影响.我通过以下三个基本步骤定位到了问题,发现了其原因. 基本步骤: 先用top命令查看进程情况,找出cpu最高的进程pi ...

  2. linux的内置crontab(定时任务)的简单介绍

    编写定时任务的基本命令: #查看当前用户的crontab crontab -l:   #编辑crontab任务 crontab -e:   #删除crontab任务 crontab -r   定时任务 ...

  3. mongo Payload document size is larger than maximum of 16777216. 如何处理

    MongoDB中的文档大小限制为16MB(即16777216字节).如果你遇到Payload document size is larger than maximum of 16777216的错误,意 ...

  4. php time 时间 前台拿到 需要*1000能正确显示 dayjs(time*1000).format('YYYY-MM-DD HH:mm:ss')

    php time 时间 前台拿到 需要1000能正确显示 dayjs(time1000).format('YYYY-MM-DD HH:mm:ss')

  5. 2023山东省“技能兴鲁”职业技能大赛-学生组初赛wp

    PWN pwn1 c++ pwn,cin 直接相当于 gets 了,程序有后门,保护基本没开,在 change 的最后一个输入点改掉返回地址为后门地址即可 from pwn import * cont ...

  6. vue入门教程之-属性、事件和双向绑定

    vue入门教程之-属性.事件和双向绑定 欢迎关注博主公众号「java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转载请注明出处 htt ...

  7. Android 桌面小组件使用

    原文: Android 桌面小组件使用-Stars-One的杂货小窝 借助公司上的几个项目,算是学习了Android桌面小组件的用法,记下踩坑记录 基本步骤 1.创建小组件布局 这里需要注意的事,小组 ...

  8. 【开源库推荐】#5 Android高亮引导库

    原文:[开源库推荐]#5 Android高亮引导库 - Stars-One的杂货小窝 本文介绍2个高亮引导库HighLightPro和Curtain hyy920109/HighLightPro: A ...

  9. day04-3服务器推送新闻

    多用户即时通讯系统04 4.编码实现03 4.7功能实现-服务器推送消息功能实现 4.7.1思路分析 服务器推送新闻,本质其实就是群发消息 在服务器启动一个独立线程,专门负责推送新闻 该线程通过管理线 ...

  10. js实现回调功能实例

    所谓js回调,本人认为无非就是一个函数的参数是另外一个函数,而作为参数的函数就称之为回调函数 <script type="text/javascript">  //要请 ...