扫雷（HTML版）

孤客网络科技工作室

于 2024-08-18 04:45:27 发布

阅读量391

点赞数 9

分类专栏： html+css网页开发 VScode 教程文章标签： html 前端

By_GUKE

本文链接：https://blog.csdn.net/m0_70474954/article/details/141291227

版权

html+css网页开发同时被 3 个专栏收录

65 篇文章 1 订阅

订阅专栏

VScode

46 篇文章 0 订阅

订阅专栏

教程

12 篇文章 0 订阅

订阅专栏

这里写目录标题

前言
效果图
部分源码
领取完整源码
下期更新

前言

扫雷游戏起源于1973年的"方块"游戏。1992年微软发布的Windows 3.1中加入该游戏，从此风靡全世界。玩扫雷游戏，可以锻炼观察和推理能力，培养细心和耐心。

效果图

在这里插入图片描述

部分源码

input{height:1.5rem;font-size:1.1rem;width:4rem;}

#face{
    border:2px solid #808080;
    border-left-color: #fff;
    border-top-color: #fff;
    width:21px;
    height:21px;
}
#face:active{
    border:2px solid #808080;
    border-bottom:1px solid #808080; 
    border-right:1px solid #808080; 

}



table{
border-collapse:collapse;
}

.pad{
border:2px solid #808080;
border-right-color: #fff;
border-bottom-color: #fff;
}
</style>
<base target="_top">

</head>  

<body bgcolor="f7f7f0" style="margin:0;" οnlοad="start()">

<center>

<div style="margin-top:0.8rem;">
<b>扫雷</b> <small>→<a href="about.html">说明</a></small>
</div>


<div style="margin-top:0.8rem;">
<a href="javascript:_123(1)">基础</a>
&nbsp;
<a href="javascript:_123(2)">中级</a>
&nbsp;
<a href="javascript:_123(3)">专家</a>
&nbsp;
<a href="javascript:_123(4)">满屏</a>
&nbsp;
<a href="javascript:_123(5)">自定义</a>
</div>
<div id="custom" style="display:none">
横向：<input id="hm" type="number" value="40">
竖向：<input id="vm" type="number" value="24">
雷数：<input id="mm" type="number" value="199">
<input type="button" οnclick="udf()" value="确定">
</div>
<table style="margin-top:0.8rem;border-radius:6px;background:#cccccc">
<tr><td style="padding:9px;">

<table id="p42" class="pad" style="height:34px"><tr>
<td width="50%"><canvas id="rm" height="23" width="39"></canvas>
<!--img><img><img-->
</td>
<td align="center"><img οnmοuseup="_45()" id="face">
</td><td width="50%" align="right">
<canvas id="es" height="23" width="39"></canvas>
<!--img><img><img-->
</td>
</tr></table>

<!--table style="margin-top:6px;" class=pad id=paf></table-->
<canvas id="paf" class="pad" style="margin-top:6px;" width="0" height="0"></canvas>

</td></tr><tr><td align="right">
</td></tr></table>


<div style="margin-top:2rem;">
</div>