Web-js实现扫雷小游戏----代码详解

最新推荐文章于 2024-07-28 12:16:56 发布

ぴ倾城泪

最新推荐文章于 2024-07-28 12:16:56 发布

阅读量889

点赞数 6

文章标签： js 游戏 javascript css html

本文链接：https://blog.csdn.net/qq_47815128/article/details/109450145

版权

本文详细讲解了如何使用JavaScript、HTML和CSS实现经典的扫雷小游戏。通过阅读，读者可以了解到游戏的逻辑实现和界面展示的技术细节。

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

Web-js实现扫雷小游戏----代码详解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>经典扫雷</title>
    <link rel="icon" href="favicon.ico">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .game-all-area{
            background-image: url("imgs/bg.jpg");
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .game-head{
            height: 70px;
            width: 100%;
        }
        .game-head>h1{
            line-height: 70px;
            color:rgb(187 187 187);
            font-size: 40px;
            text-align: center;
        }
        .game-body{
            flex: 1;
            margin: auto;
            /* overflow: hidden;*/
            /*  display: none;*/
        }
        .game-index{
            margin-top: 150px;
            height: 260px;
            /* display: none;*/

        }
        .game-index>button{
            position: relative;
            height: 70px;
            width: 500px;
            display: block;
            margin-bottom: 20px;
            font-size: 25px;
            text-align: center;
            line-height: 70px;
            cursor: pointer;
            color: lightgray;
            border-radius: 20px;
            border: none;
            outline: none;
        }
        .game-index>button:after{
            content: "";
            height: 70px;
            width: 500px;
            position: absolute;
            top: 0;
            left: 0;
            /* display: block;*/
            background-color: #000000;
            opacity: 0.3;
            display: none;
        }
        .game-index>button:hover:after{
            display: block;
        }
        .btn-game-start{
            background-color: rgb(129,188,1);
        }
        .btn-game-help{
            background-color: rgb(226,72,49);
        }
        .btn-game-rule{
            background-color: rgb(232,138,12);
        }
        .game-cheak{
            height: 0px;
            /*width: 600px;*/
            overflow: hidden;
        }
        .game-cheak>button{
            position: relative;
            height: 60px;
            width: 450px;
            display: block;
            margin-bottom: 20px;
            font-size: 20px;
            text-align: center;
            line-height: 60px;
            cursor: pointer;
            color: lightgray;
            border-radius: 20px;
            border: none;
            outline: none;
            margin-left: 5px;
        }
        .btn-game-slef{
            background-color: cornflowerblue;
        }
        .game-cheak>button:after{
            content: "";
            height: 60px;
            width: 450px;
            position: absolute;
            top: 0;
            left: 0;
            /* display: block;*/
            background-color: #000000;
            opacity: 0.3;
            display: none;
        }
        .game-cheak>button:hover:after{
            display: block;
        }
        .game-rule,.game-help{
            height: 400px;
            width: 500px;
            background-color: gray;
            float: top;
            display: none;
            margin-top: -150px;
            border-radius: 20px;
        }
        .game-rule-head-close-btn,.game-help-head-close-btn{
            font-size: 25px;
            color: lightgray;
            text-align: center;
            line-height: 25px;
            height: 25px;
            width: 40px;
        }
        .game-rule-head,.game-help-head{
            height: 70px;
            display: flex;
            justify-content: space-between;
        }
        .game-rule-head-title,.game-help-head-title{
            height: 60px;
            width: 470px;
            font-size: 25px;
            color: lightgray;
            text-align: center;
        }
        .game-rule-inner,.game-help-inner p{
            font-size: 20px;
            color: lightgray;
            margin-top: 15px;
            text-indent: 2em;
            line-height: 25px;
        }
        .game-area{
            flex: 1;
            display: none;
        }
        .lei-area{
            height: 28px;
            width: 28px;
            float: left;
            border: 1px solid;
            border-color: hsl(0deg 0% 63%) hsl(0deg 0% 63%) hsl(0deg 0% 63%) hsl(0deg 0% 63%);
        }
        .game-area-head{
            height: 40px;
            width: 450px;
            margin: 0px auto;
            display: flex;
        }
        .game-area-img{
            background-image: url("imgs/true.png");
            height: 40px;
            width: 40px;
        }
        .game-area-steps{
            text-align: center;
            line-height: 40px;
            font-size: 20px;
            color: white;
            flex: 1;
        }
        .game-area-time{
            text-align: center;
            line-height: 40px;
            font-size: 20px;
            color: white;
            flex: 1;
        }
        .game-area-return{
            height: 300px;
            width: 150px;
            position: fixed;
            top: 130px;
            right: 200px;
        }
        .game-area-return button{
            height: 60px;
            width: 150px;
            margin-bottom: 10px;
            border-radius: 20px;
            margin-top: 10px;
            font-size: 20px;
            color: lightgray;
            text-align: center;
            line-height: 60px;
            border: none;
            outline: none;
        }
        .game-area-return-btn1{
            background-color: blue;
        }
        .game-area-return-btn2{
            background-color: orange;
        }
        .game-area-return-btn3{
            background-color: red;
        }
    </style>
</head>
<body>
<div class="game-all-area">
    <!--游戏头部----开始-->
    <div class="game-head">
        <h1>MINESWEEPER</h1>
    </div>
    <!--游戏头部----结束-->

    <!--游戏初始界面----开始-->
    <div class="game-body" id="game-body">
        <!--游