网页版 别踩白块

一、实验说明

别踩白块这个游戏相信很多人都在手机上玩过，今天我们就来做一个网页版的，先上一张游戏效果图，看看你有没有兴趣去实现这样一个小游戏。为了使代码尽量简单，逻辑清晰，去掉了很多的事件控制按钮，刷新页面即可以开始游戏，只保留了实现这个小游戏最重要的部分代码，让初学者也能很快看懂。

本试验涉及一下知识点：

• HTML
• CSS
• JavaScript

二、项目实战

1. 思路分析

我一般写 js 小游戏的思路是，先用 HTML 和 css 在游览器中将自己想要的静态效果写出来，然后再考虑如何用js来控制页面中各个元素的变化实现动态的游戏效果。所以参照手机APP版“别踩白块”，可以用通过HTML和css代码实现相似的静态效果。

2. HTML + css部分

可以用 div+css 布局来实现别踩白块的静态效果展示，直接上 HTML 代码，我来简要说下 HTML 思路，将主界面分解成一个4x4的大矩形格子，每一个方块代表其中一个小的矩形格，其中每一行的四个白块中有一个黑块，每一行中黑块位于那一列是随机生成的，但是我们这里现在是静态页面就自己确定了，然后通过 css 控制样式。

        <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>