<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>template</title>
</head>
<body>
<div class="bg">
<div class="contianer">
</div>
</div>
</body>
<style>
/* 完全是因为不知道怎么吧contianer 居中对齐，只能外层添加一个父元素。*/
.bg {
margin-top: 100px;
text-align: center;
}
.contianer {
/* 怎么让大小自适应子元素 */
/* 找了个这个，不知道具体原因*/
display: inline-block;
border: 1px solid #000;
padding: 10px;
/* background: blueviolet; */
}
.cell {
/* 文字垂直居中 水平居中办法*/
line-height:62px;
text-align: center;
border-radius: 20%;
width: 62px;
height: 62px;
background: rgb(231, 173, 64);
float: left;
border:1px solid #000;
margin:1px;
}
.hidden {
font-size: 0px;
}
.open {
font-size: 24px;
}
/* 子元素设置了浮动，会导致父元素坍塌，用这个方法可以解决问题*/
.clearfix:after{
content: ' ';
display: block;
height: 0;
clear: both;
}
</style>
<script src="02.js"></script>
</html>
// 这个函数返回 line.length 个 cell 拼接的字符串
// line 每一行的数组
let s = ' [[9,1,0,0,0,1,1,1,0],[1,1,0,0,1,2,9,1,0],[1,1,1,0,1,9,2,1,0],[1,9,2,1,1,1,1,0,0],[1,2,9,1,0,0,1,1,1],[1,2,1,1,0,1,2,9,1],[9,1,0,0,1,2,9,2,1],[1,2,1,1,1,9,2,1,0],[0,1,9,1,1,1,1,0,0]]'
let map_arr = JSON.parse(s)
const templateCell = (line_arr, x) => {
//行内有几个。也就是几列
let len = line_arr.length
let cell = `<div class="row clearfix">`
for (let i = 0; i < len; i++) {
cell += `<div class="cell " data-number="${line_arr[i]}" data-x="${x}" data-y="${i}">${line_arr[i]}</div>`
}
cell += `</div>`
return cell
}
const templateRow = (square) => {
// 总共行数，
let len = square.length
let all_row = ``
for (let i = 0; i < len; i++) {
let cell = templateCell(square[i], i)
all_row += cell
}
return all_row
}
function CreatMap() {
var contianer = document.querySelector('.contianer')
var map_html = templateRow(map_arr)
contianer.innerHTML = map_html
}
const bindEventDelegate = function(square) {
//注意动态生成html 的问题
var contian = document.querySelector('.contianer')
contian.addEventListener('click', (event) => {
let self = event.target
// console.log(self)
if (self.classList.contains('cell')) {
vjkl(self, map_arr)
}
})
}
const vjkl = function(cell, square) {
let cell_x = parseInt(cell.dataset.x, 10)
let cell_y = Number(cell.dataset.y)
let number = Number(cell.dataset.number)
console.log('此时被翻开的块下标是:')
console.log(cell_x, cell_y)
//筛选出已经显示的块块
if (number === 0) {
vjklAround(map_arr, cell_x, cell_y)
cell.classList.remove('hidden')
} else {
cell.classList.remove('hidden')
}
// if (cell.classList.contains('hidden')) {
// if (number === 0) {
// vjklAround(map_arr, cell_x, cell_y)
// cell.classList.remove('hidden')
// } else {
// cell.classList.remove('hidden')
// }
// // if (number === 9) {
// // console.log('have 9')
// // }else if (number === 0) {
// // cell.classList.remove('hidden')
// // // vjklAround(map_arr, cell_x, cell_y)
// // console.log('is 0')
// // } else {
// // cell.classList.remove('hidden')
// // }
// }
}
const vjklAround = function(square, x, y) {
console.log(`此时0 的位置(${x + 1},${y + 1})正在对周围进行标记=========================================`)
//展开周围8个坐标 的数字
// 找到周围八个元素
//上下一共6个
for (let i = -1; i < 2; i++) {
let show_element_up = document.querySelector(`div[data-x="${x - 1 }"][data-y="${y + i}"]`)
let show_element_down = document.querySelector(`div[data-x="${x + 1}"][data-y="${y + i}"]`)
//存在性
if (show_element_up !== null) {
vjkl(show_element_up, map_arr)
}
if (show_element_down !== null) {
vjkl(show_element_down, map_arr)
}
}
//左右两个
let show_element_left = document.querySelector(`div[data-x='${x}'][data-y='${y - 1}']`)
let show_element_right = document.querySelector(`div[data-x='${x}'][data-y='${y + 1}']`)
if (show_element_left !== null) {
vjkl(show_element_left, map_arr)
}
if (show_element_right !== null) {
vjkl(show_element_right, map_arr)
}
}
//随机生成二维数组
// const randomArr = () => {
// }
const __main = function() {
CreatMap(map_arr)
bindEventDelegate(map_arr)
}
__main()
html 部分
js 部分