js实现简单打地鼠小游戏

科技前沿 • 2025-03-04 17:01 • 阅读 38

大家好，我是讯享网，很高兴认识大家。

一、简要

小地鼠随机出现在固定大区域，以每次固定时间间隔、不同的个数出现。玩家点中地鼠会记录砸中地鼠的次数，同时地鼠的状态会发生变化，游戏设置倒计时，倒计时结束游戏结束，弹出玩家砸中次数。

二、思路：

1.大盒子里面每隔一段时间就在不同的位置的出现小格子，取随机数来实现不同的出现位置

2.大盒子里面每隔一段时间就出现不同的数量的小格子，取随机数来每次定义出现的数量

3.记录的砸中次数和变化效果使用dom点击事件

三、程序实现效果：

1.游戏开始

讯享网

2.砸中地鼠，记录加分，地鼠状态变化

3.游戏结束

四、具体代码

1.js代码

<script> // 实现效果 // 大盒子里面每隔一段时间就在不同的位置出现不同数量小格子 var a = document.querySelector('.rect'); var c = 0; var d = document.querySelector('.text'); var ul = document.querySelector('ul'); var time = 9; var djs = document.querySelector('.text1') setInterval(fun,1000); function fun() { if (time == -1) { clearInterval(fun); alert('你的总分是：' + c + '分！'); time = 9 c = 0 d.innerHTML = "砸中了" + 0 + "次"; } else { djs.innerHTML = '还有' + time + '秒后结束'; time--; }; } function init() { var num = Math.floor(Math.random() * 5 + 1);//每次出现的随机数量1-5 for (var j = 0; j < num; j++) { ul.innerHTML += "<li></li>"; } // 1.获取所有的li元素 ul1 = document.querySelector('ul'); //重新获取父级ul var li = document.querySelectorAll('li'); // 2.利用for循环遍历小格子 for (var i = 0; i < li.length; i++) { var a = Math.floor(Math.random() * 7 + 1) * 50; var b = Math.floor(Math.random() * 7 + 1) * 50; li[i].id = i; li[i].style.marginLeft = a + "px"; li[i].style.marginTop = b + "px"; li[i].style.backgroundColor = 'orange'; li[i].innerHTML = '地鼠'; li[i].onclick = function () {//点击事件记录砸中地鼠 c += 1; this.style.backgroundColor = 'red';//变化颜色 this.innerHTML = '砸中了'; d.innerHTML = "砸中了" + c + "次"; } } } setInterval(() => {//注意不能用K++来删除元素，因为ul.children.length 是动态变化的 for (let k = ul.children.length - 1; k >= 0; k--) { ul.removeChild(ul.children[k]); //删除元素 } init(); }, 800); init(); </script>

讯享网

2.head的CSS代码与body代码

讯享网 <style type="text/css"> * { padding: 0; margin: 0; list-style: none; box-sizing: border-box; } #rect { width: 400px; height: 400px; margin: 50px auto; background: wheat; } ul { width: 400px; height: 400px; overflow: hidden; } li { position: absolute; width: 50px; height: 50px; float: left; font-size: 10px; line-height: 50px; text-align: center; } .text { font-size: 20px; margin-left: 45%; } .text1{ color: red; font-size: 25px; margin-left: 43%; } </style> </head> <body> <div id="rect"> <ul> </ul> </div> <div class="text1">还有10秒后结束</div> <span class="text">砸中了0次</span> </body>

js实现简单打地鼠小游戏

相关推荐