React Learning - 方向键走迷宫
最编程
2024-06-29 21:10:55
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#cells {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
.cell {
width: 20px;
height: 20px;
border: 1px solid transparent;
}
.top {
border-top-color: #000;
}
.bottom {
border-bottom-color: #000;
}
.left {
border-left-color: #000;
}
.right {
border-right-color: #000;
}
.rat {
width: 20px;
height: 20px;
display: block;
position: absolute;
background: orange!important;
}
</style>
</head>
<body>
<div id="rats" class="rat"></div>
<div id="cells">
<div class="row">
<div class="top cell"></div>
<div class="top bottom right cell"></div>
<div class="top left cell"></div>
<div class="top bottom cell"></div>
<div class="top bottom cell"></div>
<div class="top bottom cell"></div>
<div class="top bottom cell"></div>
<div class="top cell"></div>
<div class="top cell"></div>
<div class="top bottom cell"></div>
<div class="top bottom cell"></div>
<div class="top bottom cell"></div>
<div class="top bottom right cell"></div>
<div class="top left cell"></div>
<div class="top bottom cell"></div>
<div class="top bottom cell"></div>
<div class="top cell"></div>
<div class="top bottom cell"></div>
<div class="top right cell"></div>
<div class="top left right cell"></div>
</div>
<div class="row">
<div class="bottom left cell"></div>
<div class="top bottom cell"></div>
<div class="bottom cell"></div>
<div class="top bottom cell"></div>
<div class="top cell"></div>
<div class="top bottom cell"></div>
<div class="top right cell"></div>
<div class="left right cell"></div>
<div class="left cell"></div>
<div class="top right cell"></div>
<div class="top left cell"></div>
<div class="top bottom cell"></div>
<div class="top bottom cell"></div>
<div class="bottom cell"></div>
<div class="top bottom cell"></div>
<div class="top bottom right cell"></div>
<div class="left cell"></div>
<div class="top right cell"></div>
<div class="left right cell"></div>
<div class="left right cell"></div>
</div>
<div class="row">
<div class="top left cell"></div>
<div class="top bottom cell"></div>
<div class="top right cell"></div>
<div class="top left cell"></div>
<div class="right cell"></div>
<div class="top left right cell"></div>
<div class="left right cell"></div>
<div class="left right cell"></div>
<div class="left right cell"></div>
<div class="left right cell"></div>
<div class="bottom left cell"></div>
<div class="top bottom cell"></div>
<div class="top right cell"></div>
<div class="top left cell"></div>
<div class="top bottom cell"></div>
<div class="top right cell"></div>
<div class="left right cell"></div>
<div class="bottom left right cell"></div>
<div class="bottom left cell"></div>
<div class="bottom right cell"></div>
</div>
<div class="row">
<div class="bottom left right cell"></div>
<div class="top left cell"></div>
<div class="bottom right cell"></div>
<div class="left right cell"></div>
<div class="left right cell"></div>
<div class="bottom left cell"></div>
<div class="bottom right cell"></div>
<div class="left right cell"></div>
<div class="left right cell"></div>
<div class="bottom left cell"></div>
<div class="top bottom cell"></div>
<div class="top bottom right cell"></div>
<div class="left right cell"></div>
<div class="bottom left cell"></div>
<div class="top right cell"></div>
<div class="bottom left cell"></div>
<div class="bottom right cell"></div>
<div class="top left cell"></div>
<div class="top cell"></div>
<div class="top right cell"></div>
</div>
<div class="row">
<div class="top left cell"></div>
<div class="bottom right cell"></div>
<div class="top left cell"></div>
<div class="bottom right cell"></div>
<div class="left right cell"></div>
<div class="top left right cell"></div>
<div class="top left cell"></div>
<div class="bottom right cell"></div>
<div class="bottom left cell"></div>
<div class="top bottom cell"></div>
<div class="top right cell"></div>
<div class="top left cell"></div>
<div class="bottom cell"></div>
<div class="top bottom right cell"></div>
<div class="bottom left cell"></div>
<div class="top bottom cell"></div>
<div class="top bottom cell"></div>
<div class="bottom right cell"></div>
<div class="left right cell"></div>
<div class="left right cell"></div>
</div>
<div class="row">
<div class="left right cell"></div>
<div class="top bottom left cell"></div>
<div class="bottom cell"></div>
<div class="top right cell"></div>
<div class="left right cell"></div>
<div class="bottom left cell"></div>
<div class="bottom right cell"></div>
<div class="top left cell"></div>
<div class="top bottom cell"></div>
<div class="top right cell"></div>
<div class="bottom left cell"></div>
<div class="bottom right cell"></div>
<div class="top left cell"></div>
<div class="top bottom cell"></div>
<div class="top bottom cell"></div>
<div class="top bottom cell"></div>
<div class="top right cell"></div>
<div class="top left cell"></div>
<div class="bottom right cell"></div>
<div class="left right cell"></div>
</div>
<div class="row">
<div class="left right cell"></div>
<div class="top left cell"></div>
<div class="top bottom cell"></div>
<div class="bottom right cell"></div>
<div class="left right cell"></div>
<div class="top left right cell"></div>
<div class="top left cell"></div>
<div class="bottom cell"></div>
<div class="top right cell"></div>
<div class="bottom left cell"></div>
<div class="top bottom cell"></div>
<div class="top bottom cell"></div>
<div class="bottom right cell"></div>
<div class="top bottom left cell"></div>
<div class="top cell"></div>
<div class="top bottom cell"></div>
<div class="bottom right cell"></div>
<div class="left right cell"></div>
<div class="top left cell"></div>
<div class="right cell"></div>
</div>
<div class="row">
<div class="bottom left cell"></div>
<div class="bottom right cell"></div>
<div class="top left cell"></div>
<div class="top bottom cell"></div>
<div class="bottom right cell"></div>
<div class="left right cell"></div>
<div class="left right cell"></div>
<div class="top left cell"></div>
<div class="right cell"></div>
<div class="top left cell"></div>
<div class="top right cell"></div>
<div class="top left cell"></div>
<div class="top bottom cell"></div>
<div class="top right cell"></div>
<div class="left cell"></div>
<div class="top bottom cell"></div>
<div class="top bottom cell"></div>
<div class="right cell"></div>
<div class="left right cell"></div>
<div class="left right cell"></div>
</div>
<div class="row">
<div class="top bottom left cell"></div>
<div class="top right cell"></div>
<div class="left cell"></div>
<div class="top bottom cell"></div>
<div class="top right cell"></div>
<div class="bottom left cell"></div>
<div class="bottom right cell"></div>
<div class="left right cell"></div>
<div class="left right cell"></div>
<div class="left right cell"></div>
<div class="bottom left cell"></div>
<div class="bottom right cell"></div>
<div class="top left cell"></div>
<div class="bottom right cell"></div>
<div class="bottom left right cell"></div>
<div class="top left cell"></div>
<div class="top bottom right cell"></div>
<div class="left right cell"></div>
<div class="left right cell"></div>
<div class="bottom left right cell"></div>
</div>
<div class="row">
<div class="top left cell"></div>
<div class="bottom right cell"></div>
<div class="bottom left right cell"></div>
<div class="top left cell"></div>
<div class="bottom right cell"></div>
<div class="top left cell"></div>
<div class="top bottom cell"></div>
<div class="bottom right cell"></div>
<div class="left right cell"></div>
<div class="left right cell"></div>
<div class="top bottom left cell"></div>
<div class="top bottom cell"></div>
<div class="bottom cell"></div>
<div class="top bottom cell"></div>
<div class="top right cell"></div>
<div class="bottom left cell"></div>
<div class="top bottom cell"></div>
<div class="bottom right cell"></div>
<div class="bottom left cell"></div>
<div class="top right cell"></div>
</div>
<div class="row">
<div class="left right cell"></div>
<div class="top left cell"></div>
<div class="top bottom cell"></div>
<div class="right cell"></div>
<div class="top left cell"></div>
<div class="bottom right cell"></div>
<div class="top left cell"></div>
<div class="top bottom cell"></div>
<div class="bottom right cell"></div>
<div class="bottom left cell"></div>
<div class="top bottom cell"></div>
<div class="top bottom cell"></div>
<div class="top bottom cell"></div>
<div class="top right cell"></div>
<div class="bottom left cell"></div>
<div class="top bottom cell"></div>
<div class="top bottom cell"></div>
<div class="top bottom cell"></div>
<div class="top bottom cell"></div>
<div class="right cell"></div>
</div>
<div class="row">
<div class="left right cell"></div>
<div class="left right cell"></div>
<div class="top left cell"></div>
<div class="bottom right cell"></div>
<div class="bottom left cell"></div>
<div class="top right cell"></div>
<div class="bottom left cell"></div>
<div class="top bottom cell"></div>
<div class="top cell"></div>
<div class="top bottom cell"></div>
<div class="top bottom cell"></div>
<div class="top bottom cell"></div>
<div class="top right cell"></div>
<div class="bottom left cell"></div>
<div class="top bottom cell"></div>
<div class="top right cell"></div>
<div class="top left cell"></div>
<div class="top bottom cell"></div>
<div class="top bottom cell"></div>
<div class="right cell"></div>
</div>
<div class="row">
<div class="left right cell"></div>
<div class="left right cell"></div>
<div class="bottom left cell"></div>
<div class="top right cell"></div>
<div class="top left cell"></div>
<div class="bottom right cell"></div>
<div class="top left cell"></div>
<div class="top right cell"></div>
<div class="left cell"></div>
<div class="top right cell"></div>
<div class="top left cell"></div>
<div class="top bottom right cell"></div>
<div class="left right cell"></div>
<div class="top left right cell"></div>
<div class="top left cell"></div>
<div class="bottom right cell"></div>
<div class="bottom left cell"></div>
<div class="top right cell"></div>
<div class="top left cell"></div>
<div class="right cell"></div>
</div>
<div class="row">
<div class="left cell"></div>
<div class="bottom right cell"></div>
<div class="top bottom left cell"></div>
<div class="bottom right cell"></div>
<div class="bottom left cell"></div>
<div class="top right cell"></div>
<div class="bottom left right cell"></div>
<div class="left right cell"></div>
<div class="bottom left right cell"></div>
<div class="left right cell"></div>
<div class="bottom left cell"></div>
<div class="top bottom cell"></div>
<div class="bottom right cell"></div>
<div class="left right cell"></div>
<div class="left right cell"></div>
<div class="top bottom left cell"></div>
<div class="top right cell"></div>
<div class="left right cell"></div>
<div class="left right cell"></div>
<div class="left right cell"></div>
</div>
<div class="row">
<div class="left right cell"></div>
<div class="top left cell"></div>
<div class="top bottom cell"></div>
<div class="top bottom cell"></div>
<div class="top right cell"></div>
<div class="bottom left cell"></div>
<div class="top bottom cell"></div>
<div class="bottom right cell"></div>
<div class="top left cell"></div>
<div class="bottom cell"></div>
<div class="top bottom cell"></div>
<div class="top cell"></div>
<div class="top bottom cell"></div>
<div class="bottom right cell"></div>
<div class="bottom left cell"></div>
<div class="top cell"></div>
<div class="bottom right cell"></div>
<div class="left right cell"></div>
<div class="left right cell"></div>
<div class="bottom left right cell"></div>
</div>
<div class="row">
<div class="bottom left right cell"></div>
<div class="bottom left cell"></div>
<div class="top bottom cell"></div>
<div class="top right cell"></div>
<div class="left right cell"></div>
<div class="top left cell"></div>
<div class="top bottom cell"></div>
<div class="top right cell"></div>
<div class="left cell"></div>
<div class="top bottom cell"></div>
<div class="top right cell"></div>
<div class="bottom left cell"></div>
<div class="top bottom right cell"></div>
<div class="top left cell"></div>
<div class="top right cell"></div>
<div class="left right cell"></div>
<div class="top left cell"></div>
<div class="bottom right cell"></div>
<div class="bottom left cell"></div>
<div class="top right cell"></div>
</div>
<div class="row">
<div class="top left cell"></div>
<div class="top bottom cell"></div>
<div class="top right cell"></div>
<div class="bottom left right cell"></div>
<div class="left cell"></div>
<div class="bottom right cell"></div>
<div class="top bottom left cell"></div>
<div class="bottom right cell"></div>
<div class="left right cell"></div>
<div class="top left right cell"></div>
<div class="bottom left cell"></div>
<div class="top bottom cell"></div>
<div class="top right cell"></div>
<div class="left right cell"></div>
<div class="left right cell"></div>
<div class="left right cell"></div>
<div class="left right cell"></div>
<div class="top left cell"></div>
<div class="top bottom right cell"></div>
<div class="left right cell"></div>
</div>
<div class="row">
<div class="left right cell"></div>
<div class="top bottom left cell"></div>
<div class="right cell"></div>
<div class="top left cell"></div>
<div class="bottom cell"></div>
<div class="top bottom cell"></div>
<div class="top bottom cell"></div>
<div class="top cell"></div>
<div class="bottom right cell"></div>
<div class="left right cell"></div>
<div class="top left cell"></div>
<div class="top bottom cell"></div>
<div class="right cell"></div>
<div class="bottom left right cell"></div>
<div class="left right cell"></div>
<div class="left right cell"></div>
<div class="left right cell"></div>
<div class="left right cell"></div>
<div class="top left cell"></div>
<div class="bottom right cell"></div>
</div>
<div class="row">
<div class="left cell"></div>
<div class="top right cell"></div>
<div class="bottom left cell"></div>
<div class="bottom right cell"></div>
<div class="top left cell"></div>
<div class="top bottom cell"></div>
<div class="top bottom right cell"></div>
<div class="left right cell"></div>
<div class="top left cell"></div>
<div class="bottom right cell"></div>
<div class="left right cell"></div>
<div class="top left cell"></div>
<div class="bottom right cell"></div>
<div class="top left cell"></div>
<div class="bottom right cell"></div>
<div class="bottom left right cell"></div>
<div class="left right cell"></div>
<div class="bottom left cell"></div>
<div class="bottom right cell"></div>
<div class="top left right cell"></div>
</div>
<div class="row">
<div class="bottom left right cell"></div>
<div class="bottom left cell"></div>
<div class="top bottom cell"></div>
<div class="top bottom right cell"></div>
<div class="bottom left cell"></div>
<div class="top bottom cell"></div>
<div class="top bottom cell"></div>
<div class="bottom right cell"></div>
<div class="bottom left cell"></div>
<div class="top bottom cell"></div>
<div class="bottom right cell"></div>
<div class="bottom left cell"></div>
<div class="top bottom right cell"></div>
<div class="bottom left cell"></div>
<div class="top bottom cell"></div>
<div class="top bottom cell"></div>
<div class="bottom cell"></div>
<div class="top bottom cell"></div>
<div class="top bottom cell"></div>
<div class="bottom cell"></div>
</div>
</div>
<script>
const value = {top:false, left:false, bottom:false, right:false};
var Nleft=0;
var Ntop=0;
var Nright=0;
var Nbottom=0;
const panel = [];
const rows = document.getElementsByClassName('row');
const rat = document.getElementById("rats");
window.document.onkeydown = function(ent) {
var event = ent || window.event;
var step =panel[Ntop][Nleft];
switch(event.keyCode) {
case 37: //左
if(!step['left']){
Nleft--;
rat.style.left = Math.max(LeftTop.offsetLeft, rat.offsetLeft - 22) + "px";
}
break;
case 38: //上
if(!step['top']){
Ntop--;
rat.style.top = Math.max( LeftTop.offsetTop, rat.offsetTop - 22) + "px";
}
break;
case 39: //右
if(!step['right']){
if((Ntop==19)&&(Nleft==19)){
console.log("ok --------=");
}else{
Nleft++;
rat.style.left = Math.min(RightBottom.offsetLeft, rat.offsetLeft + 22) + "px";
}
}
break;
case 40: //下
if(!step['bottom']){
Ntop++;
rat.style.top = Math.min(RightBottom.offsetTop, rat.offsetTop + 22) + "px";
}
break;
}
}
var LeftTop = rows[0].children[0];
var RightBottom = rows[19].children[19];
rat.style.left = LeftTop.offsetLeft + "px";
rat.style.top = LeftTop.offsetTop + 1 + "px";
for(let row of rows) {
const nodes = row.children;
let eachRow = [];
for (let node of nodes) {
const borders = node.classList.value.split(' ').filter(className => ['top', 'left', 'right', 'bottom'].indexOf(className) != -1)
const borderMap = {}
borders.forEach(line => borderMap[line] = true)
eachRow.push(Object.assign({}, value, borderMap))
}
panel.push(eachRow)
}
console.log(JSON.stringify(panel))
</script>
</body>
</html>