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

本文主要是介绍JavaScript原生实现功能打地鼠源码分享，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

今天分享一个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");//积分加100document.getElementById("account").innerText = Number(document.getElementById("account").innerText) + 100;}//4点击失败的每格扣取100function 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）;