网页扫雷的问题

最新推荐文章于 2024-05-09 14:17:00 发布
最新推荐文章于 2024-05-09 14:17:00 发布
阅读量263 收藏
点赞数
文章标签： css html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_61594366/article/details/125037038
版权

扫雷

我做了一款扫雷

代码结构:

在这里插入图片描述
BoomIndex.html代码:

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>扫雷</title>
    <script src="Script.js" rel="script"></script>
    <link href="StyleSheet.css" rel="stylesheet" />
</head>
<body style="background-color: black">
<div id="root">
    <table class="up_block">
        <tr>
            <td id="ub_fin_boom" >
                <button id="free_normal_mode" onclick="update_mode('FREE')">普通模式</button>
                <button id="flag_mode" onclick="update_mode('FLAG')">插旗模式</button>
            </td>
            <td id="ub_slt_boom">
                <button class="Title_Button" id="ub_slt_boom_button" onclick="update_bmp_func()">
                    <img src="img/smile.bmp" alt="SMILE"/>
                </button>
            </td>
            <td id="ub_scr_boom">
                分数:<span id="ub_scr_boom_data">0</span>分
            </td>
        </tr>
    </table>
    <div id="boom_block">
        <div id="boom_table">
            <script type="text/javascript">
                for(let x=1;x<=15;x++){
                    for(let y=1;y<=15;y++){
                        document.write(`<button class="box" id="box${x}_${y}" οnclick="click_box(${x},${y})">N</button>`)
                    }
                    document.write(`<br/>`)
                }
            </script>
        </div>
    </div>
</div>
</body>
</html>

StyleSheetCSS代码:

#root{
    position: absolute;
    width: 600px;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: #FFFF00;
}
#up_block{
    height: 25%;
    width : 100%;
    background-color: #000000;
}
#boom_block{
    height: 75%;
    width: 100%;
    background-color: #FFFF00;
}
#ub_fin_boom{
    height: 100px;
    width: 200px;
    border: 5px solid #000000;
    padding-left: 8px;
    padding-right: 8px;
    text-align: center;
    vertical-align: center;
    background-color: #FFFF00;
}
#ub_slt_boom{
    height: 100px;
    width: 200px;
    border: 5px solid #000000;
    background-color: #FFFF00;
    padding-left: 8px;
    padding-right: 8px;
    text-align: center;
    vertical-align: center;
}
#ub_scr_boom{
    height: 100px;
    width: 200px;
    border : 5px solid #000000;
    background-color: #FFFF00;
    padding-left: 8px;
    padding-right: 8px;
    text-align: center;
    vertical-align: center;
}
.Title_Button{
    border: 3px outset #FFFFFF;
    background-color: #FFFFFF;
    transition-duration: 0.05s;
}
.Title_Button:hover{
    border: 3px outset #777777;
    background-color: #777777;
}
.box{
    border: 5px outset #777777;
    background-color: #777777;
    width: 30px;
    height : 30px;
    text-align: center;
    vertical-align: center;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transition-duration: 0.05s;
}
.box:hover{
    border: 5px outset #444444;
    background-color: #444444;
}
.lose_box{
    border: crimson;
    background-color: crimson;
}
#boom_table{
    text-align: center;
    /*vertical-align: center;*/
    /*margin-top: 20px;*/
}

Script.js代码

