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) { 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>