相信很多小伙伴在学习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>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132当当当当~成品就是这样啦
这只是个简单的打地鼠，我们也可以给它增加关卡，比如当分数增加到指定的数，我们可以增加数量，或者加快时间，或者缩小地鼠的大小，还可以一次冒出多只地鼠，有兴趣的话可以试一试哦！
附有素材链接：链接：https://pan.baidu.com/s/1AWQ5jEwvF0lnkx2V_wmiDQ 提取码：c7bw