let ClickMode;
let BoomList;
let NumList;
let dis;
let cnt;
function game_init(){
    ClickMode = 'FREE'
    BoomList = new Array();
    NumList = new Array();
    for(let i=0;i<=16;i++){
        BoomList[i] = new Array();
        NumList[i] = new Array();
        dis[i] = new Array();
        for(let j=0;j<16;j++){
            BoomList[i][j] = false;
            NumList[i][j] = 0;
            dis[i][j]=false;
        }
    }
    for(let i=1;i<=15;i++){
        for(let j=1;j<=15;j++){
            let element=document.getElementById(`box${i}_${j}`)
            element.innerHTML = 'N'
            element.className = 'box'
        }
    }
    for(let i=0;i<35;i++){
        let tx = Math.floor(Math.random() * 14) + 1;
        let ty = Math.floor(Math.random() * 14) + 1;
        if(BoomList[tx][ty]==true){
            i--;
            continue;
        }
        BoomList[tx][ty] = true;
    }
    for(let i=1;i<=15;i++){
        for(let j=1;j<=15;j++){
            if(BoomList[i][j]){
                NumList[i][j] = Infinity;
            }else{
                let dx = [0,0,1,-1,1,1,-1,-1]
                let dy = [1,-1,0,0,1,-1,1,-1]
                let sum = 0
                for(let x=0;x<8;x++){
                    if(BoomList[i+dx[x]][j+dy[x]]){
                        sum++;
                    }
                }
                NumList[i][j] = sum;
            }
        }
    }
}
function over_game(bombx,bomby){
    for(let i=1;i<=15;i++){
        for(let j=1;j<=15;j++){
            if(BoomList[i][j]){
                let element = document.getElementById(`box${i}_${j}`)
                element.className = 'lose_box'
                element.innerHTML = 'B'
            }
        }
    }
}
function update_bmp_func(){
    let element = document.getElementById("ub_slt_boom_button")
    if(element.innerHTML==='<img src="img/bad.bmp" alt="LOST" />'){
        element.innerHTML='<img src="img/smile.bmp" alt="SMILE"/>'
        game_init()
        return;
    }
    if(element.innerHTML==='<img src="img/smile.bmp" alt="SMILE"/>'){
        element.innerHTML = '<img src="img/smileClick.bmp" alt="SMILE_CLICK" />'
        setTimeout(function(){
            element.innerHTML = '<img src="img/smile.bmp" alt="SMILE"/>'
        },200)
    }
};
let update_mode = (mode_string) => {
    if(mode_string === 'FREE'){
        ClickMode = 'FREE'
    }else{
        ClickMode = 'FLAG'
    }
}
function is_win(){
    let flag = true;
    for(let i=1;i<=15;i++){
        for(let j=1;j<=15;j++){
            let element = document.getElementById(`box${i}_${j}`)
            if(BoomList[i][j]){
                if(element.innerHTML !== 'F'){
                    flag = false;
                }
            }
        }
    }
    return flag;
}
function click_box(cx,cy){
    let element = document.getElementById(`box${cx}_${cy}`)
    let dx = [0,0,-1,1]
    let dy = [-1,1,0,0]
    let dfs_dis = new Array();
    for(let i=1;i<=15;i++){
        dfs_dis[i] = new Array();
        for (let j=1;j<=15;j++){
            dfs_dis[i][j] = false;
        }
    }
    let dfs = (x,y) => {
        dfs_dis[i] = true;
        element.innerHTML = (NumList[x][y]!=0)?(`${NumList[x][y]}`):(' ')
        dis[x][y] = true;
        for(let i=0;i<4;i++){
            let tx = x+dx[i];
            let ty = y+dy[i];
            if(tx<1 || tx>15 || ty<1 || ty>15 || (element.innerHTML==0 && dfs_dis[tx][ty]==true)){
                continue;
            }
            dfs(tx,ty)
        }
    }
    if(ClickMode==='FLAG'){
        if(element.innerHTML==='F'){
            element.innerHTML = 'N'
        }else{
            element.innerHTML = 'F'
        }
    }else{
        if(BoomList[cx][cy]){
            over_game(cx,cy)
        }else{

            dfs(cx,cy);
            if(is_win()){
                let element_win = document.getElementById("ub_slt_boom_button")
                element_win.innerHTML = 'YOUWIN!'
            }
        }
    }
}

图片资源:
bad.bmp
在这里插入图片描述
smile.bmp
在这里插入图片描述
smileClick.bmp
在这里插入图片描述
效果图
在这里插入图片描述

不得不说，真的有一点丑，但功能还是有的

问题

  1. ub_slt_boom_button点击后没有反应 (指有切换图片效果的)
  2. 雷区正常模式点击无反应

望评论区中的大神教一下，到底哪里出了问题。

