js实现打地鼠游戏（快来一起试试吧！！！）
程序员文章站
2022-06-24 11:21:42
使用js实现打地鼠游戏 相信很多小伙伴在学习js的路上充满了乐趣，因为可以用js写各种东西，当写出来的代码在浏览器中呈现想要的结果时，相信你们一定是充满成就感的，那么今天就来给大家介绍一下用js实现简单的童年游戏——打地鼠。是不是觉得好神奇，js还能这么玩，实际上小时候玩的很多种网页小游戏都可以用js来实现哦，话不多说，上代码，咻咻咻~
使用js实现打地鼠游戏
相信很多小伙伴在学习js的路上充满了乐趣，因为可以用js写各种东西，当写出来的代码在浏览器中呈现想要的结果时，相信你们一定是充满成就感的，那么今天就来给大家介绍一下用js实现简单的童年游戏——打地鼠。是不是觉得好神奇，js还能这么玩，实际上小时候玩的很多种网页小游戏都可以用js来实现哦，话不多说，上代码，咻咻咻~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打地鼠</title>
<style>
table {
background-image: url('images/beijing.jpg');
width: 325px;
position: relative;
left: 50%;
top: 10px;
transform: translate(-50%, 0);
}
table>caption {
font-family: '微软雅黑';
font-size: 20px;
}
table>td {
width: 100px;
height: 50px;
}
img {
margin-top: 30px;
}
body {
cursor: url('images/e.ico'), -moz-cell;
}
.sorce {
width: 325px;
height: 100px;
background-color: rgb(166, 212, 253);
/* float: left; */
text-align: center;
line-height: 40px;
position: relative;
left: 50%;
transform: translate(-50%, 0);
}
.d1 {
position: relative;
}
</style>
</head>
<body>
<div class="d1">
<!-- 定义一个div标签用来存放分数 -->
<div class="sorce">
<p id="level">第1关</p>
<p id="zong">总分：0</p>
</div>
<!-- 定义一个表格，存放坑位 -->
<table id="box">
<caption>打地鼠</caption>
<tr id="t">
<td><img src="images/keng.gif" alt="keng"></td>
<td><img src="images/keng.gif" alt="keng"></td>
<td><img src="images/keng.gif" alt="keng"></td>
</tr>
<tr>
<td><img src="images/keng.gif" alt="keng"></td>
<td><img src="images/keng.gif" alt="keng"></td>
<td><img src="images/keng.gif" alt="keng"></td>
</tr>
<tr>
<td><img src="images/keng.gif" alt="keng"></td>
<td><img src="images/keng.gif" alt="keng"></td>
<td><img src="images/keng.gif" alt="keng"></td>
</tr>
</table>
</div>
<script>
//获取数据
var dishus = document.getElementsByTagName('img');
var nums = 0;
var sum = 0;
var box = document.getElementById('box');
var t = document.getElementById('t');
var res = document.getElementsByTagName('tr');
// alert(dishus.length);
if (sum == 0) {
setTimeout(showin, 1000);
}
//地鼠显示方法
function showin() {
nums = Math.floor(Math.random() * dishus.length);
dishus[nums].src = 'images/dishu.gif';
dishus[nums].style.marginTop = 'auto';
dishus[nums].setAttribute("onclick", "beat()")
setTimeout(hideof, Math.random() * 500 + 1000);
}
//地鼠隐藏方法
function hideof() {
dishus[nums].src = 'images/keng.gif';
dishus[nums].removeAttribute("onclick");
dishus[nums].style.marginTop = '30px';
setTimeout(showin, Math.random() * 500 + 1000);
}
//击打地鼠方法
function beat() {
dishus[nums].src = 'images/shang.gif';
sum += 10;
dishus[nums].style.marginTop = '0px';
document.getElementById('zong').innerHTML = '总分：' + sum;
}
</script>
</body>
</html>
当当当当~成品就是这样啦
这只是个简单的打地鼠，我们也可以给它增加关卡，比如当分数增加到指定的数，我们可以增加数量，或者加快时间，或者缩小地鼠的大小，还可以一次冒出多只地鼠，有兴趣的话可以试一试哦！
附有素材链接：链接：https://pan.baidu.com/s/1AWQ5jEwvF0lnkx2V_wmiDQ 提取码：c7bw
觉得不错的话记得点个赞哦，一起加油，一起进步！
本文地址：https://blog.csdn.net/qq_46256556/article/details/107880282