基于HTML5打造的一款别踩白板小游戏

<div class="wrapper">        <div id="go">            <a href="javaScript:void(0)" id="go">Game Starta>        div>        <div id="main">div>div>

*{    margin:0;    padding:0;}

.wrapper{    margin:150px auto;    width:400px;    height:600px;    border:1px solid #ccc;    position: relative;    overflow: hidden;}

#go{    width:100%;    position: absolute;    top:0;    text-align: center;    z-index:99;}

#go a{    display:block;    height:100px;    width:400px;    color:cyan;    background-color: #000000;    text-decoration: none;    border-bottom:3px dashed #eee;    font-size:60px;    font-weight:600;}

#main{    width:400px;    height:600px;    position: relative;    top:-150px;    /* border:1px solid black; */}

.row{    width:400px;    height:150px;}

var main = document.getElementById('main'); // 获取dom元素var go = document.getElementById('go'); var speed = 5, num = 0, timer, flag = true; // 设置初始变量var colors = ['red', 'green', 'black', 'blue']; // 设置存放颜色的数组

function cDiv() {    var oDiv = document.createElement('div');// 获取一个随机数将每一行找到一个随机div 设置上颜色    var index = Math.floor(Math.random() * 4);        oDiv.setAttribute('class', 'row'); // 设置行class类名    for (var j = 0; j < 4; j++) { // for循环生成一行四个div        var iDiv = document.createElement('div');        oDiv.appendChild(iDiv); // 将每一个小div插入每一行中    }        if (main.childNodes.length == 0) { // 根据父级中是否有子元素   插入新生成的行        main.appendChild(oDiv);  // 如果父级为空  直接插入    } else {        main.insertBefore(oDiv, main.childNodes[0]); // 如果父级有元素   将新生成的一行插入到已有行数的最前面    }     var clickDiv = main.childNodes[0].childNodes[index]; // 根据随机数 设置一行中有颜色的div    clickDiv.setAttribute('class', 'i'); // 将此元素设置class类名  作为需要点击的标记    clickDiv.style.backgroundColor = colors[index]; // 同时设置上背景颜色}

function bindEvent() {    main.addEventListener('click', function (event) { // 给main添加点击事件        if (flag) {  // 根据flag值判断是否可以点击            var tar = event.target;  // 获得到点击的源事件            if (tar.className == 'i') { // 判断点击的块是否为有颜色的                 tar.style.backgroundColor = '#bbb'; // 改变背景颜色                 tar.classList.remove('i'); // 移除class类名                               num++;   // 计数++            } else {                                alert('游戏结束，得分：' + num); // 如果点到了白色的块   游戏结束                clearInterval(timer);                flag = false;            }                        if (num % 10 == 0) { // 如果当前分数为10的倍数   速度++                speed++;            }        }    })}

function move() {    clearInterval(timer);     timer = setInterval(function () { // 设置定时器        var step = parseInt(main.offsetTop) + speed; // 利用top值移动main区域        main.style.top = step + 'px';        if (parseInt(main.offsetTop) >= 0) { // 如果main区域移动到可视区域 创建一行新的元素            cDiv();            main.style.top = '-150px'; // 同时将main区域移动到可视区域上方        }        var len = main.childNodes.length; // 获得mian区域内的行数        if (len == 6) {  // 如果main区域内行数为6   即显示区域四行  上面新生成一行  下面一行                        for (var i = 0; i < 4; i++) { // 遍历最后一行的每一个div                                if (main.childNodes[len - 1].children[i].classList.contains('i')) { // 如果其中有一个包含没有被点击的   游戏结束                    alert('游戏结束，得分：' + num);                    clearInterval(timer);                    flag = false; // 游戏结束后不可以继续点击                }            }                        main.removeChild(main.childNodes[len - 1]); // 将展示过后的每一行移除        }    }, 20)    bindEvent(); // 点击事件}

// 开始按钮点击   开始移动 创建每一行元素function clickStart() {    go.addEventListener('click', function () {        go.style.display = 'none';        move();    });}clickStart();