扫雷

最新推荐文章于 2024-10-10 10:50:43 发布
最新推荐文章于 2024-10-10 10:50:43 发布
阅读量166 收藏
点赞数 1
分类专栏： 小游戏 文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53921048/article/details/111999567
版权

扫雷小游戏
注意：
代码中有需要替换的图片路径，需根据自己图片位置更改
HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.5">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>扫雷</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div id="box">
        <div id="baozha"></div>
        <ul id="ul"></ul>
    </div>
    <!-- 雷数 -->
    <div id="leishu">
        雷：<input type="text" id="inp" placeholder="默认30">
        <button id="btn">确定</button>
    </div>

    <script src="js/index.js"></script>
</body>
</html>

js

// 雷的个数
var leishu = 30; 
// 格子的个数
var kuan = 20;
var gao = 20;
var geshu = kuan * gao;
var box = document.getElementById('box');
box.style.width = kuan * 30 + 30 + 'px';
box.style.height = gao * 30 + 30 + 'px';

var inp = document.getElementById('inp');
var btn = document.getElementById('btn');
var ul = document.getElementById('ul');
btn.onclick = function(){
    var inpV = inp.value;
    if(!isNaN(inpV) && inpV > 0){
        if(inpV > geshu){
            inpV = geshu;
        }
        ul.innerHTML = '';
        saolei(inpV);
    }else{
        alert('请输入数字或正值');
    }
    
}

