JavaScript原生实现功能打地鼠源码分享

最新推荐文章于 2024-03-30 05:24:16 发布
最新推荐文章于 2024-03-30 05:24:16 发布
阅读量563 收藏 5
点赞数 2
分类专栏： JavaScript 文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/soso3056/article/details/86374998
版权

今天分享一个JavaScript原生实现功能打地鼠

之间学校里实训的项目，做的马马虎虎功能还不算很强大，基础功能还是有的，如果有朋友有好的建议，可以下方评论交流。

效果图：

话不多说，直接上代码了。

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>打地鼠的小游戏-Soso</title>
		<script type="text/javascript" src="js/jquery.js"></script>
		<style>
			body{
				margin: 0;
				padding: 0;
			}
			#all{background:url(img/bg.jpg) no-repeat ;
				width: 1000px; height: 600px}
			#all2{padding:10px 0 0 450px;padding-top: 15px;}	
			#tool{ width: 250px;height: 180px;float: left; line-height: 5px;}	/*padding:10px 0 0 450px ; float: left;*/
			#tool input{
				/*float: right;*/
				width:70px;
				/*height: 10px;*/
			}
			#txt{
				width: 250px;
				float: right;
				color: cornflowerblue;
				display:inline;
				float: left;
				margin-left: 30px;
			}
			#tables{
				margin: 200px 0 0 350px;
			}
			
		</style>
		<script type="text/javascript">
			//1 先获取到所有的坑(图片)
			var image = document.getElementsByTagName('img');
			var ranK;
			var t;
			var s;
			var v;
			var d;
			var countdown;
			var audio = document.getElementById('audio');
			//倒计时事件
			function settime() {
				if (countdown == 0) {
					//倒计时结束停止游戏
					stop();
				} else {
					//每次递减每秒递归执行输出显示
					document.getElementById("lastTime").innerText = countdown;
					countdown--;
					d = setTimeout(function() {
						settime()
					}, 1000)
				}

			}
			//开始按钮事件
			function start() {
				//播放音效
				document.getElementById('audio').play();
				//遍历每个图片失败事件
				for (var i = 0; i < 25; i++) {
					image[i].setAttribute("onclick", "fail()");
				}
				//启用控件状态
				document.getElementById("startGame").setAttribute("disabled", true);
				document.getElementById("stopTime").setAttribute("disabled", true);
				document.getElementById("spaceTime").setAttribute("disabled", true);
				document.getElementById("gameTime").setAttribute("disabled", true);
				document.getElementById("overGame").removeAttribute("disabled");
				//获取游戏总时间秒数
				countdown = Number(document.getElementById("gameTime").value) * 60;
				//开始游戏
				chulai();
				//开始倒计时
				settime();

			}
			//1让老鼠随机出现在25中的一个坑里
			function chulai() {
				//随机值25格
				ranK = Math.floor(Math.random() * 25);
				image[ranK].src = "img/01.jpg";
				//遍历每个图片失败事件
				image[ranK].removeAttribute("onclick", "fail()");
				image[ranK].setAttribute("onclick", "die()");
				//停留时间触发执行paole（）
				s = setTimeout("paole()", Number(document.getElementById("stopTime").value) * 1000);

			}
			//2 老鼠回去了
			function paole() {
				// 如果没有打中老鼠，扣取100积分。
				if (image[ranK].src.substr(image[ranK].src.length - 5, 1) != 2) {
					fail();
				}
				//初始化图片
				image[ranK].src = "img/00.jpg";
				image[ranK].removeAttribute("onclick");
				image[ranK].setAttribute("onclick", "fail()");
				v = setTimeout("chulai()", Number(document.getElementById("spaceTime").value) * 1000);
			}
			//3 老鼠被打死了
			function die() {
				//切换图片	
				image[ranK].src = "img/02.jpg";
				//移除失败点击事件
				image[ranK].removeAttribute("onclick");
				//积分加100
				document.getElementById("account").innerText = Number(document.getElementById("account").innerText) + 100;
			}
			//4点击失败的每格扣取100
			function fail() {
				document.getElementById("account").innerText = Number(document.getElementById("account").innerText) - 100;
			}
			//5倒计时 先弹出积分  清空stop()
			function stop() {
				//暂停音效
				document.getElementById('audio').pause();
				alert("最终得分:" + document.getElementById("account").innerText);
				//清除所有计时器
				clearTimeout(t);
				clearTimeout(s);
				clearTimeout(v);
				clearTimeout(d);
				//启用控件状态
				document.getElementById("stopTime").value = "1";
				document.getElementById("spaceTime").value = "1";
				document.getElementById("gameTime").value = "1";
				document.getElementById("lastTime").innerText = "0";
				document.getElementById("account").innerText = "0";
				document.getElementById("startGame").removeAttribute("disabled");
				document.getElementById("stopTime").removeAttribute("disabled");
				document.getElementById("spaceTime").removeAttribute("disabled");
				document.getElementById("gameTime").removeAttribute("disabled");
				document.getElementById("overGame").setAttribute("disabled", true);
				//初始化所有图片事件
				for (var i = 0; i < 25; i++) {
					image[i].removeAttribute("onclick", "fail()");
					image[i].src = "img/00.jpg";
				}
			}
		</script>
	</head>
	<body>
		<div id="all">
			<div id="all2">
				<div id="tool">
					<p>-游戏时间：-　　<input type="text" name="" value="1" id="gameTime" /><label>分钟</label></p>
					<p>-出现间隔：-　　<input type="text" name="" value="1" id="spaceTime" /><label>秒</label></p>
					<p>-倒计时间：-　　<label id="lastTime">0</label></p>
					<p>-停留时间：-　　<input type="text" name="" value="1" id="stopTime" /><label>秒</label></p>
					<p>-得分情况：-　　<label id="account">0</label></p>
					　　　<input type="button" onclick="start()" id="startGame" value="开始游戏" />
					　　<input type="button" onclick="stop()" id="overGame" disabled="true" value="退出游戏" />
				</div>
				<div id="txt">
					<label>　　　　　　游戏说明</label><br />
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;点击"开始游戏"按钮，在下图中随机产生老鼠，老鼠消失
					前单击老鼠进行击打，打中一次即可获得100积分，
					如果没有打中老鼠，扣取100积分。快来行动吧，
					考验您的反应和眼力。
				</div>
			</div>
			<table id="tables">
				<tr>
					<td><img src="img/00.jpg"></td>
					<td><img src="img/00.jpg"></td>
					<td><img src="img/00.jpg"></td>
					<td><img src="img/00.jpg"></td>
					<td><img src="img/00.jpg"></td>
				</tr>

				<tr>
					<td><img src="img/00.jpg"></td>
					<td><img src="img/00.jpg"></td>
					<td><img src="img/00.jpg"></td>
					<td><img src="img/00.jpg"></td>
					<td><img src="img/00.jpg"></td>
				</tr>

				<tr>
					<td><img src="img/00.jpg"></td>
					<td><img src="img/00.jpg"></td>
					<td><img src="img/00.jpg"></td>
					<td><img src="img/00.jpg"></td>
					<td><img src="img/00.jpg"></td>
				</tr>

				<tr>
					<td><img src="img/00.jpg"></td>
					<td><img src="img/00.jpg"></td>
					<td><img src="img/00.jpg"></td>
					<td><img src="img/00.jpg"></td>
					<td><img src="img/00.jpg"></td>
				</tr>

				<tr>
					<td><img src="img/00.jpg"></td>
					<td><img src="img/00.jpg"></td>
					<td><img src="img/00.jpg"></td>
					<td><img src="img/00.jpg"></td>
					<td><img src="img/00.jpg"></td>
				</tr>
			</table>
			<font style="float:right;color:red;">By:Soso</font>
			<audio id="audio" loop="loop" src="img/sound.mp3"></audio>
		</div>
	</body>
