原生JS实现扫雷小游戏

最新推荐文章于 2022-09-16 16:32:47 发布
最新推荐文章于 2022-09-16 16:32:47 发布
阅读量1.2k 收藏 8
点赞数
分类专栏： js 文章标签： js 扫雷 HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ireallyyourfather/article/details/82780050
版权

原生JS实现扫雷小游戏

  • HTML部分
  • CSS部分
  • JavaScript部分
  • 效果在这里插入图片描述
    -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>原生JS扫雷</title>
    <link rel="stylesheet" href="saolei.css"">
</head>
<body>
    <div class="wrapper">
        <div class="btn" id="btn"></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">
                    <!-- x图标 -->
                </div>
            </div>
        </div>
    </div>
    <script src="saolei.js"></script>
</body>
</html>

  • CSS部分代码

    {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    }
    .wrapper{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-image: url(‘zhutu.jpg’);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    }
    .btn{
    height: 140px;
    width: 170px;
    position: absolute;
    left: 80px;
    background-image: url(‘start.png’);
    background-size: 100% 100%;
    }
    .box{
    width: 500px;
    height: 500px;
    transform: perspective(800px) rotateX(45deg);
    margin: 20px auto;
    border-left: 1px solid #b25f27;
    border-top: 1px solid #b25f27;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
    display: none;
    }
    .flagBox{
    position: absolute;
    top: 50px;
    left: 50%;
    width: 200px;
    height: 50px;
    margin-left: -100px;
    color: #333;
    font-size: 20px;
    font-weight: 700;
    display: none;
    }
    .alertBox{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.2);
    }
    .alertBox .alertimg{
    width: 400px;
    height: 250px;
    /     background-image: url(‘gameover.jpg’); */
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 20px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    }
    .alertBox .alertimg .close{
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    background-image: url(‘x.jpg’);
    background-size: 100% 100%;
    cursor: pointer;
    }
    .block{
    width: 49px;
    height: 49px;
    border-right: 1px solid #b25f27;
    border-bottom: 1px solid #b25f27;
    box-shadow: 0 0 4px #333 inset;
    background-image: url(‘caodi.jpg’);
    float: left;
    }
    .show{
    background-image: url(‘lei.jpg’);
    background-size: 100% 100%;
    }
    .num{
    background: #ecd0a1;
    line-height: 49px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    }
    .flag{
    background-image: url(‘qizi.jpg’);
    background-size: 100% 100%;
    }

  • JS代码

      - //点击开始游戏===>动态生成一百个小格子 ===> 100 div
 //leftclick 没有雷 显示数字(代表以当前小格子为中心,周围八个格子的雷数) 扩散 (当前周围八个格子都没有雷) 
 //leftclick 有雷 gameover
 //rightclick 没有标记并且没有数字==>进行标记 有标记==>取消标记  ==>标记是否正确, 10都正确标记,提示成功
 //已经出现数字===>无效果
 
 var statrBtn = document.getElementById('btn');
 var box = document.getElementById('box');
 var flagBox = document.getElementById('flagBox');
 var alertBox = document.getElementById('alertBox');
 var alertimg = document.getElementById('alertimg');
 var closeBtn = document.getElementById('close');
 var score = document.getElementById('score');
 var minesNum;//雷的数量
 var mineOver;//被标记的雷的数量
 var block;//取一百个小格子
 var mineMap = [];//代表当前小格子是否有雷
 var startGame = true;//避免点开始游戏一直生成小格子
 
 bindEvent();
 function bindEvent() {
     statrBtn.onclick = function () {
         if(startGame == true){
             box.style.display = 'block';
             flagBox.style.display = 'block';
             init();
             startGame = false;
         }   
     }
     box.oncontextmenu = function () {//在box内取消默认右键点击
         return false;
     }
     box.onmousedown = function (e) {//判断鼠标点击的是左键还是右键
         var event = e.target;//获取当前点的是哪个小格子   target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
         if (e.which == 1) {//which==1 是左键
             leftClick(event);
         } else if (e.which == 3) {//which==3 代表右键点击
             rightClick(event);
         }
     }
     closeBtn.onclick = function () { //点X之后所有都消失
         box.style.display = 'none';
         flagBox.style.display = 'none';
         alertBox.style.display = 'none';
         box.innerHTML = '';
         startGame = true;
     }
 }
 
 function init() {//生成一百个小格子 并且插入box 同时生成10个随机的雷
     minesNum = 10;
     mineOver = 10;
     score.innerHTML = mineOver;
     for (var i = 0; i < 10; i++) {//十行
         for (var j = 0; j < 10; j++) {//十列
             var con = document.createElement('div');
             con.classList.add('block');//给生成的每个小格子加一个类名
             con.setAttribute('id', i + '-' + j);//给每个小格子加一个id id是i和j的坐标值
             box.appendChild(con);
             mineMap.push({ mine: 0 });//每次生成小格子往数组里面传, 传一个参数mine 初始值0
         }
     }
     block = document.getElementsByClassName('block');//把一百个小格子利用同类名取出来
     while (minesNum) {
         var mineIndex = Math.floor(Math.random() * 100);//雷通过随机数出现的位置
         if (mineMap[mineIndex].mine === 0) {//没有雷
             mineMap[mineIndex].mine = 1;//防止同一位置重复生成雷
             block[mineIndex].classList.add('isLei');//随机出现雷的标记
             minesNum--;
         }
     }
 }
 
 function leftClick(dom) {//点左键,看哪个小格子被点击了
     if(dom.classList.contains('flag')){//被标记之后不能点击
         return;
     }
     var isLei = document.getElementsByClassName('isLei');
     if (dom && dom.classList.contains('isLei')) {// 判断点击的是雷          contains返回布尔值，判断指定的类名是否存在。 
         // console.log('gameOver');
         for (var i = 0; i < isLei.length; i++) {//如果点击的是雷 把所有的雷展示出来
             isLei[i].classList.add('show');
         }
         setTimeout(function () {//让弹出的gameover延迟弹出
             alertBox.style.display = 'block';
             alertimg.style.backgroundImage = 'url("gameover.jpg")';
         }, 800);
     } else {//不是雷的情况
         var n = 0;
         var posArr = dom && dom.getAttribute('id').split('-');              //dom存在并且getAttribute到id的值是一个字符串 .split变成数组
         var posX = posArr && + posArr[0]; //x值是数组第一位  
         var posY = posArr && + posArr[1]; //y值是数组第二位
         dom && dom.classList.add('num'); //点到数字的背景
         for (var i = posX - 1; i <= posX + 1; i++) { //周围八个数
             for (var j = posY - 1; j <= posY + 1; j++) {
                 var aroundBox = document.getElementById(i + '-' + j);//把周围八个取出来
                 if (aroundBox && aroundBox.classList.contains('isLei')) {
                     n++;
                 }
             }
         }
         //    i-1,j-1      i-1,j       i-1,j+1  
         //     i,j-1        i,j         i,j+1
         //    i+1,j-1      i+1,j       i+1,j+1
         dom && (dom.innerHTML = n);
         if (n == 0) {//扩散情况     当点击到的是0,再遍历周围八个每一个
             for (var i = posX; i <= posX + 1; i++) { //再遍历周围八个
                 for (var j = posY; j <= posY + 1; j++) {
                     var nearBox = document.getElementById(i + '-' + j);
                     if (nearBox && nearBox.length != 0) {
                         if(!nearBox.classList.contains('check')){//如果不存在classlist不包括check,每个判断一次
                             nearBox.classList.add('check')//显示完的加一个标记 被判断过的 被显示过的
                             leftClick(nearBox);
                         }//n = 0的时候结束 
                     }
                 }
             }
         }
     }
 }
 
 function rightClick(dom){//右键点击 标旗          有数字的就不能插旗了
     if(dom.classList.contains('num')){//判断当前被点击的dom的classlist是否包含点完出数字的num
         return; //不做任何动作
     }
     dom.classList.toggle('flag');  //toggle() 方法切换元素的可见状态。 如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
     if(dom.classList.contains('isLei') && dom.classList.contains('flag')){//如果点到的是雷而且插上了红旗
         // 剩余雷数
         mineOver--;
     }
     if(dom.classList.contains('isLei') && !dom.classList.contains('flag')){//如果有雷 没有插旗
         mineOver ++;
     }
     score.innerHTML = mineOver;
     if(mineOver == 0){//当剩余雷是0的时候
         alertBox.style.display = 'block';
         alertimg.style.backgroundImage = 'url("baby.jpg")';
         setTimeout(function(){
             alert('恭喜!!!!!再来一遍吧!!!!!!');
         },2500);
     }
 }
