html代码如下
<div class="contain">
<div class="gray">
<p> 游戏结束 <br> 您一共消灭了<span></span>个小黑块</p>
</div>
<div id="content">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<select name="cur" id="">
<option value="10">10秒</option>
<option value="20">20秒</option>
<option value="30">30秒</option>
<option value="40">40秒</option>
<option value="40">50秒</option>
<option value="40">60秒</option>
</select>
<button>开始</button>
<button><a href="">重新开始</a></button>
css代码如下
<style>
*{
margin: 0;
padding:0;
list-style: none;
text-decoration: none;
}
.contain{
width: 200px;
height: 300px;
margin:0 auto;
overflow: hidden;
position: relative;
}
ul{
width: 100%;
height: 50px;
}
ul li{
float: left;
width: 48px;
height: 48px;
border:1px solid black;
}
#content{
position: absolute;
bottom: 0;
}
.gray{
width: 200px;
height: 300px;
position: absolute;
top:0;
z-index: 2;
}
p{
display: none;
text-align: center;
color: red;
font-size: 30px;
margin-top: 100px;
}
button,select{
display: block;
width: 100px;
height: 40px;
margin: 0 auto;
margin-top: 4px;
line-height: 40px;
}
.active{
background-color: black;
}
a{
color: #000000;
}
</style>
jQurey代码如下(引入的jQurey3.4.1版本)
<script src="jquery-3.4.1.js"></script>
<script>
//初始化黑白块
$("ul").each(function (index,item) {
var n = parseInt(Math.random()*4);
$(item).children().eq(n).css("background","black").addClass("active");
$(item).children().eq(n).siblings("li").addClass("white")
});
//点击小白块删除该父元素ul并且在content头添加m
function go() {
var sum = 0;
$("p span").html(sum);
$("#content").on("click",".active",function () {
sum ++;
$("p span").html(sum);
var x = parseInt(Math.random()*4);
$(this).parent("ul").remove();
var m = $("<ul> <li></li> <li></li> <li></li> <li></li> </ul>");
m.prependTo("#content");
m.children().eq(x).addClass("active");
$("li").not(".active").addClass("white");
});
}
//点击开始按钮调用函数go
$("button").eq(0).click(function () {
go();
//选定时间修改定时器定时
var time = $("select option:selected").val()*1000;
console.log(time);
clearInterval(timer);
//遮盖层底部露出50px高度的可触摸区域
$("p").css("display","none");
$(".gray").css("height",250);
var timer = setInterval(function () {
//定时器结束后全部遮盖并且显示游戏结束
$("p").css("display","block");
$(".gray").css("height",300);
clearInterval(timer)
},time);
$("#content").on("click",".white",function () {
//点击白块结束定时器 游戏结束
console.log("!");
clearInterval(timer);
$("p").css("display","block");
$(".gray").css("height",300)
})
})
</script>
bug
多次点击开始按钮时会多次调用go()函数
会重复在concent内添加ul标签
我不会改。。。。。。。。学会了再更