<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>猫走迷宫</title>
</head>
<style>
*{
margin: 0;
}
#all{
display: flex;
flex-direction: column;
}
.hang{
display: flex;
}
.son,.blackSon,.orangeSon{
height: 50px;
width: 50px;
box-shadow: 0 0 0 0.5px;
}
.blackSon{
background: black;
}
.orangeSon,.sonSon,.son,.sonCat,.blackSon,.otherCats{
display: flex;
justify-content: center;
align-items: center;
}
.sonSon,.sonCat,.otherCats{
color: white;
width: 40px;
height: 40px;
}
.sonSon{
position: absolute;
background: orange;
border-radius: 50%;
}
/*使用js操作css生成的猫*/
.otherCats{
position: absolute;
margin: 6px;
}
</style>
<body>
<div id="all" style="display: flex">
</div>
</body>
<script>
var maps1 = [
[0,0,0,0,0,0,0,0],
[0,1,1,0,1,1,1,0],
[2,1,0,0,0,0,1,0],