</html>

素材图片：

（img/00.jpg）;

（img/01.jpg）;

（img/02.jpg）;

 

 

 

肖恩大肥羊
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript实现打地鼠下游戏源码
01-12
JavaScript实现打地鼠下游戏源码、课程实训作品，带音效～
js实现简单打地鼠小游戏
m0_55603459的博客
12-11 8433
小地鼠随机出现在固定大区域，以每次固定时间间隔、不同的个数出现。玩家点中地鼠会记录砸中地鼠的次数，同时地鼠的状态会发生变化，游戏设置倒计时，倒计时结束游戏结束，弹出玩家砸中次数。
js案例：打地鼠游戏（打灰太狼）
qq_52799985的博客
11-12 1326
打地鼠游戏是一个基础的javascript小游戏，他主要考查计时器，数组，随机数和定位等相关知识。文章最后附带源码压缩包和相关素材。
JavaScript之jQuery番外篇【打地鼠游戏的制作讲解】，一个合格的初级前端工程师需要掌握的模块笔记
最新发布
2401_83621603的博客
03-30 692
=就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。了95%以上前端开发知识点，真正体系化！**由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新。
HTML和JS写的简单游戏——打地鼠
fjjshj231的博客
06-06 1086
使用HTML和JS写的简单游戏——打地鼠。
js+jQuery打地鼠实例
zhang_ntmare的博客
11-13 609
js+jQuery打地鼠实例 效果图： 涉及知识点： 1、display：table 现在的开发环境table标签用的非常少，基本不用了： 1、用DIV+CSS编写出来的文件k数比用table写出来的要小，不信你在页面中放1000个table和1000个div比比看哪个文件大 2、table必须在页面完全加载后才显示，没有加载完毕前，table为一片空白，也就是说，需要页面完毕才显示，而div是逐行显示，不需要页面完全加载完毕，就可以一边加载一边显示 3、非表格内容用table来装，不符合标签语义化要求
年会活动html酷炫抽奖功能-高端版
xcLeigh
01-26 3034
年会活动html酷炫抽奖功能-高端版，支持json数据，主题风格切换。 资源下载地址（https://download.csdn.net/download/weixin_43151418/14934322）
原生js实现打地鼠小游戏.zip
05-15
里面是自己学习原生JavaScript课程时，敲的打地鼠小游戏，仅供各位感兴趣的网友下载借阅，学习编程思维和编程逻辑。
JavaScript实现打地鼠小游戏
10-19
主要为大家详细介绍了JavaScript实现打地鼠小游戏的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
网页版打地鼠源码.rar
03-09
JavaScript：用于实现游戏的交互逻辑，包括控制打地鼠的动作、计分、计时等功能，确保游戏的流畅运行。 源码特点： 简洁明了：源码结构清晰，易于理解，方便初学者快速上手。 功能完善：包含基本的打地鼠游戏功能，...
原生js实现打地鼠.zip
03-12
JS技术实现打地鼠游戏里面包含.idea文件、.vscode文件、images文件、mouse.html文件、mouse.js文件
js小游戏打地鼠
01-25
javascript/jquery制作的打地鼠小游戏，好玩还能自己编写，开心中。
js写的打地鼠游戏
07-11
js写的打地鼠游戏，在Chrome下测试的，浏览器兼容没有太考虑。比较简陋！
js实现的打地鼠游戏demo
03-20
js实现的简单打地鼠游戏
HTML5打地鼠小游戏
12-02
HTML5打地鼠小游戏是一个基于HTML5 Canvas和Audio开发的网页版小游戏。 游戏建议: 1.全神贯注，手眼并用，左右两手分别负责各自一边会更加有效。 2.偶尔会看到出来的不是地鼠而是更可爱的兔子，也不要心软，照样砸下去。 3.不仅要求速度快，而且要准，有时候
html打地鼠游戏
08-27
个人使用javascript开发的一款手机版的打地鼠游戏，界面扁平化，个人认为算是比较精美吧。
原生js做打地鼠游戏
qq_42794545的博客
11-15 464
抱歉素材有点难找，这次的学习重点是在JS的实现，梳理一下打地鼠的实现逻辑，主要分为三个主要功能函数。
多组开关灯实现
m0_72686745的博客
09-21 153
多组开关灯
【JavaScript】- 打地鼠游戏(定时器嵌套延时器)
m0_55960697的博客
04-04 4248
这里使用了定时器嵌套延时器的方法 js： window.addEventListener('load', () => { // 获取元素 let start = document.querySelector('.start') // 开始按钮 let mole = document.querySelectorAll('.mole') // 打鼹鼠 let score = document.querySelector('.score') /...
javascript打地鼠
12-16
很高兴回答您的问题。以下是一个简单的JavaScript打地鼠游戏的例子： ```javascript <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>打地鼠游戏</title> <style> .hole { width: 100px; height: 100px; background-color: #ccc; border-radius: 50%; position: relative; display: inline-block; margin: 10px; } .mole { width: 80px; height: 80px; background-color: #333; border-radius: 50%; position: absolute; top: 10px; left: 10px; display: none; } </style> </head> <body> <h1>打地鼠游戏</h1> <div id="score">得分：0</div> <div id="time">时间：30</div> <div id="holes"> <div class="hole"></div> <div class="hole"></div> <div class="hole"></div> <div class="hole"></div> <div class="hole"></div> <div class="hole"></div> </div> <script> var score = 0; var time = 30; var timer; var holes = document.getElementById('holes'); var scoreBoard = document.getElementById('score'); var timeBoard = document.getElementById('time'); function showMole() { var randomHole = Math.floor(Math.random() * holes.children.length); var hole = holes.children[randomHole]; var mole = hole.querySelector('.mole'); if (!mole) { mole = document.createElement('div'); mole.className = 'mole'; mole.addEventListener('click', function() { score++; scoreBoard.innerHTML = '得分：' + score; this.parentNode.removeChild(this); }); hole.appendChild(mole); } mole.style.display = 'block'; setTimeout(function() { mole.style.display = 'none'; }, 1000); } function startGame() { score = 0; time = 30; scoreBoard.innerHTML = '得分：' + score; timeBoard.innerHTML = '时间：' + time; clearInterval(timer); timer = setInterval(function() { time--; timeBoard.innerHTML = '时间：' + time; if (time <= 0) { clearInterval(timer); alert('游戏结束，得分：' + score); } }, 1000); showMole(); setTimeout(arguments.callee, 1000); } startGame(); </script> </body> </html> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值