扫雷游戏练习

最新推荐文章于 2022-09-22 21:39:55 发布

我我我我我我不是我

最新推荐文章于 2022-09-22 21:39:55 发布

阅读量560

点赞数

文章标签：扫雷游戏前端 js

本文链接：https://blog.csdn.net/qq_40119316/article/details/93347409

版权

本文介绍了作者在学习JavaScript过程中制作扫雷游戏的过程，详细阐述了游戏的各种操作逻辑，包括鼠标移入、点击、标记、双击等行为的处理，以及游戏结束条件的判断。并提供了相关代码和游戏截图。

摘要由CSDN通过智能技术生成

自己学习js的时候做了一个扫雷的游戏，但是还不够完善，还有一些bug。

脑图：

鼠标移入方块：未翻也未标记，修改边框颜色为背景颜色（搞定）

点击方块：（判断游戏结束）

   未翻也未标记：
       左键：（搞定）
           如果是雷，游戏结束（搞定）
           如果不是雷（搞定）
               计算周围雷数目（bombAround），翻 mark->true:显示(bombAround)，修改边框颜色为背景颜色（搞定）
               如果bombAround为0，递归翻周围不是雷的方块（搞定）

       右键：（搞定）
           标记为雷（旗），设置mark为true （搞定）

   已翻已标记：（搞定）
       如果方块内容有数字（寻找周围未翻方块）（搞定）
           mousedown:周围未翻方块的边框设置为背景颜色（搞定）
           mouseup:周围未翻方块的边框恢复 //choose为空？（mousedown和mouseup事件的闭包）（搞定）

       如果方块有标记：（搞定）
           右键：（搞定）
               如果标记有？，设置为fa（搞定）
               标记没有？如果标记有雷，设置为 fa ？（搞定）

双击（搞定）
   如果周围的雷数标记已足够，（搞定）
       翻：如果如果是雷，游戏结束（搞定）


游戏结束：
   取消定时器
   判断有雷的方块：
       显示雷图片
       如果没有旗，背景颜色和边框设置为红色，失败

判断游戏结束：（搞定）
   已翻和雷的数量（turnNumber）比总数少一：（搞定）

       找出的雷的数目(bombNumber)比雷总数少一，设置最后一个未翻的方块为旗，游戏结束。（搞定）
   全部弄完，游戏结束。（搞定）

代码：

index.css

*{
    padding: 0;
    margin: 0;
    list-style: none;
}
.minesweeper{
    width: 450px;
    height: 550px;
    margin: 20px auto 0; 
    background-color: rgb(184, 184, 184);
    border: 5px solid black;
    border-right-color: rgb(245, 242, 242);
    border-bottom-color: rgb(245, 242, 242);
    border-left-color: rgb(131, 130, 130);
    border-top-color: rgb(131, 130, 130);
    box-shadow: 0 0 15px;
}
.minesweeper div.navigation-wrapper{
    width: 90%;
    height: 80px;
    margin-top: 20px;
    margin-left: 5%;
    border: 4px solid black;
    border-right-color: rgb(245, 242, 242);
    border-bottom-color: rgb(245, 242, 242);
    border-left-color: rgb(131, 130, 130);
    border-top-color: rgb(131, 130, 130);
    position: relative;
}
/* 时间 */
.minesweeper div.navigation-wrapper .time{
    width: 90px;
    height: 60px;
    line-height: 60px;
    background-color: black;
    color: red;
    display: inline-block;
    margin-left: 10px;
    margin-top: 10px;
    font-size: 52px;
    text-align: center;
}
.minesweeper div.navigation-wrapper .reset{
    display: inline-block;
    width: 55px;
    height: 55px;
    background-color: rgb(184, 184, 184);
    border-left: 7px solid rgb(245, 242, 242);
    border-top: 5px solid rgb(245, 242, 242);
    border-right: 5px solid rgb(131, 130, 130);
    border-bottom: 5px solid rgb(131, 130, 130);
    margin-left: 69px;
    margin-top: 7.5px;
    vertical-align: 2px;
    line-height: 55px;
    font-size: 45px;
    text-align: center;
}

.minesweeper div.navigation-wrapper .mine-number{
    width: 90px;
    height: 60px;
    line-height: 60px;
    background-color: black;
    color: red;
    display: inline-block;
    margin-left: 59px;
    margin-top: 8px;
    font-size: 52px;
    text-align: center;
}
/* 方块父级 */
.minesweeper ul.squares-wrapper{
    width: 380px;
    height: 380px;
    margin-left: 6.5%;
    margin-top: 20px;
    border: 1px solid black;
    background-color: rgb(184, 184, 184);
    display: inline-block;
    border: 5px solid black;
    border-right-color: rgb(245, 242, 242);
    border-bottom-color: rgb(245, 242, 242);
    border-left-color: rgb(131, 130, 130);
    border-top-color: rgb(131, 130, 130);
}
.minesweeper ul.square-wrapper::after{
    content: "";
    display: block;
}
.minesweeper ul.squares-wrapper li.squares{
    width: 30px;
    height: 30px;
    background-color: rgb(184, 184, 184);
    float: left;
    border-left: 4px solid rgb(245, 242, 242);
    border-top: 4px solid rgb(245, 242, 242);
    border-right: 4px solid rgb(131, 130, 130);
    border-bottom: 4px solid rgb(131, 130, 130);
    line-height: 30px;
    text-align: center;
    font-size: 30px;
    position: relative;
}
.minesweeper ul.squares-wrapper li.squares i{
    visibility: hidden;   
}
.one{
    color: blue;
}
.two{
    color: green;
}
.three{
    color: red;
}
.four{
    color: rgb(8, 8, 98);
}
.five{
    color: rgb(68, 11, 11);
}
.six{
    color: orange;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="index.css">
    <link href="https://cdn.bootcss.com/font-awesome/5.8.1/css/all.css" rel="stylesheet">
    
</head>
<body>
    <!-- <i class="fa fa-flag" aria-hidden="true"></i>旗
    <i class="fa fa-bomb" aria-hidden="true"></i>雷
    <i class="fa fa-retweet" aria-hidden="true"></i>
    <i class="fa fa-question" aria-hidden="true"></i>问号 -->
    
    <div class="minesweeper">
        <!-- 功能栏 -->
        <div class="navigation-wrapper">
            <div class="time">0</div>
            <div class="reset"><i class="fa fa-retweet" aria-hidden="true"></i></div>
            <div class="mine-number">15</div>
        </div>
        <!-- 方块 -->
        <ul class="squares-wrapper">
            <li class="squares"><i class="fa" aria-hidden="true"></i></li>
            <li class="squares"><i class="fa" aria-hidden="true"></i></li>
            <li class="squares"><i class="fa" aria-hidden="true"></i></li>
            <li class="squares"><i class="fa" aria-hidden="true"></i></li>
            <li class="squares"><i class="fa" aria-hidden="true"></i></li>
            <li class="squares"><i class="fa" aria-hidden="true"></i></li>
            <li class="squares"><i class="fa" aria-hidden="true"></i></li>
            <li class="squares"><i class="fa" aria-hidden="true"></i></li>
            <li class="squares"><i class="fa" aria-hidden="true"></i></li>
            <li class="squares"><i class="fa" aria-hidden="true"></i></li>
            <li class="squares"><i class="fa" aria-hidden="true"></i&