react学習の--方向キー迷路を歩く

20880 ワード

react





  
  
  
  Document


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

TIL 211112

python-javascript基礎構文