<!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. 我为什么使用Linux做开发

    系统选择 目前市面上主流的桌面操作系统在大多数人眼里只有Windows和MacOS,那为什么我没选择它们两呢? 首先,不选MacOS的原因,就是太贵.当然这是我的原因不是苹果的原因,我最早使用Linu ...

  2. npm 添加 淘宝代理

    npm config set registry https://registry.npm.taobao.org

  3. json转化总结

    最近对接个老接口,返回的信息格式十分清奇,为此折腾了一会,简单记录下 先贴下这个接口返回的格式样子 在本地我使用idea的debug模式调试返回的信息,方式:进入debug模式,请求达到断点处,按组合 ...

  4. 自己想到的几道Java面试题

    1.在抽象类中能否写main方法,为什么? 2.在接口中能否写main方法,为什么? 3.Java能否使用静态局部变量,为什么? 4.Java类变量,实例变量,局部变量在多线程环境下是否线程安全,为什 ...

  5. 云VR给当今的教育行业带来哪些契机

    教育一直是国之根本大策,培养下一代高科技新型人才是新时代规划的重要建设目标.教育的授课方式也别出心裁,不断地涌现出教育的新模式.3DCAT 云VR别出心裁,为教育行业带来新的教学方式和简化管理的全新系 ...

  6. 捉虫日记 | MySQL 8.0从库某些情况下记录重放的CREATE TABLE、DROP TABLE语句到慢日志(slow log)

    作者:卢文双 资深数据库内核研发 本文首发于 2023-11-30 20:47:35 https://dbkernel.com 问题描述 当主从复制采用 binlog 的行模式时,如果从库启用 slo ...

  7. python高级技术（进程一）

    一 什么是进程 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础.在早期面向进程设计的计算机结构中,进程是程序的基本执行实 ...

  8. PLC与上位机传递数据

    1.我这里使用的是HslCommunication 假如传递的是word类型,PLC以16进制封装数组,它有预留,我扩充 PLC博图上是 word[5] 上位机接收 ushort[] Data1=ne ...

  9. PostgreSQL与Java JDBC数据类型对照 源码

    文件:postgresql-42.2.12.jar 类名:org.postgresql.jdbc.TypeInfoCache // basic pg types info: // 0 - type n ...

  10. .NET周刊【3月第3期 2024-03-24】

    国内文章 Garnet: 力压Redis的C#高性能分布式存储数据库 https://www.cnblogs.com/InCerry/p/18083820/garnet_introduce 微软研究院 ...