saolei(leishu);
function saolei(leishu){
    var lei = '<img src="images/bomb.jpg" alt="">';//此处为雷图片
    var leishu = leishu || 30;
    // --------------------------------------生成小格子------------------------------------------

    var arr = [];
    var arr1 = [];
    for(var i = 0; i < geshu; i++){
        var li = document.createElement('li');
        var div = document.createElement('div');
        li.setAttribute('zdy',i);
        li.setAttribute('zuodianji','0');
       
        li.appendChild(div);
        ul.appendChild(li);
        arr.push(li);
        arr1.push(li);
        // 给li点击事件
        // 右键
        li.onclick = dianji;
        // 左键
        li.oncontextmenu = zuo;
    }
    // -----------------------------------------随机生成雷----------------------------------------
    var lis =  ul.childNodes;
    var liLength = ul.childNodes.length;
    for(var i = 0; i < leishu; i++){
        var random = Math.floor(Math.random() * liLength);
        if(arr1[random] !== 'NaN'){
            lis[random].children[0].innerHTML = lei;
            arr1.splice(random,1,'NaN');
        }else{
            i--;
        }
        
    }
    
    // ----------------------------------------------生成数字--------------------------------------
    for(var i = 0; i < liLength; i++){
        sun(i,kuan);
    }
    function sun(i,w,h){
        var a = 0;
        if(lis[i].children[0].innerHTML !== lei){
            if(lis[i - (w+1)] && lis[i - (w+1)].children[0].innerHTML == lei && i % w !== 0){
                a += 1;
            }
            if(lis[i - w] && lis[i - w].children[0].innerHTML == lei){
                a += 1;
            }
            if(lis[i - (w-1)] && lis[i - (w-1)].children[0].innerHTML == lei && i % w !== (w-1)){
                a += 1;
            }
            if(lis[i - 1] && lis[i - 1].children[0].innerHTML == lei && i % w !== 0){
                a += 1;
            }
            if(lis[i + 1] && lis[i + 1].children[0].innerHTML == lei && i % w !== (w-1)){
                a += 1;
            }
            if(lis[i + (w-1)] && lis[i + (w-1)].children[0].innerHTML == lei && i % w !== 0){
                a += 1;
            }
            if(lis[i + w] && lis[i + w].children[0].innerHTML == lei){
                a += 1;
            }
            if(lis[i + (w+1)] && lis[i + (w+1)].children[0].innerHTML == lei && i % w !== (w-1)){
                a += 1;
            }
            if(a !== 0){
                lis[i].children[0].innerHTML = a;
                if(a == 2){
                    lis[i].children[0].style.color = 'rgb(149, 236, 9)';
                }else if(a == 3){
                    lis[i].children[0].style.color = 'rgb(187, 236, 9)';
                }else if(a == 4){
                    lis[i].children[0].style.color = 'rgb(236, 213, 9)';
                }else if(a == 5){
                    lis[i].children[0].style.color = 'rgb(236, 164, 9)';
                }else if(a == 6){
                    lis[i].children[0].style.color = 'rgb(236, 119, 9)';
                }else if(a == 7){
                    lis[i].children[0].style.color = 'rgb(236, 81, 9)';
                }else if(a == 8){
                    lis[i].children[0].style.color = 'rgb(250, 3, 3)';
                }
                lis[i].setAttribute('shu',a);
            }else if(a == 0){
                lis[i].setAttribute('shu','');
            }
        }else{
            lis[i].setAttribute('shu',lei);
        }
    }
    // -------------------------------------------点击显示下面内容-----------------------------------
    var baozha = document.getElementById('baozha');
    function dianji(){
        if(this.children[0].innerHTML !== '<img src="images/flag.jpg" alt="">'){//此处为小红旗图片
            this.style.backgroundColor = '#fff';
            this.children[0].style.display = 'block';
            var center =  this.children[0].innerHTML;
            var zdy = this.getAttribute('zdy');
            kong(zdy,center,kuan);
            victory();
            // 比较是否是炸弹如果是则失败
            if(center == lei){
                baozha.innerHTML = '<img src="images/baozha.gif" alt="">';//此处为游戏失败显示的图片
                for(var i = 0; i < liLength; i++){
                    lis[i].onclick = over;
                    lis[i].oncontextmenu = over;
                    if(lis[i].children[0].innerHTML == '<img src="images/flag.jpg" alt="">'){//此处为小红旗图片
                        lis[i].children[0].innerHTML =  lis[i].getAttribute('shu');
                    }
                    lis[i].children[0].style.display = 'block';
                }
                setTimeout(function(){
                    baozha.innerHTML = '';
                    alert('游戏结束！');
                },1000)
            }
        }
    }
    function over(){
        alert('游戏结束请刷新，重新开始！');
    }
    function kong(zdy,center,kuan){
        // 点击判断是空后,接着判断相邻的是否为空，如果是接着此效果
        if(center == ''){
            function left(zdy,center){
                if( arr[Number(zdy) - 1] && zdy % kuan !== 0 && center == '' &&  arr[Number(zdy) - 1].children[0].style.display !== 'block'){
                    arr[Number(zdy) - 1].style.backgroundColor = '#fff';
                    arr[Number(zdy) - 1].children[0].style.display = 'block';
                    if(arr[Number(zdy) - 1].children[0].innerHTML == '<img src="images/flag.jpg" alt="">'){//此处为小红旗图片
                        arr[Number(zdy) - 1].children[0].style.display = 'inline-block';
                    }
                    bottom(zdy - 1,arr[Number(zdy) - 1].children[0].innerHTML);
                    top(zdy - 1,arr[Number(zdy) - 1].children[0].innerHTML);
                    left(zdy - 1,arr[Number(zdy) - 1].children[0].innerHTML);
                }
            }
            left(zdy,center);

            function right(zdy,center){
                if(arr[Number(zdy) + 1] && zdy % kuan !== (kuan-1) && center == '' &&  arr[Number(zdy) + 1].children[0].style.display !== 'block'){
                    arr[Number(zdy) + 1].style.backgroundColor = '#fff';
                    arr[Number(zdy) + 1].children[0].style.display = 'block';
                    if(arr[Number(zdy) + 1].children[0].innerHTML == '<img src="images/flag.jpg" alt="">'){//此处为小红旗图片
                        arr[Number(zdy) + 1].children[0].style.display = 'inline-block';
                    }
                    right(Number(zdy) + 1,arr[Number(zdy) + 1].children[0].innerHTML);
                    top(Number(zdy) + 1,arr[Number(zdy) + 1].children[0].innerHTML);
                    bottom(Number(zdy) + 1,arr[Number(zdy) + 1].children[0].innerHTML);
                }
            }
            right(zdy,center);

            function bottom(zdy,center){
                if(arr[Number(zdy) + kuan] && center == '' &&  arr[Number(zdy) + kuan].children[0].style.display !== 'block'){
                    arr[Number(zdy) + kuan].style.backgroundColor = '#fff';
                    arr[Number(zdy) + kuan].children[0].style.display = 'block';
                    if(arr[Number(zdy) + kuan].children[0].innerHTML == '<img src="images/flag.jpg" alt="">'){//此处为小红旗图片
                        arr[Number(zdy) + kuan].children[0].style.display = 'inline-block';
                    }
                    
                    bottom(Number(zdy) + kuan,arr[Number(zdy) + kuan].children[0].innerHTML);
                    left(Number(zdy) + kuan,arr[Number(zdy) + kuan].children[0].innerHTML);
                    right(Number(zdy) + kuan,arr[Number(zdy) + kuan].children[0].innerHTML);
                    
                }
            }
            bottom(zdy,center);
            
            function top(zdy,center){
                if(arr[Number(zdy) - kuan] && center == '' &&  arr[Number(zdy) - kuan].children[0].style.display !== 'block'){
                    arr[Number(zdy) - kuan].style.backgroundColor = '#fff';
                    arr[Number(zdy) - kuan].children[0].style.display = 'block';
                    if(arr[Number(zdy) - kuan].children[0].innerHTML == '<img src="images/flag.jpg" alt="">'){//此处为小红旗图片
                        arr[Number(zdy) - kuan].children[0].style.display = 'inline-block';
                    }
                    
                    top(Number(zdy) - kuan,arr[Number(zdy) - kuan].children[0].innerHTML);
                    left(Number(zdy) - kuan,arr[Number(zdy) - kuan].children[0].innerHTML);
                    right(Number(zdy) - kuan,arr[Number(zdy) - kuan].children[0].innerHTML);
                }
            }
            top(zdy,center);
        }
    }
// --------------------------------------------左键插小红旗-----------------------------------------
    function zuo(e){
        e.preventDefault();
        var conter = this.getAttribute('shu');
        if(this.children[0].style.display !== 'block'){
            var zuodianji = this.getAttribute('zuodianji');
            if(zuodianji == 0){
                this.children[0].innerHTML = '<img src="images/flag.jpg" alt="">';//此处为小红旗图片
                this.children[0].style.display = 'inline-block';
                this.setAttribute('zuodianji','1');
            }else if(zuodianji == 1){
                this.children[0].innerHTML = conter;
                this.children[0].style.display = 'none';
                this.style.backgroundColor = 'rgb(122, 128, 123)';
                this.setAttribute('zuodianji','0');
            }
        }
    }
// ---------------------------------------------当界面只剩雷没有点开则胜利------------------------------------
    var shengli = false;
    function victory(){
        var v = 0;
        for(var i = 0; i < liLength; i++){
            if(lis[i].children[0].innerHTML !== lei && lis[i].children[0].style.display == 'block' && shengli == false){
                v++;
                if(liLength - v == leishu){
                    shengli = true;
                    victory();
                }
            }
            if(shengli){
                if(lis[i].children[0].innerHTML == '<img src="images/flag.jpg" alt="">'){//此处为右键小红旗图片
                    lis[i].children[0].innerHTML = lei;
                }
                lis[i].children[0].style.display = 'block';
                baozha.innerHTML = '<img src="images/yanhua.gif" alt="">';//此处为胜利后显示图片
            }
        }
        if(shengli){
            for(var j = 0; j < liLength; j++){
                lis[j].onclick = over;
                lis[j].oncontextmenu = over;
            }
            setTimeout(function(){
                baozha.innerHTML = '';
                alert('恭喜获胜！！！');
            },3000);
        }
    }
}

