网页版扫雷（HTML/CSS/JS实践）

最新推荐文章于 2024-07-28 12:16:56 发布

alllliy

最新推荐文章于 2024-07-28 12:16:56 发布

阅读量5.5k

点赞数 3

文章标签： javascript css html5

本文链接：https://blog.csdn.net/alllliy/article/details/108981571

版权

html

JavaScript版扫雷

剩余雷数： 0 个

持续时间: 0 秒

难度选择：初级（10*10）
中级（15*15）
高级（20*20）

提示：

1、点击“开始游戏”游戏开始计时
2、游戏过程中点击“开始游戏”将开始新游戏

<script src="../js/jms.js"></script>
<script src="../js/text.js"></script>

css

.main {
margin: 10px auto;
padding: 20px;
background: #eee;
width: 600px;
zoom: 1;
}
.main table {
background: #ccc;
float: left;
}

.main table td {
border: 2px outset #eee;
font-size: 20px;
width: 32px;
height: 32px;
text-align: center;
cursor: pointer;
}

.main table td:hover {
background-color: #aaa;
}
.main #operation {
width: 180px;
float: right;
text-align: center;
}

.landMine {
background-image: url(mine.png);
background-position: center;
background-repeat: no-repeat;
}

.main table td.normal {
border: 2px solid #eee;
background-color: #aaa;
}

.main table td.normal:hover {
background-color: #aaa;
}

.flag {
background-image: url(flag.png);
background-position: center;
background-repeat: no-repeat;
}

.main:after {
clear: both;
display: block;
content: ‘’;
line-height: 0;
height: 0;
visibility: hidden;
}
.main .tip {
font-size: 14px;
margin: 5px;
}

.main .tip ul {
}

.main .tip ul li {
margin: 5px 0;
line-height: 20px;
}
.main .light {
font-size: 30px;
}
.main .red {
color: red;
}
.main .f60 {
color: #f60;
}
.main input[type=‘button’] {
padding: 2px 10px;
margin: 5px;
font-size: 20px;
cursor: pointer;
}
.main .txtleft {
text-align: left;
}