别踩白块

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/game.css"/>
</head>
<body>
<div class="grade clearfix">
    <div class="grade1">初级</div>
    <div class="grade2">中级</div>
    <div class="grade3">高级</div>
</div>
<div class="btn">
    <div class="start">开始游戏</div>
    <div class="restart">重新开始</div>
    <div class="stop">暂停游戏</div>
</div>
<h5 class="tc" style="padding:16px 0;">剩余时长：<span>60</span>秒</h5>
<div class="wrap">
    <div class="container" id="container">

    </div>

</div>
</body>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/layer.js"></script>
<script src="js/game.js"></script>
<script>

</script>
</html>
/*公共样式--开始*/
body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select {
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}

table {
    border-collapse: collapse;
}

body {
    font-family: "Microsoft YaHei";
}

ul, li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #232323;
}

img {
    vertical-align: middle;
    border: none;
}

.tc {
    text-align: center
}

.tl {
    text-align: left
}

.tr {
    text-align: right
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.clearfix {
    zoom: 1;
}

.clearfix:after {
    content: ".";
    width: 0;
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
}

/*公共样式--结束*/
.black{background-color:#000;}
.white{background-color:#fff;}
.wrap{width:502px;height:500px;margin:20px auto;border:1px solid #ccc;overflow:hidden}
.container{width:502px;height:500px;overflow:hidden}
li,td{float:left;width:100px;height:100px;border:1px solid #ddd;cursor:pointer;}
.li_first{border-left:none;}
.li_last{border-right:none}
h5{font-size:14px;}
h5 span{color:red;font-size:16px;}
.start,.stop,.restart{margin-top:10px;float:left;margin-left:20px;width:100px;height:30px;line-height:30px;text-align:center;color:#fff;border-radius:5px;cursor:pointer;}
.start,.restart{background-color:green;}
.restart{display:none;}
.stop{display:none;background-color:red;}
.grade{margin:10px;}
.grade div{float:left;width:100px;height:30px;line-height:30px;border:1px solid #ccc;text-align:center;margin-left:10px;cursor:pointer;}
var timer=null;
var timer2=null;
var step=60;
//清除定时器
var date=60;
function clear(){
    window.clearTimeout(timer);
    timer=0;
    window.clearTimeout(timer2);
    timer2=0;
}
//获取随机数
function getRandom(n,m){
    n=Number(n);
    m=Number(m);
    if(isNaN(n)||isNaN(m)){
        return Math.random();
    }
    if(n>m){
        var t=n;
        n=m;
        m=t;
    }
    return Math.round(Math.random()*(m-n)+n);
}
//给container添加内容
var str="";
var ary=["black","white"];
str+='<table>';
for(var i=0;i<200;i++){
    str+='<tr>'+'<td class="'+ary[getRandom(0,1)]+'"></td>'+'<td class="'+ary[getRandom(0,1)]+'"></td>'+'<td class="'+ary[getRandom(0,1)]+'"></td>'+'<td class="'+ary[getRandom(0,1)]+'"></td>'+'<td class="'+ary[getRandom(0,1)]+'"></td>'+'</tr>';
    /*if($("td").hasClass("black")){
        $(this).siblings().attr("class","white");
        console.log(1);
    }*/
}
str+='</table>';
$(".container").html(str);
if($("td").hasClass("black")){
    $(this).siblings().attr("class","white");
    console.log(1);
}
var noticeHTML=$(".container").html();
//选择等级
$(".grade div").on("click",function(){
    $(this).siblings().hide();
    $(this).addClass("clicked");
    $(this).siblings().removeClass("clicked");
});
$(".grade1").on("click",function(){
    date=60;
});
$(".grade2").on("click",function(){
    date=30;
});
$(".grade3").on("click",function(){
    date=6;
});
//无缝滚动
function move(){
    var val1=$(".container").scrollTop();
    $(".container").scrollTop(val1+1);
    var val2=$(".container").scrollTop();
    if(val1===val2){
        $(".container").html($(".container").html()+noticeHTML);
        $(".black").one("click",black);
    }
    timer=window.setTimeout(move,date);
}
//所用时间
function move1(){
    step-=1;
    $("h5 span").html(step);
    timer2=window.setTimeout(move1,1000);
    if($("h5 span").html()<=0){
        clear();
        white();
    }
}
//开始游戏
$(".start").on("click",function(){

    if($(".grade div").hasClass("clicked")){
         move();
         move1();
        $(this).css("display","none");
        $(".restart").css("display","block");
        $(".stop").css("display","block");
        $(this).addClass("clicked");
    }else{
        layer.open({
            type: 1,
            area: ['200px', '160px'],
            //shadeClose: true, //点击遮罩关闭
            content: '<div style="padding:20px;text-align:center;">请选择游戏级别！！！</div>'
        });
    }

});
//重新开始
$(".restart").on("click",function(){
    window.location.reload();
});
//暂停游戏
$(".stop").on("click",function(){
    clear();
    $(".start").html("继续游戏");
    $(".start").css("display","block");
});
var score=0;
//点击黑块，分数加1
function black(){
    score+=1;
    $(this).unbind("click");
}
//点击白块，游戏结束
function white(){
    if($(".start").hasClass("clicked")){//开始游戏后才会有弹出框
        layer.open({
            type: 1,
            area: ['200px', '200px'],
            //shadeClose: true, //点击遮罩关闭
            content: '<div style="padding:20px;">' +
                '<p>game over!</p>' +'<p style="margin-top:20px;">您的总用时'+(60-$("h5 span").html())+'秒'+'</p>'+'<p style="margin-top:20px;">您的得分是'+score+'分'+'</p>'+'</div>'
        });
        $(".stop").css("display","none");
        clear();
    }

}
$(".black").one("click",black);
$(".container").one("click",".white",white);

本人前端菜鸟一个，闲来无事写了一个别踩白块的游戏练习代码编写能力，望大家多多指教。
布局我采用的是动态添加一段内容，并随机分配给元素黑色或白色的class名称。然后重复内容，通过无缝滚动效果循环播放。

开始游戏之前需选择游戏等级，共分为三级（初级、中级、高级），游戏过程中您可进行暂停游戏、继续游戏、重新开始等操作。

游戏最长时间为60秒。超过60秒游戏自动结束。

每点击一个黑块，分数加1，每个黑块只能点击一次，也就是同一个黑块不管点击几次，分数值只加1。

当点到白块后，通过弹框的形式告知用户游戏结束和所得分数、所用时间等。

点到白块后，白块和黑块都不能再点击了，不过您可以选择重新开始游戏

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/dongxiaolei/p/5692450.html