2048.html
changeset 34 16b711a81a16
parent 33 f1bbe12e2c3d
child 35 3d56325d7002
equal deleted inserted replaced
33:f1bbe12e2c3d 34:16b711a81a16
    34       margin: 10px 0 2px 0;
    34       margin: 10px 0 2px 0;
    35       background-color: cornsilk;
    35       background-color: cornsilk;
    36     }
    36     }
    37     div.move-control, div.score-conrol {
    37     div.move-control, div.score-conrol {
    38       padding: 3px;
    38       padding: 3px;
       
    39     }
       
    40     div.move-control button.suggestion {
       
    41       background-color: cyan;
    39     }
    42     }
    40     div.ai-control {
    43     div.ai-control {
    41       padding: 2px 2px 2px 1em;
    44       padding: 2px 2px 2px 1em;
    42     }
    45     }
    43     div.ai-control:before {
    46     div.ai-control:before {
   299     ui.action = {};
   302     ui.action = {};
   300 
   303 
   301     ui.action.start = function() {
   304     ui.action.start = function() {
   302       ui.score.clear();
   305       ui.score.clear();
   303       ui.message.clear();
   306       ui.message.clear();
       
   307       ui.action.clearSuggestion();
   304       board.current = board.create();
   308       board.current = board.create();
   305       board.putRandom(board.current);
   309       board.putRandom(board.current);
   306       ui.board.update(board.current);
   310       ui.board.update(board.current);
   307     }
   311     }
   308     document.getElementById("start").addEventListener("click", ui.action.start);
   312     document.getElementById("start").addEventListener("click", ui.action.start);
   309 
   313 
   310     ui.action.up = function() {
   314     ui.action.up = function() {
       
   315       ui.action.clearSuggestion();
   311       var updated = board.move.up(board.current);
   316       var updated = board.move.up(board.current);
   312       if (updated) {
   317       if (updated) {
   313         board.putRandom(board.current);
   318         board.putRandom(board.current);
   314         ui.board.update(board.current);
   319         ui.board.update(board.current);
   315         ui.score.update(board.current);
   320         ui.score.update(board.current);
   316         ui.ai.current && ui.ai.current.cleanup();
   321         ui.ai.current && ui.ai.current.cleanup();
   317       }
   322       }
   318     }
   323     }
   319     document.getElementById("up").addEventListener("click", ui.action.up);
   324     document.getElementById("up").addEventListener("click", ui.action.up);
   320     ui.action.down = function() {
   325     ui.action.down = function() {
       
   326       ui.action.clearSuggestion();
   321       var updated = board.move.down(board.current);
   327       var updated = board.move.down(board.current);
   322       if (updated) {
   328       if (updated) {
   323         board.putRandom(board.current);
   329         board.putRandom(board.current);
   324         ui.board.update(board.current);
   330         ui.board.update(board.current);
   325         ui.score.update(board.current);
   331         ui.score.update(board.current);
   326         ui.ai.current && ui.ai.current.cleanup();
   332         ui.ai.current && ui.ai.current.cleanup();
   327       }
   333       }
   328     }
   334     }
   329     document.getElementById("down").addEventListener("click", ui.action.down);
   335     document.getElementById("down").addEventListener("click", ui.action.down);
   330     ui.action.left = function() {
   336     ui.action.left = function() {
       
   337       ui.action.clearSuggestion();
   331       var updated = board.move.left(board.current);
   338       var updated = board.move.left(board.current);
   332       if (updated) {
   339       if (updated) {
   333         board.putRandom(board.current);
   340         board.putRandom(board.current);
   334         ui.board.update(board.current);
   341         ui.board.update(board.current);
   335         ui.score.update(board.current);
   342         ui.score.update(board.current);
   336         ui.ai.current && ui.ai.current.cleanup();
   343         ui.ai.current && ui.ai.current.cleanup();
   337       }
   344       }
   338     }
   345     }
   339     document.getElementById("left").addEventListener("click", ui.action.left);
   346     document.getElementById("left").addEventListener("click", ui.action.left);
   340     ui.action.right = function() {
   347     ui.action.right = function() {
       
   348       ui.action.clearSuggestion();
   341       var updated = board.move.right(board.current);
   349       var updated = board.move.right(board.current);
   342       if (updated) {
   350       if (updated) {
   343         board.putRandom(board.current);
   351         board.putRandom(board.current);
   344         ui.board.update(board.current);
   352         ui.board.update(board.current);
   345         ui.score.update(board.current);
   353         ui.score.update(board.current);
   370     }
   378     }
   371     ui.message.set = function(msg) {
   379     ui.message.set = function(msg) {
   372       messageDom.innerHTML = msg;
   380       messageDom.innerHTML = msg;
   373     }
   381     }
   374 
   382 
   375     function step() {
   383     ui.action.checkGameOver = function() {
   376       ui.message.clear();
       
   377       if (board.gameOver(board.current)) {
   384       if (board.gameOver(board.current)) {
   378         ui.message.set("Game over!");
   385         ui.message.set("Game over!");
       
   386         return true;
       
   387       } else {
       
   388         return false;
       
   389       }
       
   390     }
       
   391     ui.action.checkMoveValid = function(move) {
       
   392       var tmpBrd = board.create();
       
   393       board.copy(board.current, tmpBrd);
       
   394       if (!(move in {"left":0,"right":0,"up":0,"down":0})) {
       
   395         ui.message.set("AI can't find move!");
       
   396         return false;
       
   397       }
       
   398       if ( ! board.move[move].call(null, tmpBrd)) {
       
   399         ui.message.set("AI move "+move+" is ivalid!");
       
   400         return false;
       
   401       }
       
   402       return true;
       
   403     }
       
   404 
       
   405     ui.action.clearSuggestion = function() {
       
   406       var btns = document.querySelectorAll('div.move-control button');
       
   407       for (var i = 0; i < btns.length; i++)
       
   408         btns[i].classList.remove('suggestion');
       
   409     }
       
   410     ui.action.suggest = function() {
       
   411       ui.action.clearSuggestion();
       
   412       ui.message.clear();
       
   413       if (ui.action.checkGameOver())
   379         return;
   414         return;
   380       }
       
   381       var tmpBrd = board.create();
   415       var tmpBrd = board.create();
   382       board.copy(board.current, tmpBrd);
   416       board.copy(board.current, tmpBrd);
   383       var move = ui.ai.current.analyse(tmpBrd);
   417       var move = ui.ai.current.analyse(tmpBrd);
   384       if (typeof move === 'undefined') {
   418       ui.ai.current.cleanup();
   385         ui.message.set("I don't know how to move!");
   419       if ( ! ui.action.checkMoveValid(move))
   386         return;
   420         return;
   387       }
   421       document.getElementById(move).classList.add('suggestion');
   388       var updated = board.move[move].call(null, board.current);
   422     }
   389       if (updated) {
   423     document.getElementById("suggest").addEventListener("click", ui.action.suggest);
   390         board.putRandom(board.current);
   424     ui.action.step = function() {
   391         ui.board.update(board.current);
   425       ui.message.clear();
   392         ui.score.update(board.current);
   426       ui.action.clearSuggestion();
   393       } else {
   427       if (ui.action.checkGameOver())
   394         ui.message.set("Wrong move!");
   428         return;
   395       }
   429       var tmpBrd = board.create();
   396     }
   430       board.copy(board.current, tmpBrd);
   397     document.getElementById("step").addEventListener("click", step);
   431       var move = ui.ai.current.analyse(tmpBrd);
       
   432       ui.ai.current.cleanup();
       
   433       if ( ! ui.action.checkMoveValid(move))
       
   434         return;
       
   435       board.move[move].call(null, board.current);
       
   436       board.putRandom(board.current);
       
   437       ui.board.update(board.current);
       
   438       ui.score.update(board.current);
       
   439     }
       
   440     document.getElementById("step").addEventListener("click", ui.action.step);
   398 
   441 
   399     ui.action.finish = function() {
   442     ui.action.finish = function() {
   400       ui.message.clear();
   443       ui.message.clear();
       
   444       ui.action.clearSuggestion();
   401       var step = 0;
   445       var step = 0;
   402       var tsFrom = new Date().getTime();
   446       var tsFrom = new Date().getTime();
   403       while (!board.gameOver(board.current)) {
   447       while (!board.gameOver(board.current)) {
   404         var tmpBrd = board.create();
   448         var tmpBrd = board.create();
   405         board.copy(board.current, tmpBrd);
   449         board.copy(board.current, tmpBrd);