<!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. GDB调试入门笔记

    目录 What? Why How 安装GDB 安装命令 查看是否安装成功 调试简单的程序 预备一个程序 调试 使用 break info list next print step 一些小技巧 在gdb ...

  2. 案例8：将"picK"的大小写互换

    最终输出结果为PICk. 需要先计算两个字母之间的间隔,比如a和A之间的间隔为多少. 然后在将大写字母转换为小写字母,加上间隔的值: 将小写字母转换为大写字母,减去间隔的值. 示例代码如下: #def ...

  3. 摆脱鼠标系列 - vscode - ctrl+up 光标上移动4行 ctrl+down 光标下移4行

    为什么 摆脱鼠标系列 - vscode - ctrl+up 光标上移动4行 之前滚动屏幕总是用鼠标,现在改为 ctrl + 上箭头或下箭头 实现起来稍微有些麻烦 实现 需要安装 macros 插件 这 ...

  4. 多线程系列(十九) -Future使用详解

    一.摘要 在前几篇线程系列文章中,我们介绍了线程池的相关技术,任务执行类只需要实现Runnable接口,然后交给线程池,就可以轻松的实现异步执行多个任务的目标,提升程序的执行效率,比如如下异步执行任务 ...

  5. 封装TornadoFx常用控件库

    github:https://github.com/Stars-One/common-controls 为TornadoFx的封装的常用控件与工具,基于Jfoenix,借鉴Kfoenix 前言 这个开 ...

  6. 标记SA_RESTART的作用

    在程序执行的过程中,有时候会收到信号,我们可以捕捉信号并执行信号处理函数,信号注册函数里有一个struct sigaction的结构体,其中有一个sa_flags的成员,如果sa_flags |= S ...

  7. C#通义千问apl

    1.在阿里申请和开通模型服务灵积:链接地址 2.在gitee下载代码:Gitee链接 3.在代码中更换你的API-KEY 4.注意要开通:通义千问/qwen-turbo模型 5.如图所示

  8. NA嵌入Flutter页面

    目录介绍 01.Android承载flutter容器 02.过时的NA跳转flutter方案 03.升级版本NA跳转Flutter处理 04.如何处理NA跳转flutter传参 05.思考遇到的几个问 ...

  9. 快速上手系列：Oracle

    一 简介 1.为何需要数据库?存储大量数据,方便检索和访问. 2.文件组成: 数据文件:扩展名是.DBF,用于存储数据库数据的文件,数据库表和数据文件不存在一对一对应关系 控制文件:扩展名是.CTL, ...

  10. AntSK 0.2.3 版本更新：轻松集成 AI 本地离线模型

    大家好,今天和大家分享 AntSK 知识库/智能体项目的最新进展. AntSK 是一个基于 .Net 8.Blazor 及 SemanticKernel 开发的 AI 项目,旨在为开发者提供一个强大的 ...