css

*{
    margin:0;
    padding:0;
}
ul{
    list-style:none;
}

#box{
    position:relative;
    top:20px;
    left:50%;
    transform:translate(-50%);
    background-color: #999;
    padding:15px;
    box-sizing: border-box;
    /* overflow: hidden; */
    float: left;
}
#ul li{
    width: 30px;
    height: 30px;
    background-color: rgb(122, 128, 123);
    float: left;
    border:1px solid #000;
    box-sizing: border-box;
}
#ul li div{
    display: none;
    font-size: 20px;
    color:rgb(9, 250, 9);
    text-align:center;
    line-height:30px;
}
#ul li div img{
    width: 28px;
    height: 28px;
}
/* 爆炸图片 */
#baozha{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
}
#baozha img{
    opacity: 0.8;
}
/* 雷个数 */
#leishu{
    position: absolute;
    top:50px;
    left:50%;
    margin-left:400px;
    width: 95px;
}
#leishu #inp{
    width: 50px;
    height: 30px;
    box-sizing: border-box;
    padding-left:5px;
}
#leishu #btn{
    width: 82px;
    height: 30px;
    border:1px solid #000;
    box-sizing: border-box;
}

图片
爆炸
烟花
小红旗
雷

其他资源（2048，飞行棋，五子棋，贪吃蛇…）
https://github.com/liuzilong2000/xiaoyouxi.git

