网页版扫雷 js

最新推荐文章于 2024-09-03 15:37:52 发布

tangzheng828

最新推荐文章于 2024-09-03 15:37:52 发布

阅读量3k

点赞数

分类专栏： js 文章标签： js 扫雷

本文链接：https://blog.csdn.net/tangzheng828/article/details/81431629

版权

这是一个使用JavaScript编写的网页版扫雷游戏。通过HTML创建游戏区域，CSS进行样式设置，JS负责游戏逻辑，包括初始化雷区、点击和双击操作、判断游戏状态等功能。玩家可以通过单击标记雷区，双击翻开格子，游戏目标是找出所有非雷格子。

摘要由CSDN通过智能技术生成

//HTMEL

<body>

//css

.bottom,over {
text-align: center;
line-height: 0px;
}

.bottom div {
display: inline-block;
width: 30px;
height: 30px;
border: 1px solid #808080;
background-color: #f4a;
text-align: center;
font: 20px/30px arial;
}

//JS

// 保存初始雷化记录和拆雷记录 100个按钮中有25个雷
var box = Array(10);

//初始化底层
function initBottom() {
const content = document.getElementsByClassName('content')[0];
const bottom = document.createElement('div');
content.appendChild(bottom);
bottom.className = "bottom";

for (let i = 0; i < 10; i++) {
box[i] = new Array(10);
for (let j = 0; j < 10; j++) {
const div = document.createElement('div');
bottom.appendChild(div);
div.id = "bottom[" + i + "][" + j + "]";
box[i][j] = 0;
}
bottom.innerHTML = bottom.innerHTML + "<br />";
}

initB