Mercurial Mercurial > 2048-js-ai / comparison
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help
Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
2048.html
changeset 30 1d19768ca71d
parent 27 8f96d09a4d94
child 31 9de51a02b039
equal deleted inserted replaced
29:30a09d50ae21 30:1d19768ca71d 
    26       height: 40px;
 
    26       height: 40px;
 
    27       border: 1px solid red;
 
    27       border: 1px solid red;
 
    28       margin: 0;
 
    28       margin: 0;
 
    29       text-align: center;
 
    29       text-align: center;
 
    30     }
 
    30     }
 
       
    31     div.ai-control {
 
       
    32       border: 1px red solid;
 
       
    33       display: inline-block;
 
       
    34       margin: 10px 0 2px 0;
 
       
    35       padding: 2px 2px 2px 1em;
 
       
    36       background-color: cornsilk;
 
       
    37     }
 
       
    38     div.ai-control:before {
 
       
    39       content: "AI: ";
 
       
    40       margin-left: -.5em;
 
       
    41       padding: 0;
 
       
    42     }
 
    31     .report > .name {
 
    43     .report > .name {
 
    32       font-weight: bold;
 
    44       font-weight: bold;
 
    33     }
 
    45     }
 
    34     div.ai {
 
    46     div.ai {
 
    35       border: 1px red solid;
 
    47       border: 1px red solid;
 
    95   </table>
 
   107   </table>
 
    96 
   108 
    97   <div id="control-area" class="area">
 
   109   <div id="control-area" class="area">
 
    98     <div>
 
   110     <div>
 
    99       <button id="start">Start</button>
 
   111       <button id="start">Start</button>
 
       
   112     </div>
 
       
   113     <div class="ai-control">
 
       
   114       <button id="suggest">Suggest</button>
 
   100       <button id="step">Step</button>
 
   115       <button id="step">Step</button>
 
   101       <button id="loop">Loop</button>
 
       
   102       <button id="finish">Finish</button>
 
   116       <button id="finish">Finish</button>
 
   103     </div>
 
   117     </div>
 
   104     <div>
 
   118     <div>
 
   105       <button id="left">left</button>
 
   119       <button id="left">left</button>
 
   106       <button id="up">up</button>
 
   120       <button id="up">up</button>
 
   263     ui.score.speed = function(speed, turn) {
 
   277     ui.score.speed = function(speed, turn) {
 
   264       speedDom.innerHTML = '' + speed;
 
   278       speedDom.innerHTML = '' + speed;
 
   265       turnDom.innerHTML = '' + turn;
 
   279       turnDom.innerHTML = '' + turn;
 
   266     }
 
   280     }
 
   267 
   281 
   268     function start() {
 
   282     ui.action = {};
 
       
   283 
       
   284     ui.action.start = function() {
 
   269       ui.score.clear();
 
   285       ui.score.clear();
 
   270       ui.message.clear();
 
   286       ui.message.clear();
 
   271       board.current = board.create();
 
   287       board.current = board.create();
 
   272       board.putRandom(board.current);
 
   288       board.putRandom(board.current);
 
   273       ui.board.update(board.current);
 
   289       ui.board.update(board.current);
 
   274     }
 
   290     }
 
   275     document.getElementById("start").addEventListener("click", start);
 
   291     document.getElementById("start").addEventListener("click", ui.action.start);
 
   276 
   292 
   277     function up() {
 
   293     ui.action.up = function() {
 
   278       var updated = board.move.up(board.current);
 
   294       var updated = board.move.up(board.current);
 
   279       if (updated) {
 
   295       if (updated) {
 
   280         board.putRandom(board.current);
 
   296         board.putRandom(board.current);
 
   281         ui.board.update(board.current);
 
   297         ui.board.update(board.current);
 
   282         ui.score.update(board.current);
 
   298         ui.score.update(board.current);
 
   283       }
 
   299         ui.ai.current && ui.ai.current.cleanup();
 
   284     }
 
   300       }
 
   285     document.getElementById("up").addEventListener("click", up);
 
   301     }
 
   286     function down() {
 
   302     document.getElementById("up").addEventListener("click", ui.action.up);
 
       
   303     ui.action.down = function() {
 
   287       var updated = board.move.down(board.current);
 
   304       var updated = board.move.down(board.current);
 
   288       if (updated) {
 
   305       if (updated) {
 
   289         board.putRandom(board.current);
 
   306         board.putRandom(board.current);
 
   290         ui.board.update(board.current);
 
   307         ui.board.update(board.current);
 
   291         ui.score.update(board.current);
 
   308         ui.score.update(board.current);
 
   292       }
 
   309         ui.ai.current && ui.ai.current.cleanup();
 
   293     }
 
   310       }
 
   294     document.getElementById("down").addEventListener("click", down);
 
   311     }
 
   295     function left() {
 
   312     document.getElementById("down").addEventListener("click", ui.action.down);
 
       
   313     ui.action.left = function() {
 
   296       var updated = board.move.left(board.current);
 
   314       var updated = board.move.left(board.current);
 
   297       if (updated) {
 
   315       if (updated) {
 
   298         board.putRandom(board.current);
 
   316         board.putRandom(board.current);
 
   299         ui.board.update(board.current);
 
   317         ui.board.update(board.current);
 
   300         ui.score.update(board.current);
 
   318         ui.score.update(board.current);
 
   301       }
 
   319         ui.ai.current && ui.ai.current.cleanup();
 
   302     }
 
   320       }
 
   303     document.getElementById("left").addEventListener("click", left);
 
   321     }
 
   304     function right() {
 
   322     document.getElementById("left").addEventListener("click", ui.action.left);
 
       
   323     ui.action.right = function() {
 
   305       var updated = board.move.right(board.current);
 
   324       var updated = board.move.right(board.current);
 
   306       if (updated) {
 
   325       if (updated) {
 
   307         board.putRandom(board.current);
 
   326         board.putRandom(board.current);
 
   308         ui.board.update(board.current);
 
   327         ui.board.update(board.current);
 
   309         ui.score.update(board.current);
 
   328         ui.score.update(board.current);
 
   310       }
 
   329         ui.ai.current && ui.ai.current.cleanup();
 
   311     }
 
   330       }
 
   312     document.getElementById("right").addEventListener("click", right);
 
   331     }
 
       
   332     document.getElementById("right").addEventListener("click", ui.action.right);
 
   313 
   333 
   314     document.body.addEventListener("keydown", function(event) {
 
   334     document.body.addEventListener("keydown", function(event) {
 
   315       var key = event.keyCode || event.which;
 
   335       var key = event.keyCode || event.which;
 
   316       switch (key) {
 
   336       switch (key) {
 
   317           case 38: up(); break;
 
   337           case 38: ui.action.up(); break;
 
   318           case 40: down(); break;
 
   338           case 40: ui.action.down(); break;
 
   319           case 37: left(); break;
 
   339           case 37: ui.action.left(); break;
 
   320           case 39: right(); break;
 
   340           case 39: ui.action.right(); break;
 
   321       }
 
   341       }
 
   322       return false;
 
   342       return false;
 
   323     });
 
   343     });
 
   324 
   344 
   325     document.getElementById("test").addEventListener("click", function() {
 
   345     document.getElementById("test").addEventListener("click", function() {
 
   357         ui.message.set("Wrong move!");
 
   377         ui.message.set("Wrong move!");
 
   358       }
 
   378       }
 
   359     }
 
   379     }
 
   360     document.getElementById("step").addEventListener("click", step);
 
   380     document.getElementById("step").addEventListener("click", step);
 
   361 
   381 
   362     function finish() {
 
   382     ui.action.finish = function() {
 
   363       ui.message.clear();
 
   383       ui.message.clear();
 
   364       var step = 0;
 
   384       var step = 0;
 
   365       var tsFrom = new Date().getTime();
 
   385       var tsFrom = new Date().getTime();
 
   366       while (!board.gameOver(board.current)) {
 
   386       while (!board.gameOver(board.current)) {
 
   367         var tmpBrd = board.create();
 
   387         var tmpBrd = board.create();
 
   385       var tsTo = new Date().getTime();
 
   405       var tsTo = new Date().getTime();
 
   386       ui.board.update(board.current);
 
   406       ui.board.update(board.current);
 
   387       ui.score.update(board.current);
 
   407       ui.score.update(board.current);
 
   388       ui.score.speed(step*1000.0/(tsTo-tsFrom), step);
 
   408       ui.score.speed(step*1000.0/(tsTo-tsFrom), step);
 
   389       ui.message.set("Game over!");
 
   409       ui.message.set("Game over!");
 
   390     }
 
   410       ui.ai.current && ui.ai.current.cleanup();
 
   391     document.getElementById("finish").addEventListener("click", finish);
 
   411     }
 
       
   412     document.getElementById("finish").addEventListener("click", ui.action.finish);
 
   392 
   413 
   393     ////////////////////////////////////////////////////////////////
 
   414     ////////////////////////////////////////////////////////////////
 
   394     // Register AIs.
 
   415     // Register AIs.
 
   395 
   416 
   396     ui.ai = {};
 
   417     ui.ai = {};
2048-js-ai