纯js实现扫雷小游戏

最新推荐文章于 2024-07-28 16:59:25 发布

叨唠

最新推荐文章于 2024-07-28 16:59:25 发布

阅读量4.7k

点赞数 8

分类专栏：前端web JavaScript 项目文章标签： web前端扫雷游戏 JavaScript

本文链接：https://blog.csdn.net/zyz00000000/article/details/82956261

版权

项目地址：https://github.com/zhuyuzhu/sweep-mine

git地址：https://github.com/zhuyuzhu/sweep-mine.git

（1）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">
     <link rel="stylesheet" href="./sweepMine.css">
     <title>JavaScript实现web扫雷小游戏</title>
 </head>
 <body>
     <div class="wrapper">
        <div class="btn" id="startBtn"></div>
        <div class="box" id="box"></div>
        <div class="flagBox" id="flagBox">
            当前还有地雷个数：
            <span id="score">10</span>
        </div>
        <div class="alertBox" id="alertBox">
            <div class="alertImg" id="alertImg">
                <div class="close" id="close"></div>
            </div>
        </div>
     </div>
     <script src="./sweepMine.js"></script>
 </body>
 </html>

（2）css代码：

*{
    padding: 0px;
    margin: 0px;
}
.wrapper {
    width: 100%;
    height: 700px;
    position: fixed;
    top: 0px;
    left: 0px;
    background-image: url('./pictures/background.jpg');
    background-size: 100% 100%;
}
.btn {
    height: 70px;
    width: 170px;
    position: absolute;
    left: 50px;
    background-image: url('./pictures/startGame.jpg');
    background-size: 100% 100%;
    cursor: pointer;
}
.box {
    he