前端游戏之初步扫雷

最新推荐文章于 2023-08-09 22:17:29 发布

原创

最新推荐文章于 2023-08-09 22:17:29 发布 · 436 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#扫雷 #javascript

扫雷应该算是最基础的js入门游戏吧，所以刚学完js就来写写扫雷的代码，初步思路想了很久，得出一个不算正规的扫雷思路，先放下图看看：
在这里插入图片描述
注：上图中的字体颜色，是我为了查看每个小方块执行的是哪步的注释，可忽略。
具体思路：
·········先用ul>li，做一个由9*9的小方格组成一个大方块——>就是扫雷的界面，在li中写入每个格子的内容（空，数字，炸弹），再将字体颜色和小方块的背景颜色设置一致，使内容能够象征性的消失，然后再通过点击事件，改变所点击小方块的字体和背景颜色，使其又“出现”，以此实现扫雷的效果。
········以上的表面代码都比较好实现，但是有一点需要花些功夫，就是当我所点击的小方格为空时，需要连接触发周边的内容，使空方格周围的上下左右的内容都显示出来，且又遇到为空的邻近方格，需要再进行上下左右的显示，接下来以此类推，得到最终的点击空方格触发周围一片的显示效果。
下面介绍下具体代码，首先是扫雷界面的设定：
html代码：

<ul class="ul1">
        <br/>
        <li></li>
        <li></li>
        <li></li>
        <li>1</li>
        <li>*</li>
        <li>1</li>
        <li></li>
        <li></li>
        <li></li><br/>
        <li></li>
        <li></li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li></li>
        <li></li>
        <li></li>
        <li></li><br/>
        <li>1</li>
        <li>1</li>
        <li>2</li>
        <li>*</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li></li><br/>
        <li>1</li>
        <li>*</li>
        <li>3</li>
        <li>2</li>
        <li>2</li>
        <li>1</li>
        <li>*</li>
        <li>1</li>
        <li></li><br/>
        <li>1</li>
        <li>1</li>
        <li>2</li>
        <li>*</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li></li><br/>
        <l