這是左手法則的流程圖，網上其他流傳的都是錯誤，我當時就是信網上的圖浪費我半天時間
<!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) {
Gomaze(Nrow,Ncol,'right');
}
var Nrow = 0;
var Ncol =0;
function Gomaze(row,col,direct) {
let step =panel[0][0];
var flag =1;
let Row = 0;
let Col = 0;
console.log("start-----------");
console.log(row);
console.log(col);
console.log(direct);
if((row==19)&&(col==19)){
console.log("over-----------");
}else{
if(CheckLeftwall(row,col,direct)){
console.log("111-----------");
console.log(row);
console.log(col);
console.log(direct);
if(Checkforheadwall(row,col,direct)){
console.log("333-----------");
let newdir = Turnright(direct);
Gomaze(row,col,newdir);
}else{
console.log("444-----------");
var newStep = Gohead(row,col,direct);
console.log("step-----------");
console.log(newStep[0]);
console.log(newStep[1]);
console.log("step-----------");
Gomaze(newStep[0],newStep[1],direct);
}
}else{
console.log("222-----------");
let newdir = Turnleft(direct);
console.log(row);
console.log(col);
console.log(newdir);
var newStep = Gohead(row,col,newdir);
Gomaze(newStep[0],newStep[1],newdir);
}
}
}
function Gohead(Nrow,Ncol,direct){
switch(direct){
case "top":
Ncol++;
rows[Nrow].children[Ncol].style.background = '#8CEA00';
break;
case "left":
Nrow--;
rows[Nrow].children[Ncol].style.background = '#003D79';
break;
case "bottom":
Ncol--;
rows[Nrow].children[Ncol].style.background = '#FF5151';
break;
case "right":
Nrow++;
rows[Nrow].children[Ncol].style.background = '#000';
break;
}
var Step = [Nrow,Ncol];
return Step;
}
function Checkforheadwall(row,col,direct){
let check;
switch(direct){
case "top":
check = panel[row][col]['right'];
break;
case "left":
check = panel[row][col]['top'];
break;
case "right":
check = panel[row][col]['bottom'];
break;
case "bottom":
check = panel[row][col]['left'];
break;
}
return check;
}
function Turnright(direct){
let nextdir;
switch(direct){
case "top":
nextdir='right';
break;
case "left":
nextdir='top';
break;
case "right":
nextdir='bottom';
break;
case "bottom":
nextdir='left';
break;
}
return nextdir;
}
function Turnleft(direct){
let nextdir;
switch(direct){
case "top":
nextdir='left';
break;
case "left":
nextdir='bottom';
break;
case "right":
nextdir='top';
break;
case "bottom":
nextdir='right';
break;
}
return nextdir;
}
function CheckLeftwall(row,col,direct){
let check;
switch(direct){
case "top":
check = panel[row][col]['top'];
break;
case "left":
check = panel[row][col]['left'];
break;
case "right":
check = panel[row][col]['right'];
break;
case "bottom":
check = panel[row][col]['bottom'];
break;
}
return check;
}
console.log(rows);
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>