react學習--左手法則走迷宮
阿新 • • 發佈:2019-01-11
這是左手法則的流程圖,網上其他流傳的都是錯誤,我當時就是信網上的圖浪費我半天時間
<!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>