How to implement the web version of the game of not stepping on white blocks (code example)

//创建div, 参数className是其类名
    function creatediv(className){
        var div = document.createElement('div');
        div.className = className;
        return div;
    }

    // 创造一个<div>并且有四个子节点<div>
    function createrow(){
        var con = $('con');
        var row = creatediv('row'); //创建div className=row
        var arr = creatcell(); //定义div cell的类名,其中一个为cell black

        con.appendChild(row); // 添加row为con的子节点

        for(var i = 0; i     
    function delrow(){
            var con = $('con');
            if(con.childNodes.length == 6) {
                   con.removeChild(con.lastChild);
               }
        }    

    //创建一个类名的数组，其中一个为cell black, 其余为cell
    function creatcell(){
        var temp = ['cell', 'cell', 'cell', 'cell',];
        var i = Math.floor(Math.random()*4);//随机生成黑块的位置
        temp[i] = 'cell black';
        return temp;
    }<p><strong>Let the black block move</strong></p>
<p>After you can create and destroy the div through js, we have to make the black block move. At this time We used the css settings mentioned earlier </p>
<div id="con"> hides a row of <div id="row">, we pass the DOM of js
Operate it to move downward, and set the timer to move every 30 milliseconds, so as to realize the smooth movement of the black block. While the black block is moving, we need to determine whether the black block has touched the bottom. If it hits the bottom, the game will fail. Stop calling
 move(), call the function fail() after hitting the bottom and the game fails. The specific method is as follows: <pre class="brush:php;toolbar:false">//使黑块向下移动    
    function move(){
        var con = $('con');
        var top = parseInt(window.getComputedStyle(con, null)['top']);

        if(speed + top > 0){
            top = 0;
        }else{
            top += speed;
        }            
        con.style.top = top + 'px';

        if(top == 0){
            createrow();
            con.style.top = '-100px';
            delrow();
        }else if(top == (-100 + speed)){
            var rows = con.childNodes;
            if((rows.length == 5) && (rows[rows.length-1].pass !== 1) ){
                fail();
            }
        }
    }

    function fail(){
            clearInterval(clock);
            confirm('你的最终得分为 ' + parseInt($('score').innerHTML) );
        }
点击黑块事件

让黑块动起来之后呢，就要考虑用户有没有点击到黑块，用户若点击到黑块我们要让所在那一行消失，那么就需要一个 judge 方法，具体如下：

//判断用户是否点击到了黑块，
function judge(ev){
    if (ev.target.className.indexOf('black') != -1) {
        ev.target.className = 'cell';
        ev.target.parentNode.pass = 1; //定义属性pass，表明此行row的黑块已经被点击
        score();
    }
}

nbsp;html>


    <meta>
    <title>别踩白块</title>
    <style>
        #score{
            text-align: center;}

        h2 {
            text-align: center;    }

        div{
            margin: 0 auto;
            width: 100px;
            height: 100px;}

        #main {
            width: 400px;
            height: 400px;
            background: white;
            border: 2px solid gray;
            margin: 0 auto;
            position: relative;
            overflow: hidden;}

        #con {
            width: 100%;
            height: 400px;
            position: relative;
            top: -100px;
            border-collapse:collapse;}

        .row{
            height: 100px;
            width: 100%;}

        .cell{
            height: 100px;
            width: 100px;
            float: left;}

        .black {
            background: black;}
    </style>



    <h2>score</h2>
    <h2>0</h2>
    <div>
        <div></div>
    </div>

<script>
    var clock = null;
    var state = 0;
    var speed = 4;

        /*
        *    初始化 init
        */
        function init(){
            for(var i=0; i<4; i++){
                createrow();
            }

            // 添加onclick事件
            $(&#39;main&#39;).onclick = function(ev){
                judge(ev);
            }

            // 定时器 每30毫秒调用一次move()
                clock = window.setInterval(&#39;move()&#39;, 30);
        }

        // 判断是否点击黑块
        function judge(ev){
            if (ev.target.className.indexOf(&#39;black&#39;) != -1) {
                ev.target.className = &#39;cell&#39;;
                ev.target.parentNode.pass = 1; //定义属性pass，表明此行row的黑块已经被点击
                score();
            }
        }

        // 游戏结束
        function fail(){
            clearInterval(clock);
            confirm(&#39;你的最终得分为 &#39; + parseInt($(&#39;score&#39;).innerHTML) );
        }

        // 创建div, className是其类名
        function creatediv(className){
            var div = document.createElement(&#39;div&#39;);
            div.className = className;
            return div;
        }

        // 创造一个<div class="row">并且有四个子节点<div class="cell">
        function createrow(){
            var con = $(&#39;con&#39;);
            var row = creatediv(&#39;row&#39;); //创建div className=row
            var arr = creatcell(); //定义div cell的类名,其中一个为cell black

            con.appendChild(row); // 添加row为con的子节点

            for(var i = 0; i < 4; i++){
                row.appendChild(creatediv(arr[i])); //添加row的子节点 cell
            }

            if(con.firstChild == null){
                con.appendChild(row);
            }else{
                con.insertBefore(row, con.firstChild);
            }
        }

        // 根据id来get DOM元素
        function $(id) {
            return document.getElementById(id);
        }

        // 创建一个类名的数组，其中一个为cell black, 其余为cell
        function creatcell(){
            var temp = [&#39;cell&#39;, &#39;cell&#39;, &#39;cell&#39;, &#39;cell&#39;,];
            var i = Math.floor(Math.random()*4);
            temp[i] = &#39;cell black&#39;;
            return temp;
        }

        //让黑块动起来
        function move(){
            var con = $(&#39;con&#39;);
            var top = parseInt(window.getComputedStyle(con, null)[&#39;top&#39;]);

            if(speed + top > 0){
                top = 0;
            }else{
                top += speed;
            }            
            con.style.top = top + &#39;px&#39;;

            if(top == 0){
                createrow();
                con.style.top = &#39;-100px&#39;;
                delrow();
            }else if(top == (-100 + speed)){
                var rows = con.childNodes;
                if((rows.length == 5) && (rows[rows.length-1].pass !== 1) ){
                    fail();
                }
            }
        }

        // 加速函数
        function speedup(){
            speed += 2;
            if(speed == 20){
                alert(&#39;你超神了&#39;);
            }
        }

        //删除某行
        function delrow(){
            var con = $(&#39;con&#39;);
            if(con.childNodes.length == 6) {
                   con.removeChild(con.lastChild);
               }
        }    

        // 记分
        function score(){
            var newscore = parseInt($(&#39;score&#39;).innerHTML) + 1;
            $(&#39;score&#39;).innerHTML = newscore;
            if(newscore % 10 == 0){
                speedup();
            }
        }

    init();
</script>