纯JS实现简易扫雷小游戏网页项目

最新推荐文章于 2024-05-09 14:17:00 发布

Josephine_HuHu

最新推荐文章于 2024-05-09 14:17:00 发布

阅读量3.9k

点赞数 11

分类专栏：前端练手小项目文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45007812/article/details/118051618

版权

文章目录

前言

本项目仅用于个人学习分享，为各位前端学习小伙伴们提供个人学习过程和总结。本项目涉及的技术栈比较有限（纯HTML+CSS+JS），同时也只由个人单独完成仅具备基本功能，故不排除各种待迭代开发的bug，新手可用于练习JS，大佬也请多多指教。

提示：以下是本篇文章正文内容，下面案例可供参考

一、扫雷简介

扫雷是一款大众类的益智类游戏，于1992年发布，是我个人比较喜欢的游戏之一。最近准备找实习故用这个作为第一个真正练手的项目，共花费一下午时间完成其基本功能，存在的问题还有待解决。

扫雷玩法不做过多赘述，有需要的同学可参考该地址进行了解学习：

扫雷怎么玩（扫雷游戏规则技巧图解） - 华风扬 (uxxsn.com)

下图为三种等级的项目显示效果：

二、步骤

1.创建项目文件结构

文件结构如下（VSCode编译器示例）：

2.搭骨架和基础样式（HTML+CSS）

step 1：首先引入创建好的CSS文件和JS文件；

step 2：分析页面结构——由以下三部分组成

整个页面用一个div，主体部分分为三个div，分别是游戏级别（.level）、游戏界面（.gameBox）、剩余雷数（.mineNum）；其中.level盒子中每个元素分别是一个button，.gameBox由JS代码动态生成，.div中剩余雷数值用span包装等待JS动态赋值。

代码如下（HTML）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hzj的扫雷小游戏</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div id="mine">
        <div class="level">
            <button class="active">初级</button>
            <button>中级</button>
            <button>高级</button>
            <button>重新开始</button>
        </div>
        <div class="gameBox">

        </div>
        <div class="info">
            剩余雷数：<span class="mineNum"></span>
        </div>
    </div>
    <script src="js/index.js"></script>
</body>

</html>

step 3：书写页面样式

父元素居中放置——margin: 50px auto;

子元素欲在父亲中居中显示——text-align: center;

设置鼠标指针光标样式——cursor: pointer;

默认初级等级为选中状态；

设置雷格阴影效果——border-color: #fff #a1a1a1 #a1a1a1 #fff;

将地雷和小红旗作为背景图片动态显示；

代码如下（CSS）：

#mine {
    margin: 50px auto;
}

.level {
    text-align: center;
    margin-bottom: 10px;
}

.level button {
    padding: 5px 15px;
    background: #02a4ad;
    border: none;
    color: #fff;
    /* outline: 3px; */
    border-radius: 3px;
    cursor: pointer;
}

.level button.active {
    background: #00abff;
}

table {
    border-spacing: 1px;
    background: #929196;
    margin: 0 auto;
}

td {
    padding: 0;
    width: 20px;
    height: 20px;
    background: #ccc;
    border: 2px solid;
    border-color: #fff #a1a1a1 #a1a1a1 #fff;
    text-align: center;
    line-height: 20px;
    font-weight: bold;
}

td.zero {
    background-color: #a09f9f;
    background: #a09f9f;
}

td.one {
    backgr

最低0.47元/天解锁文章

Josephine_HuHu

关注

11
点赞
踩
33

收藏

觉得还不错? 一键收藏
3
评论
纯JS实现简易扫雷小游戏网页项目

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、pandas是什么？二、使用步骤 1.引入库 2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了...
复制链接

扫一扫