jQuery实现别踩白块小游戏(简易版)

别踩白块分享
这是个漫长的寒假，编程使我快乐。在学习jQuery时，在家练习做了这个小游戏，也算是提升一下实际使用能力。
现在记录下来给大家参考，不足之处请大家谅解。
先上截图：

使用代码前请先导入jQuery。
游戏分为方块区域、计时条区域和计分区域。
方块区域是用<table>，通过改变其表格的不同背景颜色制作的；计时条区域简单使用了jQuery的滑入滑出功能。

CSS代码：

<style>
        body {
            background-color: #f1f1f1;
        }

        .out {
            background-image: url("../img/pige.jpg");
            width: 1000px;
            margin: 0 auto;
            text-align: center;
        }

        .head {
            text-align: center;
        }

        .content {
            width: 520px;
            overflow: hidden;
            margin: 0 auto;
        }

        #timer_out {
            /*border: solid 1px gray;*/
            width: 20px;
            height: 550px;
            background-color: white;
            float: left;
            margin-left: 60px;
        }
        /*倒计时*/
        #timer {
            font-size: 12px;
            color: white;
            width: 20px;
            height: 550px;
            background-color: gray;
            display: none;
        }

        #player {
            width: 300px;
            float: left;
        }

        .black {
            background-color: black;
        }

        .white {
            background-color: white;
        }

        .red {
            background-color: red;
        }
		/*计分*/
        #score_out{
            float: left;
            width: 100px;
            text-align: center;
            border: solid 1px black;
        }
        #score,#score_max{
            color: red;
            font-size: 50px;
        }
        #score_out hr{
            height: 8px;
            background-color: black;
            border: none;
        }

    </style>

js：

<script>
    var lineNum;//表格行数
    var arr = new Array();
    var score = 0;//分数
    var scoreMax=0;//最高分
    var flag=true;//倒计时开关
    init();

    // 初始化游戏
    function init() {
        score=0;
        $('#score').html(score);
        lineNum = $('#play1').find('tr').length;
        console.log('表格有:' + lineNum + '行');
        $('#play1 tr').children().addClass('white');
        for (var i = 0; i < lineNum; i++) {
            arr[i] = Math.floor(Math.random() * 4);//生成随机数
            $('#play1 tr').eq(i).children().eq(arr[i]).removeClass('white').addClass('black');//生成黑块
        }
        console.log('随机数:' + arr.length + '个');
        $('#play1 td.red').removeClass('red');//清除所有红块
        $('#timer').slideUp('fast');//恢复计时器
        flag=true;//打开倒计时开关
    }

    //开始游戏
    function touch(obj) {
        //启动倒计时
        if (flag) {
            $('#timer').slideDown(60000, function () {
                alert('游戏结束，你的分数：' + score+'\n'+'最高分：'+scoreMax);
                init();
            });
        }
        //判断是否踩到白块
        if (obj.className == 'white') {
            $(obj).addClass('red');
            score--;
            $('#score').text(score);
        } else {
            var random = Math.floor(Math.random() * 4);
            var line1 = $('#play1 tr:eq(0) .black').index();
            var line2 = $('#play1 tr:eq(1) .black').index();
            var line3 = $('#play1 tr:eq(2) .black').index();
            var line4 = $('#play1 tr:eq(3) .black').index();
            var line5 = $('#play1 tr:eq(4) .black').index();
            var line6 = $('#play1 tr:eq(5) .black').index();
            $('#play1 td.black').removeClass('black').addClass('white');//清除所有黑块
            $('#play1 td.red').removeClass('red');//清除所有红块
            $('#play1 tr').eq(0).children().eq(random).removeClass('white').addClass('black');
            $('#play1 tr').eq(1).children().eq(line1).removeClass('white').addClass('black');
            $('#play1 tr').eq(2).children().eq(line2).removeClass('white').addClass('black');
            $('#play1 tr').eq(3).children().eq(line3).removeClass('white').addClass('black');
            $('#play1 tr').eq(4).children().eq(line4).removeClass('white').addClass('black');
            $('#play1 tr').eq(5).children().eq(line5).removeClass('white').addClass('black');
            //分数
            score++;
            $('#score').text(score);
            if (score > scoreMax) {
                scoreMax=score;
                $('#score_max').text(scoreMax);
            }
        }
        flag=false;//关闭倒计时开关
    }
</script>

源码下载：https://download.csdn.net/download/weixin_45054015/12234625.