2048.html
changeset 17 06ad7999b9f6
parent 16 ab283d2534db
child 20 ab294e8db00c
equal deleted inserted replaced
16:ab283d2534db 17:06ad7999b9f6
   139         for (var j = 0; j < 4; j++) {
   139         for (var j = 0; j < 4; j++) {
   140           ui.board.set(i, j, brd[i][j]);
   140           ui.board.set(i, j, brd[i][j]);
   141         }
   141         }
   142       }
   142       }
   143     }
   143     }
       
   144     ui.board.handleEdit = function(tdDom, i, j) {
       
   145       if (!tdDom.firstChild || tdDom.firstChild.nodeType === Node.TEXT_NODE) {
       
   146         if (tdDom.firstChild)
       
   147           tdDom.removeChild(tdDom.firstChild);
       
   148         var inputDom = document.createElement('input');
       
   149         inputDom.value = board.current[i][j];
       
   150         inputDom.style.width = '1em';
       
   151         tdDom.appendChild(inputDom);
       
   152         inputDom.focus();
       
   153         inputDom.select();
       
   154         inputDom.addEventListener("blur", function(tdDom, i, j) {
       
   155           return function(event) {
       
   156             ui.board.handleEdit(tdDom, i, j);
       
   157             return false;
       
   158           }
       
   159         }(tdDom, i, j));
       
   160       } else {
       
   161         var inputDom = tdDom.firstChild;
       
   162         var val = parseInt(inputDom.value);
       
   163         if (0 <= val && val < 15) {
       
   164           board.current[i][j] = val;
       
   165           ui.board.set(i, j, val);
       
   166         } else {
       
   167           ui.board.set(i, j, board.current[i][j]);
       
   168         }
       
   169       }
       
   170     }
       
   171     ui.board.enableEdit = function() {
       
   172       var trDoms = boardDom.querySelectorAll("tr");
       
   173       for (var i = 0; i < 4; i++) {
       
   174         var tdDoms = trDoms[i].querySelectorAll("td");
       
   175         for (var j = 0; j < 4; j++) {
       
   176           var tdDom = tdDoms[j];
       
   177           tdDom.addEventListener("click", function(tdDom, i, j) {
       
   178             return function(event) {
       
   179               ui.board.handleEdit(tdDom, i, j);
       
   180               return false;
       
   181             }
       
   182           }(tdDom, i, j));
       
   183           tdDom.addEventListener("keyup", function(tdDom, i, j) {
       
   184             return function(event) {
       
   185               if (event.keyCode === 13)
       
   186                 ui.board.handleEdit(tdDom, i, j);
       
   187             }
       
   188           }(tdDom, i, j));
       
   189         }
       
   190       }
       
   191     }
       
   192     ui.board.enableEdit();
       
   193 
   144     ui.score = {};
   194     ui.score = {};
   145     var scoreDom = document.getElementById("score");
   195     var scoreDom = document.getElementById("score");
   146     var maxDom = document.getElementById("max");
   196     var maxDom = document.getElementById("max");
   147     var speedDom = document.getElementById("speed");
   197     var speedDom = document.getElementById("speed");
   148     var turnDom = document.getElementById("turn");
   198     var turnDom = document.getElementById("turn");
   218       }
   268       }
   219       return false;
   269       return false;
   220     });
   270     });
   221 
   271 
   222     document.getElementById("test").addEventListener("click", function() {
   272     document.getElementById("test").addEventListener("click", function() {
   223       console.log("x1: %o", ui.brdEngine);
       
   224       board.move.replaceByBoardJS(ui.brdEngine);
   273       board.move.replaceByBoardJS(ui.brdEngine);
   225     });
   274     });
   226     
   275     
   227     ui.message = {};
   276     ui.message = {};
   228     var messageDom = document.getElementById("message-area");
   277     var messageDom = document.getElementById("message-area");