2048.html
changeset 45 0bcdec3bdaa8
parent 44 518ab579d24b
child 46 4dadaff6eba4
equal deleted inserted replaced
44:518ab579d24b 45:0bcdec3bdaa8
   233     var boardDom = document.getElementById("board");
   233     var boardDom = document.getElementById("board");
   234     var ui = {};
   234     var ui = {};
   235     ui.board = {};
   235     ui.board = {};
   236     ui.board.val2048Dom = document.getElementById('2048');
   236     ui.board.val2048Dom = document.getElementById('2048');
   237     ui.board.val2048Dom.addEventListener("click", function(event) {
   237     ui.board.val2048Dom.addEventListener("click", function(event) {
   238       ui.board.update(board.current);
   238       ui.board.update(ui.board.position);
   239       localStorage.val2048 = ui.board.val2048Dom.checked;
   239       localStorage.val2048 = ui.board.val2048Dom.checked;
   240       event.target.blur();
   240       event.target.blur();
   241     });
   241     });
   242     ui.board.val2048 = function(val) {
   242     ui.board.val2048 = function(val) {
   243       if (ui.board.val2048Dom.checked)
   243       if (ui.board.val2048Dom.checked)
   268     ui.board.handleEdit = function(tdDom, i, j) {
   268     ui.board.handleEdit = function(tdDom, i, j) {
   269       if (!tdDom.firstChild || tdDom.firstChild.nodeType === Node.TEXT_NODE) {
   269       if (!tdDom.firstChild || tdDom.firstChild.nodeType === Node.TEXT_NODE) {
   270         if (tdDom.firstChild)
   270         if (tdDom.firstChild)
   271           tdDom.removeChild(tdDom.firstChild);
   271           tdDom.removeChild(tdDom.firstChild);
   272         var inputDom = document.createElement('input');
   272         var inputDom = document.createElement('input');
   273         inputDom.value = board.current[i][j];
   273         inputDom.value = ui.board.position[i][j];
   274         inputDom.style.width = '1em';
   274         inputDom.style.width = '1em';
   275         tdDom.appendChild(inputDom);
   275         tdDom.appendChild(inputDom);
   276         inputDom.focus();
   276         inputDom.focus();
   277         inputDom.select();
   277         inputDom.select();
   278         inputDom.addEventListener("blur", function(tdDom, i, j) {
   278         inputDom.addEventListener("blur", function(tdDom, i, j) {
   283         }(tdDom, i, j));
   283         }(tdDom, i, j));
   284       } else {
   284       } else {
   285         var inputDom = tdDom.firstChild;
   285         var inputDom = tdDom.firstChild;
   286         var val = parseInt(inputDom.value);
   286         var val = parseInt(inputDom.value);
   287         if (0 <= val && val < 15) {
   287         if (0 <= val && val < 15) {
   288           board.current[i][j] = val;
   288           ui.board.position[i][j] = val;
   289           ui.board.set(i, j, val);
   289           ui.board.set(i, j, val);
   290         } else {
   290         } else {
   291           ui.board.set(i, j, board.current[i][j]);
   291           ui.board.set(i, j, ui.board.position[i][j]);
   292         }
   292         }
   293       }
   293       }
   294     }
   294     }
   295     ui.board.enableEdit = function() {
   295     ui.board.enableEdit = function() {
   296       var trDoms = boardDom.querySelectorAll("tr");
   296       var trDoms = boardDom.querySelectorAll("tr");
   365     ui.game.setMessage = function(msg) {
   365     ui.game.setMessage = function(msg) {
   366       messageDom.innerHTML = msg;
   366       messageDom.innerHTML = msg;
   367     }
   367     }
   368 
   368 
   369     ui.game.checkGameOver = function() {
   369     ui.game.checkGameOver = function() {
   370       if (board.gameOver(board.current)) {
   370       if (board.gameOver(ui.board.position)) {
   371         ui.game.setMessage("Game over!");
   371         ui.game.setMessage("Game over!");
   372         return true;
   372         return true;
   373       } else {
   373       } else {
   374         return false;
   374         return false;
   375       }
   375       }
   376     }
   376     }
   377     ui.game.checkMoveValid = function(move) {
   377     ui.game.checkMoveValid = function(move) {
   378       var tmpBrd = board.create();
   378       var tmpBrd = board.create();
   379       board.copy(board.current, tmpBrd);
   379       board.copy(ui.board.position, tmpBrd);
   380       if (ui.game.dirs.indexOf(move) === -1) {
   380       if (ui.game.dirs.indexOf(move) === -1) {
   381         ui.game.setMessage("AI can't find move!");
   381         ui.game.setMessage("AI can't find move!");
   382         return false;
   382         return false;
   383       }
   383       }
   384       if ( ! board.move[move].call(null, tmpBrd)) {
   384       if ( ! board.move[move].call(null, tmpBrd)) {
   394       if (ui.game.checkGameOver())
   394       if (ui.game.checkGameOver())
   395         return false;
   395         return false;
   396       return true;
   396       return true;
   397     }
   397     }
   398     ui.game.finishStep = function() {
   398     ui.game.finishStep = function() {
   399       board.putRandom(board.current);
   399       board.putRandom(ui.board.position);
   400       ui.board.update(board.current);
   400       ui.board.update(ui.board.position);
   401       ui.score.update(board.current);
   401       ui.score.update(ui.board.position);
   402       localStorage.savedBoard = JSON.stringify(board.current);
   402       localStorage.savedBoard = JSON.stringify(ui.board.position);
   403     }
   403     }
   404 
   404 
   405     ////////////////////////////////////////////////////////////////
   405     ////////////////////////////////////////////////////////////////
   406     // Actions.
   406     // Actions.
   407 
   407 
   409 
   409 
   410     ui.action.start = function() {
   410     ui.action.start = function() {
   411       ui.score.clear();
   411       ui.score.clear();
   412       ui.suggestion.clear();
   412       ui.suggestion.clear();
   413       ui.game.clearMessage();
   413       ui.game.clearMessage();
   414       board.current = board.create();
   414       ui.board.position = board.create();
   415       board.putRandom(board.current);
   415       board.putRandom(ui.board.position);
   416       ui.board.update(board.current);
   416       ui.board.update(ui.board.position);
   417     }
   417     }
   418     document.getElementById("start").addEventListener("click", ui.action.start);
   418     document.getElementById("start").addEventListener("click", ui.action.start);
   419 
   419 
   420     for (var i = 0; i < ui.game.dirs.length; i++) {
   420     for (var i = 0; i < ui.game.dirs.length; i++) {
   421       var dir = ui.game.dirs[i];
   421       var dir = ui.game.dirs[i];
   422       ui.action[dir] = function(dir) {
   422       ui.action[dir] = function(dir) {
   423         return function() {
   423         return function() {
   424           if (ui.game.checkGameOver())
   424           if (ui.game.checkGameOver())
   425             return;
   425             return;
   426           ui.suggestion.clear();
   426           ui.suggestion.clear();
   427           var updated = board.move[dir](board.current);
   427           var updated = board.move[dir](ui.board.position);
   428           if (updated) {
   428           if (updated) {
   429             ui.game.finishStep();
   429             ui.game.finishStep();
   430             ui.ai.current && ui.ai.current.cleanup();
   430             ui.ai.current && ui.ai.current.cleanup();
   431           }
   431           }
   432         }
   432         }
   455         return;
   455         return;
   456       }
   456       }
   457       if ( ! ui.game.beginStep())
   457       if ( ! ui.game.beginStep())
   458         return;
   458         return;
   459       var tmpBrd = board.create();
   459       var tmpBrd = board.create();
   460       board.copy(board.current, tmpBrd);
   460       board.copy(ui.board.position, tmpBrd);
   461       var move = ui.ai.current.analyse(tmpBrd);
   461       var move = ui.ai.current.analyse(tmpBrd);
   462       ui.ai.current.cleanup();
   462       ui.ai.current.cleanup();
   463       if ( ! ui.game.checkMoveValid(move))
   463       if ( ! ui.game.checkMoveValid(move))
   464         return;
   464         return;
   465       ui.suggestion.set(move);
   465       ui.suggestion.set(move);
   471         return;
   471         return;
   472       }
   472       }
   473       if ( ! ui.game.beginStep())
   473       if ( ! ui.game.beginStep())
   474         return;
   474         return;
   475       var tmpBrd = board.create();
   475       var tmpBrd = board.create();
   476       board.copy(board.current, tmpBrd);
   476       board.copy(ui.board.position, tmpBrd);
   477       var move = ui.ai.current.analyse(tmpBrd);
   477       var move = ui.ai.current.analyse(tmpBrd);
   478       ui.ai.current.cleanup();
   478       ui.ai.current.cleanup();
   479       if ( ! ui.game.checkMoveValid(move))
   479       if ( ! ui.game.checkMoveValid(move))
   480         return;
   480         return;
   481       board.move[move].call(null, board.current);
   481       board.move[move].call(null, ui.board.position);
   482       ui.game.finishStep();
   482       ui.game.finishStep();
   483     }
   483     }
   484     document.getElementById("step").addEventListener("click", ui.action.step);
   484     document.getElementById("step").addEventListener("click", ui.action.step);
   485 
   485 
   486     ui.action.finish = function() {
   486     ui.action.finish = function() {
   489         return;
   489         return;
   490       }
   490       }
   491       ui.game.beginStep();
   491       ui.game.beginStep();
   492       var step = 0;
   492       var step = 0;
   493       var tsFrom = new Date().getTime();
   493       var tsFrom = new Date().getTime();
   494       while (!board.gameOver(board.current)) {
   494       while (!board.gameOver(ui.board.position)) {
   495         var tmpBrd = board.create();
   495         var tmpBrd = board.create();
   496         board.copy(board.current, tmpBrd);
   496         board.copy(ui.board.position, tmpBrd);
   497         var move = ui.ai.current.analyse(tmpBrd);
   497         var move = ui.ai.current.analyse(tmpBrd);
   498         if (typeof move === 'undefined') {
   498         if (typeof move === 'undefined') {
   499           ui.game.setMessage("I don't know how to move!");
   499           ui.game.setMessage("I don't know how to move!");
   500           return;
   500           return;
   501         }
   501         }
   502         var updated = board.move[move].call(null, board.current);
   502         var updated = board.move[move].call(null, ui.board.position);
   503         if (updated) {
   503         if (updated) {
   504           board.putRandom(board.current);
   504           board.putRandom(ui.board.position);
   505         } else {
   505         } else {
   506           ui.game.finishStep();
   506           ui.game.finishStep();
   507           ui.game.setMessage("Wrong move!");
   507           ui.game.setMessage("Wrong move!");
   508           return;
   508           return;
   509         }
   509         }
   589         ui.board.val2048Dom.checked = JSON.parse(localStorage.val2048);
   589         ui.board.val2048Dom.checked = JSON.parse(localStorage.val2048);
   590       } catch (ex) { }
   590       } catch (ex) { }
   591     }
   591     }
   592     if (localStorage.savedBoard) {
   592     if (localStorage.savedBoard) {
   593       try {
   593       try {
   594         board.current = JSON.parse(localStorage.savedBoard);
   594         ui.board.position = JSON.parse(localStorage.savedBoard);
   595         ui.board.update(board.current);
   595         ui.board.update(ui.board.position);
   596       } catch (ex) { }
   596       } catch (ex) { }
   597     } else {
   597     } else {
   598       ui.action.start();
   598       ui.action.start();
   599     }
   599     }
   600 
   600