网页扫雷游戏 - part 1🥳

前些天在网上闲逛，看到了有人制作了网页版经典游戏扫雷，正好自己也在学习JavaScript只是，于是自己尝试着做一个网页版的扫雷游戏。

写代码之前

在写代码之前，需要对整个项目进行需求分析和实现顺序。

确定页面结构
实现基本页面结构
实现基本页面样式
JavaScript实现基本逻辑
优化代码
bug测试及处理

基本页面结构

基本的页面结构比较简单，只需要几个按钮，再加个扫雷游戏主区域，页脚需要显示剩余的雷的数量。

按钮区域
- 用来切换初级/中级/高级模式，以及重新开始按钮。
主区域
- 用来游戏操作的区域，左键点击显示数字或雷，右键进行标记。
页脚区域
- 显示剩余的雷的数量。

代码实现

game.html:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js-扫雷游戏</title>
</head>
<body>
    <div>
        <div>
            <button>初级</button>
            <button>中级</button>
            <button>高级</button>
            <button>重新开始</button>
        </div>
        <div></div>
        <div>
            <span>剩余雷数：</span><span></span>
        </div>
    </div>
</body>
</html>

首先我把lang改成了中文(<html lang="zh">)，省的预览的时候浏览器老是弹出是否翻译 。
body下有一个div，其中有三个div，即三个区域。

class属性设置

接下来需要设置div的class属性，方便后续操作。
其中在页脚区域需要有两个span，后面的一个span需要实时显示剩余的雷的数量,所以需要单独给个span，而且有id属性-MineNum。
game.html:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js-扫雷游戏</title>
</head>
<body>
    <div class="main-body">
        <div class="btn-area">
            <!--  class="active" -->
            <button>初级</button>
            <button>中级</button>
            <button>高级</button>
            <button>重新开始</button>
        </div>
        <div class="games-area"></div>
        <div class="info-area">
            <span>剩余雷数：</span><span id="MineNum"></span>
        </div>
    </div>
</body>
</html>

基本页面样式

由于三个区域的顺序是从上到下依次排序，需要对中，故使用flex布局很方便。

基本页面样式，game.css:

:root{
    --main: rgb(255, 193, 7);
    --mainActive: rgb(255, 193, 7, 0.8);
    --out: rgb(248, 219, 131);
    --red: #dc3545;
    --white: #fefefe;
    --black: #010101;
    --boxShadow: rgba(100,100,100,0.4);
    --btnBack: #f1f2f1;
}
.main-body{
    width: 100%;height: auto;
    background-color: var(--white);
    /* flex 布局 */
    display: flex;
    align-items: center;
    flex-direction: column;
}
.btn-area{
    margin: 10px 0;
}
/* 按钮样式 */
.btn-area button{
    padding: 5px 10px;
    outline: none;background: none;border: none;
    background-color: var(--main);
    border:3px solid var(--white);
    color: var(--white);
    font-size: 16px;
    cursor: pointer;
    transition: .3s ease-in-out;
    border-radius: 3px;
}
/* 按钮-鼠标移入样式  */
.btn-area button:hover{
    background-color: var(--mainActive);
}
/* 按钮-鼠标按下去时样式 */
.btn-area button:active{
    border: 3px solid var(--out);
    border-radius: 3px;
    background-color: var(--mainActive);
}
/* 按钮按下之后的样式 */
.btn-area button.active{
    background-color: var(--red);
}

.info-area{
    margin-top: 5px;
}

当然，需要在html中引入：<link rel="stylesheet" href="game.css">

首先我在页面中定义了一些颜色变量，方便颜色管理。

:root{
    --main: rgb(255, 193, 7);
    --mainActive: rgb(255, 193, 7, 0.8);
    --out: rgb(248, 219, 131);
    --red: #dc3545;
    --white: #fefefe;
    --black: #010101;
    --boxShadow: rgba(100,100,100,0.4);
    --btnBack: #f1f2f1;
}