用js制作游戏：扫雷，源代码

最新推荐文章于 2024-05-13 19:25:21 发布

三岁九年

最新推荐文章于 2024-05-13 19:25:21 发布

阅读量788

点赞数

分类专栏： JS css3 文章标签：游戏 js

本文链接：https://blog.csdn.net/xh0112/article/details/112858813

版权

扫雷要求

游戏的区域：
9*9的区域
方格可以打开与标记
左键打开，显示数字，为周围格子的地雷数，右键标记
地雷
地雷随机分布
踩到地雷时，游戏结束
所有的地雷显示出来
连锁开大空方格
剩余地雷数与计时器
游戏胜利条件
所有的方格除了地雷都被打开了，则游戏胜利

一个方格所包含的信息：
坐标 x y
是否是一个地雷
周围的地雷数 = 9
二维数组中存储的是周围的地雷数

html格式代码

<body>
    <div class="level">
        <button type="button" name="button" class="choice-level">初级</button>
        <button type="button" name="button" class="choice-level">中级</button>
        <button type="button" name="button" class="choice-level">高级</button>
        <button type="button" name="button" class="restart">重新开始</button>
    </div>
    <div class="gameBox"></div>
    <div class="info">
        <p>剩余雷数：
            <span class="residue"></span>
        </p>
        <p>
            TIME：
            <span class="tick"></span>S
        </p>
        
    </div>
</body>

css样式代码：

*{
   
    margin: 0;
    padding: 0;
}
.gameBox{
   
    margin-top: 30px;
}
body{
   
    font-size: 0;
}
ul{
   
    list-style: none;
    text-align: center;
    overflow: hidden;
}
.col{
   
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    background-color: rgba(32, 226, 255, 0.4);
    border: 1px solid rgb(129, 129, 129);
    font-size: 16px;
    margin: 1.5px;
    vertical-align: top;
    position: relative;
}
.col:hover{
   
    background-color: #0af;
}
.col span{
   
    cursor: default;
}
.hide{
   
    display: none;
}
.boom{
   
    background: url("../img/boom.svg") no-repeat 2.5px 2px;
    background-size: 18px 18px;
}
.num-1{
   
    color: rgb(8, 153, 235);
}
.num-2{
   
    color: rgb(255, 45, 178);
}
.num-3{
   
    color:#16a085;
}
.num-4{
   
    color: #8e44ad;
}
.num-5{
   
    color: rgb(255, 167, 45);
}
.num-6{
   
    color:  rgb(8, 126, 176);
}
.num-7{
   
    color: #e67e22;
}
.num-8{
   
    color: #c0392b;
}
.img-flag{
   
    width: 18px;
    height: 18px;
    position: absolute;
    top: 3px;
    left: 3px;
}
.level{
   
    margin-top: 30px;
    font-size: 20px;
    text-align: center;
}
.level button{
   
    padding: 5px 8px;
    background-color: rgb(67, 183, 189);
    border: none;
    outline: none;
    border-radius: 3px;
    cursor: pointer;
    color: #fff;
}
.level button:hover{
   
    background-color: rgb(23, 132, 138);
}
.info{
   
    margin-top: 30px;
    font-size: 16px;
    text-align: center;
}

最低0.47元/天解锁文章

三岁九年

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
用js制作游戏：扫雷，源代码

扫雷要求游戏的区域：9*9的区域方格可以打开与标记左键打开，显示数字，为周围格子的地雷数，右键标记地雷地雷随机分布踩到地雷时，游戏结束所有的地雷显示出来连锁开大空方格剩余地雷数与计时器游戏胜利条件所有的方格除了地雷都被打开了，则游戏胜利一个方格所包含的信息：坐标 x y是否是一个地雷周围的地雷数 = 9二维数组中存储的是周围的地雷数html格式代码<body> <div class="level"> <bu
复制链接

扫一扫