10chen01
关注
网页版扫雷小游戏制作过程(附全部源码)
m0_74013450的博客
04-12 1118
这款扫雷小游戏是基于HTML、CSS和JavaScript开发的经典扫雷游戏网页版，具有精美的界面设计和流畅的游戏体验。游戏遵循传统扫雷规则，同时增加了多种难度级别和现代化的视觉效果。
扫雷网页版
06-05
JavaScript+CSS 写的扫雷，只有一个html文件
网页版扫雷游戏
最新发布
2301_80293394的博客
05-09 1995
2.//定义行列，方便修改好啦，以上就是今天的全部分享了，如有不足欢迎家人们评论区批评指正，如果这篇文章对你有用的话，可以给我来个一键三连嘛（写了一天了，求赞求支持/(ㄒoㄒ)/~~）
网页版扫雷
daodfs1的博客
11-28 7602
新建一个空html文件，粘贴下面的代码，保存后，用浏览器打开就可以玩了（兼容IE10） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>扫雷</title> <style> .container {margin: auto;width: 960px;} .panel {posit
扫雷游戏网页版_网页版扫雷
weixin_39616798的博客
11-09 4297
更新：2020-5-11修改的原因大概是对之前非常“天才”般的用标签遮挡实现图标切换实在看不下去了，而且效率惊人的差。现在用图片看起来好一些，缺点是放大会糊。游戏手感一般，猜测是动画问题。1>方块图形由CSS改为图片，图片纯用系统自带的小画家画的，希望有点3D效果，结果画的感觉视觉上突出太多。2>更细致的模拟 windows7 扫雷的一些行为，比如松开触发扫雷动作，如果左键按下后，右键...
网页版扫雷游戏(html)
12-09
空闲时看了几本网页制作的书，觉得会了一些东东，于是就做了一个网页版的扫雷游戏，现共享给大家。登录时用户名为xiaohua，密码123.想连结数据库，实现注册的功能，但不知如何操作，希望大家指点一二。
用jQuery写的网页扫雷游戏
05-12
脚本资源,jQuery,jQuery游戏,扫雷　jQuery Sweeper 运行在WEB上的有趣游戏——扫雷游戏，Windows中带有的扫雷游戏大家都玩过吧，这款基于Js脚本写的扫雷，玩法与其大致相同，这里主要是想展示jQuery丰富的网页应用，...
原生JS网页版的扫雷小游戏代码源码.rar
01-27
原生JS网页版的扫雷小游戏代码源码
网页 扫雷源码.zip
11-22
网页 扫雷源码.zip
jQuery网页扫雷小游戏源码下载
11-03
jQuery网页扫雷小游戏源码下载 jQuery网页扫雷小游戏源码下载
扫雷游戏网页版.zip
05-24
扫雷游戏js网页版。
JS扫雷网页版
02-02
利用jQuery库基本上实现扫雷游戏的所有功能
网页版扫雷小游戏
09-25
一个关于html5的学习例子简单易懂，方便你学习的小小游戏
网页扫雷（简易版）（一）
magic_wings的专栏
10-24 5630
网页版扫雷说明：主要是做做玩玩的，先把主要功能实现。
网页版 扫雷 js
tangzheng828的博客
08-05 3257
//HTMEL &lt;body&gt;     &lt;div class="content"&gt; &lt;/div&gt; &lt;/body&gt; //css .bottom,over {     text-align: center;     line-height: 0px; }     .bottom div {         display: inline-bloc...
python3-扫雷网页版
The research on computer technolog
11-27 1445
button_text参数：当读取一个窗口时，返回的就是这个文本参数，该参数将告诉您单击了哪个按钮；在按钮调用中更改button_text参数，可更改所有按钮的文本。在单个行中指定一个以上的元素时，需要使用Column Element。纽扣是最重要的元素，它们接收用户点击，激活大部分程序功能。想要定义自己的按钮，通常可以使用button Element button来实现。也可使用key参数，这样，在如下的layout中，当单击按钮时，从Window.read()调用返回的事件是key的值"
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值