JS实现别踩白块游戏

最终效果演示：

　　 JS实现别踩白块游戏

涉及知识点：

　　HTML+CSS+JavaScript

　　元素节点的增删

　　属性节点（class）的操作。

实现流程：

　 JS实现别踩白块游戏

1. 静态页面布局：

　　上中下三部分：①分数；②主界面是4x4的矩形格子；③开始按钮　

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>别踩白块Demo</title>
    </head>
    <link  rel="stylesheet" href="css/index.css"/>
    <body>
        <h2>
            <span>score: </span>
            <span id="score">0</span>
        </h2>
        <div id="main">
                <div id="con">
                    <div class="row">
                        <div class="cell"></div>
                        <div class="cell black"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                    </div>
                    <div class="row">
                        <div class="cell"></div>
                        <div class="cell black"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                    </div>
                    <div class="row">
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell black"></div>
                        <div class="cell"></div>
                    </div>
                    <div class="row">
                        <div class="cell black"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                    </div>
                </div>
            </div>
        <div class="btn">
            <button id="start">Start</button>
        </div>        
    </body>
</html>

HTML Code