版权声明:本文为博主原创文章,转载请附上博文链接! 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 />
点击"开始游戏"按钮,在下图中随机产生老鼠,老鼠消失
前单击老鼠进行击打,打中一次即可获得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);