一、简要
小地鼠随机出现在固定大区域,以每次固定时间间隔、不同的个数出现。玩家点中地鼠会记录砸中地鼠的次数,同时地鼠的状态会发生变化,游戏设置倒计时,倒计时结束游戏结束,弹出玩家砸中次数。
二、思路:
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>