jquery 简单的别踩白块小游戏

写写简单的东西，效果如图：

1.html代码

    <div class="warp">
        <div class="title">
            <h3>别踩白块</h3>
            <p class="maxScore"></p>
        </div>
        <ul class="Garea">
        </ul>
    </div>

2.css代码

body,
        ul,
        li,
        p {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
            /*border: 1px solid #000;*/
        }

        .warp {
            width: 960px;
            margin: 0 auto;
        }

        .title {
            text-align: center;
        }

        .Garea {
            border: 1px solid #000;
            width: 300px;
            height: 550px;
            margin: 0 auto;
        }

        .Garea li {
            height: 90px;
        }

        .Garea li p {
            float: left;
            width: 73px;
            height: 100%;
            border: 1px #c9c9c9 solid;
        }

        .black {
            background-color: #000;
        }

3.js代码，记得先引入jquery

init(); // 初始化页面黑白块

        function init() {
            localStorage.setItem('score', '0'); // 初始化当前得分

            var html = ''
            for (let i = 0; i < 6; i++) {
                html += '<li>';
                var random = Math.floor(Math.random() * 3 + 1);
                for (let j = 0; j < 4; j++) {
                    var black = "";
                    if (j == random) { black = "black" };
                    html += '<p class="' + black + '" onclick="cai(this);"></p>';
                }
                html += '</li>';
            }
            $("ul").prepend(html)
            if (localStorage.getItem('maxScore')) {
                $('.maxScore').html('历史最高分为：' + localStorage.getItem('maxScore'))
            }
        }
        function cai(obj) {
            //判断是否点击最后一行
            if ($(obj).parent().index() != '5') {
                return false;
            }

            //判断是否踩到白块
            if (obj.className == "") {
                if (localStorage.getItem('score') > localStorage.getItem('maxScore') - 1) {
                    alert("Game Over! You get the higher score is " + localStorage.getItem('score'));
                } else {
                    alert("Game Over! Your score is " + localStorage.getItem('score'));
                }
                $('.maxScore').html('历史最高分为：' + localStorage.getItem('maxScore'))
                localStorage.setItem('score', '0')
                //游戏结束！
            } else {
                //游戏继续
                $(obj).parent().remove();
                var p = "";
                var random = Math.floor(Math.random() * 4 + 1);
                for (var i = 4; i >= 1; i--) {
                    var black = "";
                    if (i == random) { black = "black" };
                    p += '<p class="' + black + '" onclick="cai(this);"></p>';
                };

                var html = '<li>' + p + '</li>'
                $("ul").prepend(html);

                if (!localStorage.getItem('maxScore')) {
                    localStorage.setItem('maxScore', '0');
                }

                if (localStorage.getItem('score')) {
                    localStorage.setItem('score', localStorage.getItem('score') * 1 + 1)
                    if (localStorage.getItem('score') * 1 > localStorage.getItem('maxScore') * 1) {
                        localStorage.setItem('maxScore', localStorage.getItem('score') * 1)
                    }
                }
            }
        };

完成。