一个在起跑线的前端
关注
专栏目录
牛！有人在 GitHub 上把 Windows 95 做成了一款软件，可玩扫雷和纸牌！
m0_46163918的博客
10-23 636
微软的操作系统，首次出现GUI（图形用户界面）是在Windows1.0中，然后2.0、3.0、3.1、3.2进行了升级换代，直到1995年微软发布了一款名为Windows95的操作系统，在当时那个年代来说，用户界面非常漂亮，设计的“开始”菜单也一直保留至今。它和微软没有关系，仅仅是用JavaScript语言编写的一套程序，可以运行在Windows、MacOS以及Linux系统上，说白了就是一个软件，也可以理解为一个Windows95的虚拟机。接下来，点击中间的按钮，稍等片刻就进入了系统中。
扫雷游戏总结
TL_mood的博客
03-08 967
扫雷游戏
python能开发游戏吗_minesweeper
weixin_39822728的博客
11-24 154
Minesweeper（扫雷）这是一个由Python编写的扫雷游戏，基于tkinter/Tkinter开发，支持python2和python3。功能概述基本功能：左键扫雷，右键标记记录游戏步数和时间游戏重置：同一地图可进行多次游戏自定义地图参数，默认提供初级、中级、高级三个级别算法概述游戏算法总体为一个有限状态机。一共有游戏中、成功、失败，其中后两种为最终状态。状态转化为点击某个方格。游戏的动作是...
Windows 95被做成了App，可玩扫雷和纸牌
AI科技大本营
02-11 5467
6 秒重温 Windows95 开机画面 作者 | 琥珀 出品 | AI科技大本营（ID:rgznai100） “看到 Win95，再看到仙剑 DOS 的画面，突然有种想哭的感觉，小时候帮李逍遥实现了仗剑江湖的愿望，但自己却没有实现自己的愿望，青春已过，安心生活。”一位网友 chzi826 这样写道。 《仙剑奇侠传》、《红色警戒》、《魔兽争霸》、《三国英烈传》…...
Java 实现经典扫雷游戏 Github代码
许自己以未来
08-28 1011
使用Java GUI编写，有分等级、计分、计时、记录、自定义、自动扫雷、存档、读档等功能！ GitHub地址：https://github.com/PowerPollery/Minesweeper
扫雷（超详解+全部码源）
热门推荐
2201_75642960的博客
08-09 2万+
😀C语言实现扫雷是对基础代码能力的考察。通过本篇文章你将学会如何制作出扫雷，坚持一段时间的复习相信你肯定能够掌握扫雷（文末附三子棋全部代码）👉扫雷游戏网页版。
扫雷游戏
Rookie Maker的博客
12-16 3880
c语言，大家三连哦！
初识扫雷！
2401_83779763的博客
09-22 1923
扫雷游戏
HTML扫雷
m0_71663621的博客
07-27 1015
使用HTML实现了一个基本的扫雷游戏，提供了一个用户交互的扫雷游戏界面，支持不同难度的游戏模式
经典版本的扫雷图片素材
01-26
扫雷是一款广受欢迎的经典电脑游戏，它通过逻辑推理和概率计算来揭示隐藏的雷区，锻炼玩家的思维能力和耐心。本资源包“经典版本的扫雷图片素材”提供了与扫雷游戏相关的图像材料，适用于开发或改进扫雷游戏，或者...
Java扫雷游戏完整项目代码
10-18
【Java扫雷游戏完整项目代码】是一个基于Java编程语言实现的经典扫雷游戏的代码实现。在计算机科学领域，扫雷游戏通常被用作一个教学工具，帮助初学者理解逻辑推理、算法设计以及基本的图形用户界面（GUI）编程。在...
Qt实现扫雷游戏（毕设/课设/项目开发皆适用）
02-19
Qt扫雷游戏是一款基于Qt框架开发的经典游戏，旨在为毕设、课设或其他项目开发提供一个有趣而具有挑战性的实践案例。这款游戏不仅实现了扫雷的核心玩法，而且在界面设计和用户体验方面进行了精心雕琢。 主要特点： ...
Python简易扫雷素材包（图片+代码）
08-02
在本资源包中，我们有一个基于Python实现的简易扫雷游戏。这个项目是初学者学习Python编程和图形用户界面（GUI）设计的一个很好的实践案例。下面将详细解析其中涉及的知识点： 1. **Python基础**：`扫雷.py` 文件是...
java小游戏 扫雷 java小游戏 扫雷
06-23
java小游戏 扫雷java小游戏 扫雷java小游戏 扫雷java小游戏 扫雷java小游戏 扫雷java小游戏 扫雷java小游戏 扫雷java小游戏 扫雷java小游戏 扫雷java小游戏 扫雷java小游戏 扫雷java小游戏 扫雷java小游戏 扫雷java...
【JAVA开源】基于Vue和SpringBoot的高校学科竞赛平台
杨荧的CSDN博客
10-10 1391
教师功能有个人中心，题目类型管理，竞赛题库管理，竞赛类型管理，竞赛信息管理，报名信息管理，竞赛评分管理，参赛名单管理，晋级名单管理，获奖名单管理，竞赛总结管理，报销清单管理，成绩申诉管理，参赛信息管理，参赛信息管理，往年成绩管理，获奖情况管理。
解释器、预处理、main函数
编程语言技巧经验分享
10-07 1252
解释器覆盖范围很广，不管是解释语言的运行时解释翻译器，还是操作系统自带脚本的解释器。
使用 Redis 在 Spring Boot 中实现排行榜功能
fudaihb的博客
10-10 1374
在现代的应用程序中，排行榜功能广泛应用于游戏、社交网络、电商等领域，用于展示用户的排名情况。为了在大并发的环境下快速、高效地实现排行榜功能，Redis 提供了强大的数据结构 `Sorted Set`（有序集合），能够以 O(log N) 的时间复杂度进行元素插入和查询，非常适合排行榜这种场景。 本文将详细介绍如何在 Spring Boot 中使用 Redis 实现排行榜功能。我们将介绍 Redis 的 `Sorted Set` 数据结构，结合具体代码演示如何实现排行榜的增、删、查、改，并讨论排行榜的一些
React中的refs是什么？
最新发布
Front end development engineer
10-10 292
React 的众多优点之一是它抽象了处理真实 DOM 的复杂性。现在，我们无需手动查询元素、绞尽脑汁思考如何为这些元素添加类又或者是添加样式等，也无需为浏览器兼容性而苦恼，只需编写组件并专注于用户体验即可。然而，仍然有一些情况（虽然很少！）我们需要访问实际的 DOM。而当涉及到实际的 DOM 时，最重要的是要理解并学习如何正确使用 ref 以及 ref 周围的一切。
C++实现扫雷游戏
"扫雷游戏c++开发源代码" 这篇内容是关于使用C++语言编写经典扫雷游戏的代码实现。扫雷游戏是一款基于逻辑推理的单人益智游戏，通常在Windows系统中内置。在这个Flash版本中，游戏的目标仍然是在不触雷的情况下揭示...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值