jq 实现简单版别踩白块儿（40多行jq代码）

html:

倒计时：0

分数：0

css:

.wrap{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.gamePage{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: -20%;
}
.game_ul{
width: 100%;
height: 20%;
display: flex;
transition: all .3s; 
}
.game_li{
flex: 1;
transition: all 1s; 
}
.aqua{
background:aqua;
}
.gray{
background:#cccccc;
}
.red{
background: red;
}
.score_wrap{
position: absolute;
left: 1rem;
top: 3rem;
z-index: 5;
font-size: .84rem;
color: #000000;
}
.countDown_wrap{
position: absolute;
left: 1rem;
top: 1.5rem;
z-index: 5;
font-size: .84rem;
color: #000000;
}

jq ：单位标准使用rem和百分比,rem的标准前面的文章有发表过,整个游戏的逻辑纯属个人的，获取不够成熟

$(function(){
var score = 0;//分数
var countDown = 30; //倒计时
var arrColor = ["aqua","gray","red"]; //随机类名(可不用)
//初始化游戏
function init(){
//for循环初始生成一个5个ul,每个ul里面有4个li
for(var i=0; i<6; i++){
$(".gamePage").append("

");
}
for(var i=0; i<4; i++){
$(".game_ul").append("

");
}
//让每个ul中随机的一个li添加一个类名表示可以点区域
$(".game_ul").each(function(){
$(this).children().eq(Math.floor(Math.random()*4)).addClass(arrColor[Math.floor(Math.random()*2)]);
})
//倒计时
var timer = setInterval(function(){
countDown--;
if(countDown==0){
clearInterval(timer);
console.log("时间到了,分数为"+score);
}
$(".countDown").html(countDown);
},1000)
//手机触摸事件
$(".gamePage").on("touchstart",".game_ul:eq(-1) li",function(){
if($(this).hasClass("aqua")||$(this).hasClass("gray")||$(this).hasClass("red")){
$(this).removeClass("black");
$(".game_ul").eq(-1).remove();
createRow(); //调用创建行
setTimeout(function(){
$(".game_ul").eq(0).css("height","");
},1)
score++;
$(".score").html(score);
}else{
clearInterval(timer);
alert("点错了,分数为"+score);
}
})
}
//创建行
function createRow(){
var firstLine = "

";
$(".game_ul").eq(0).before(firstLine);
for(var i=0; i<4; i++){
$(".game_ul").eq(0).append("

");
}
$(".game_ul").children().eq(Math.floor(Math.random()*4)).addClass(arrColor[Math.floor(Math.random()*3)]);
}
init();//调用游戏初始化
})