Ireallyyourfather
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于javascript扫雷小游戏，以前上学经常玩
编程界明世隐的博客
05-05 7467
引言： 扫雷是系统自带的经典小游戏，以前上学那会上机的时候就经常玩这个，趁着五一假期的最后一天，用canvas编写了这个小游戏，看着还行，不知道会不会有什么我没发现的bug，难度目前是设置成简易的，如果要改难度，代码稍做修改即可。 效果图 实现思路 1.创建9行9列的二维数组。 2.设置雷：随机行数 i 和列数 j，根据随机到 i、j 从二维数组中取出对应的元素，将取到的元素设置一个属性type等于1，表示当前元素已经是雷，并且递增雷计数器，然后递归调用；如果取到的元素已经是雷了，则跳过继续执
js扫雷游戏
qq_45921597的博客
09-14 985
【代码】js扫雷游戏。
原生JS：100行js代码带你实现【像素鸟】小游戏（完整代码+素材图片）
热门推荐
小安驾到的博客
09-16 1万+
100行代码带你实现经典小游戏【像素鸟】，附有项目全部素材文件和完整代码
原生JS 实现小游戏 打砖块
m0_64191440的博客
08-18 1324
这是一个游戏，这不仅仅是一个游戏，我们的目标不是为了开发游戏，而是为了掌握常见函数和基本开发思路 (多练多练)实现代码之前 先有思路 实现具体的功能 和进行不断的调式以下是本人在培训时期老师写的代码 思路图为老师所画。...
原生js，实现一个终端小游戏！
学而不思则罔,思而不学则殆
12-27 2276
原生js，实现一个终端小游戏！
原生js实现扫雷小游戏
11-29
【原生JS实现扫雷小游戏】是一篇关于利用JavaScript编程语言设计并实现经典电脑游戏“扫雷”的技术文章。在JavaScript的世界里，开发者可以利用HTML和CSS构建游戏界面，然后用JavaScript来处理游戏逻辑和交互。这篇...
基于原生JavaScript实现的扫雷小游戏.zip
10-23
基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的...
原生js实现的扫雷小游戏
02-26
【原生JS实现的扫雷小游戏】是一款基于JavaScript语言开发的经典电脑游戏，旨在提供一个纯JavaScript环境下的扫雷体验。这款游戏的实现展示了JavaScript在构建交互式网页应用方面的强大能力，尤其是对于事件处理、...
【JS小游戏】游戏编程初体验之扫雷
莫忘
02-17 1080
前言昨天接触到一个叫做net的游戏，类似接点灯的那种类型，在一个方阵中随机分配了一些点，然后给了一些管道让玩家将其连通才算过关，完了几把就上瘾了。但是这个游戏是PC端的单机游戏，不方便我在其他地方随时可以玩，于是想自己写一个类似的游戏出来，但是发现自己水平有限，一时没有想出该组合实现管道分布的算法，就只能留着后面慢慢想了，我就退而求其次的写了一个扫雷游戏
原生js小游戏之扫雷
domino~~的博客
03-14 926
原生js小游戏之扫雷 在经过一段时间js的学习之后，决定去使用所学的知识去锻炼下自己，因此就写了这个扫雷的小游戏。目前还有两个未解决的bug是现在我查阅资料无法改的。不过这个小游戏还是可以玩的。 对于扫雷，要实现在我们的网页上...
原生js扫雷游戏
02-24
基于原生js写的扫雷游戏，代码里面有详细注释，大家可以看看。
HTML+JavaScript实现扫雷小游戏
10-16
主要为大家详细介绍了HTML+JavaScript实现扫雷小游戏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js原生实现超级玛丽小游戏
12-21
js原生
Web版 扫雷 JS实现
iMeta
05-26 6101
这几天中毒了，无比迷恋扫雷游戏（摔！明明是机房机器渣到只能玩扫雷），于是在上网络互联与路由课的时候，写了个Web版的扫雷游戏，起码能玩了，嘿嘿，晚上又增加了一些有趣的东东，还有个彩蛋。DEMO：http://imgbattle.cn/mine/其中雷区扩展的时候，用的BFS算法。考虑到所有节点都必须被储存，因此BFS的空间复杂度为 O(|V| + |E|)，其中 |V| 是节点的数目，而 |E| 是
原生JS写扫雷游戏
qq_28919991的博客
10-01 797
相信大家都玩过扫雷这个在经典不过的游戏吧 小编还记得当时在机房，将电脑断网，然后玩windows自带的扫雷游戏 重点是：我竟然玩了一节课！ 咳咳 言归正传 写扫雷游戏的思路： 1.动态生成一百个(可以更多)div块 2.左键点击事件(显示周围的地雷数、扩散算法) 3.右键点击事件(插旗与取消插旗、胜利事件) 多说一句：所谓的扩散就是当点击的元素显示的数字为0即周围没有雷时，又点击它周围显示的数为...
用原生js写2048小游戏
Alisen
03-20 5416
2048-game         #game {       display: none;       position: absolute;       left: 0px;       top: 0px;       right: 0px;       bottom: 0px;       background-color: #9DA5C3;       opac
原生Js实现扫雷
qq_40908428的博客
10-26 154
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; .box{ width: 300px; height: 300px;
开题报告宠物医院管理系统的设计与实现 已通过开题答辩的.docx
07-25
随着人们生活水平的提高和精神需求的增加，宠物已经成为很多家庭的重要成员，宠物市场的规模和潜力也不断扩大。宠物医院作为宠物健康保障的重要机构，需要适应市场的发展和变化，提供更加专业和便捷的服务。宠物医院的业务和信息涉及多个方面，如科室信息、医生信息、坐诊信息、药品信息、挂号信息、网站公告信息等。如果采用传统的手工或半自动化的管理方式，会造成信息的分散、混乱、更新困难、查询不便等问题，影响管理的效率和质量。系统能够通过计算机技术和网络技术对宠物医院业务进行集中管理。它可以实现信息的录入、存储、查询、修改、删除、统计、分析、展示等功能，方便宠物医院的管理人员和工作人员进行业务操作和决策支持。宠物医院管理系统还可以利用网络技术，向宠物主人和宠物爱好者提供在线的服务和咨询，方便宠物主人和宠物爱好者了解和关爱自己的宠物，增强宠物医院的社会影响力和竞争力。综上所述，宠物医院管理系统是一个具有实际意义和应用价值的选题，它可以为宠物医院的管理和服务提供有效的支持，为宠物主人和宠物爱好者提供便捷的服务和咨询，为宠物的健康和福利做出贡献。
主成分分析算法Python代码.txt
最新发布
07-25
数学建模模型python实例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值