2048.html
changeset 7 d8106c8c0481
parent 4 732aef931a9e
child 10 70ece7f758a0
equal deleted inserted replaced
6:eb31d2025a1d 7:d8106c8c0481
     2 <html>
     2 <html>
     3 <head>
     3 <head>
     4   <title>2048 AI</title>
     4   <title>2048 AI</title>
     5   <meta name="viewport" content="width=device-width; initial-scale=1.0"/>
     5   <meta name="viewport" content="width=device-width; initial-scale=1.0"/>
     6   <meta charset="utf-8"/>
     6   <meta charset="utf-8"/>
       
     7 
       
     8   <script src="board.js"></script>
       
     9   <script src="perf.js"></script>
     7 
    10 
     8   <style>
    11   <style>
     9     body {
    12     body {
    10       width: 100%;
    13       width: 100%;
    11     }
    14     }
   153             return false;
   156             return false;
   154         }
   157         }
   155       }
   158       }
   156       return true;
   159       return true;
   157     }
   160     }
   158     board.random = function(brd) {
   161     board.putRandom = function(brd) {
   159       var cnt = board.freeCnt(brd);
   162       var cnt = board.freeCnt(brd);
   160       cnt = Math.floor(Math.random() * cnt)+1;
   163       cnt = Math.floor(Math.random() * cnt)+1;
   161       for (var i = 0; i < 4 && cnt > 0; i++) {
   164       for (var i = 0; i < 4 && cnt > 0; i++) {
   162         for (var j = 0; j < 4 && cnt > 0; j++) {
   165         for (var j = 0; j < 4 && cnt > 0; j++) {
   163           if (brd[i][j] !== 0)
   166           if (brd[i][j] !== 0)
   164             continue;
   167             continue;
   165           if (cnt === 1)
   168           if (cnt === 1)
   166             brd[i][j] = 2;
   169             brd[i][j] = (Math.random() > .9) ? 2 : 1;
   167           cnt--;
   170           cnt--;
   168         }
   171         }
   169       }
   172       }
   170     }
   173     }
   171     /* http://www.reddit.com/r/2048/comments/214njx/highest_possible_score_for_2048_warning_math */
   174     /* http://www.reddit.com/r/2048/comments/214njx/highest_possible_score_for_2048_warning_math */
   172     var boardScoreTbl = {"0": 0};
   175     var boardScoreTbl = [0];
   173     for (var i = 1, exp = 2; i < 16; i++, exp *= 2) {
   176     for (var i = 1, exp = 2; i < 16; i++, exp *= 2) {
   174       boardScoreTbl[exp] = (i-1)*exp;
   177       boardScoreTbl[i] = (i-1)*exp;
   175     }
   178     }
   176     board.score = function(brd) {
   179     board.score = function(brd) {
   177       var score = 0;
   180       var score = 0;
   178       var max = 0;
   181       var max = 0;
   179       for (var i = 0; i < 4; i++) {
   182       for (var i = 0; i < 4; i++) {
   182           score += boardScoreTbl[val];
   185           score += boardScoreTbl[val];
   183           if (max < val)
   186           if (max < val)
   184             max = val;
   187             max = val;
   185         }
   188         }
   186       }
   189       }
   187       return {score: score, max: max};
   190       return {score: score, max: Math.pow(2, max)};
   188     }
   191     }
   189 
   192 
   190     board.row = {};
   193     board.row = {};
   191     board.row.init = function() {
   194     board.row.init = function() {
   192       return {stack: [], curr: 0};
   195       return {stack: [], curr: 0};
   197       if (state.curr === 0) {
   200       if (state.curr === 0) {
   198         state.curr = val;
   201         state.curr = val;
   199         return;
   202         return;
   200       }
   203       }
   201       if (state.curr === val) {
   204       if (state.curr === val) {
   202         state.stack.push(state.curr*2);
   205         state.stack.push(state.curr+1);
   203         state.curr = 0;
   206         state.curr = 0;
   204       } else {
   207       } else {
   205         state.stack.push(state.curr);
   208         state.stack.push(state.curr);
   206         state.curr = val;
   209         state.curr = val;
   207       }
   210       }
   303       boardDom.querySelectorAll("tr")[i].querySelectorAll("td")[j].innerHTML = val;
   306       boardDom.querySelectorAll("tr")[i].querySelectorAll("td")[j].innerHTML = val;
   304     }
   307     }
   305     ui.board.update = function(brd) {
   308     ui.board.update = function(brd) {
   306       for (var i = 0; i < 4; i++) {
   309       for (var i = 0; i < 4; i++) {
   307         for (var j = 0; j < 4; j++) {
   310         for (var j = 0; j < 4; j++) {
   308           ui.board.set(i, j, (brd[i][j] >= 2) ? brd[i][j] : "");
   311           ui.board.set(i, j, (brd[i][j] >= 1) ? brd[i][j] : "");
   309         }
   312         }
   310       }
   313       }
   311     }
   314     }
   312     ui.score = {};
   315     ui.score = {};
   313     var scoreDom = document.getElementById("score");
   316     var scoreDom = document.getElementById("score");
   332 
   335 
   333     function start() {
   336     function start() {
   334       ui.score.clear();
   337       ui.score.clear();
   335       ui.message.clear();
   338       ui.message.clear();
   336       board.current = board.create();
   339       board.current = board.create();
   337       board.random(board.current);
   340       board.putRandom(board.current);
   338       ui.board.update(board.current);
   341       ui.board.update(board.current);
   339     }
   342     }
   340     document.getElementById("start").addEventListener("click", start);
   343     document.getElementById("start").addEventListener("click", start);
   341 
   344 
   342     function up() {
   345     function up() {
   343       var updated = board.move.up(board.current);
   346       var updated = board.move.up(board.current);
   344       if (updated) {
   347       if (updated) {
   345         board.random(board.current);
   348         board.putRandom(board.current);
   346         ui.board.update(board.current);
   349         ui.board.update(board.current);
   347         ui.score.update(board.current);
   350         ui.score.update(board.current);
   348       }
   351       }
   349     }
   352     }
   350     document.getElementById("up").addEventListener("click", up);
   353     document.getElementById("up").addEventListener("click", up);
   351     function down() {
   354     function down() {
   352       var updated = board.move.down(board.current);
   355       var updated = board.move.down(board.current);
   353       if (updated) {
   356       if (updated) {
   354         board.random(board.current);
   357         board.putRandom(board.current);
   355         ui.board.update(board.current);
   358         ui.board.update(board.current);
   356         ui.score.update(board.current);
   359         ui.score.update(board.current);
   357       }
   360       }
   358     }
   361     }
   359     document.getElementById("down").addEventListener("click", down);
   362     document.getElementById("down").addEventListener("click", down);
   360     function left() {
   363     function left() {
   361       var updated = board.move.left(board.current);
   364       var updated = board.move.left(board.current);
   362       if (updated) {
   365       if (updated) {
   363         board.random(board.current);
   366         board.putRandom(board.current);
   364         ui.board.update(board.current);
   367         ui.board.update(board.current);
   365         ui.score.update(board.current);
   368         ui.score.update(board.current);
   366       }
   369       }
   367     }
   370     }
   368     document.getElementById("left").addEventListener("click", left);
   371     document.getElementById("left").addEventListener("click", left);
   369     function right() {
   372     function right() {
   370       var updated = board.move.right(board.current);
   373       var updated = board.move.right(board.current);
   371       if (updated) {
   374       if (updated) {
   372         board.random(board.current);
   375         board.putRandom(board.current);
   373         ui.board.update(board.current);
   376         ui.board.update(board.current);
   374         ui.score.update(board.current);
   377         ui.score.update(board.current);
   375       }
   378       }
   376     }
   379     }
   377     document.getElementById("right").addEventListener("click", right);
   380     document.getElementById("right").addEventListener("click", right);
   409         ui.message.set("I don't know how to move!");
   412         ui.message.set("I don't know how to move!");
   410         return;
   413         return;
   411       }
   414       }
   412       var updated = board.move[fn].call(null, board.current);
   415       var updated = board.move[fn].call(null, board.current);
   413       if (updated) {
   416       if (updated) {
   414         board.random(board.current);
   417         board.putRandom(board.current);
   415         ui.board.update(board.current);
   418         ui.board.update(board.current);
   416         ui.score.update(board.current);
   419         ui.score.update(board.current);
   417       } else {
   420       } else {
   418         ui.message.set("Wrong move!");
   421         ui.message.set("Wrong move!");
   419       }
   422       }
   432           ui.message.set("I don't know how to move!");
   435           ui.message.set("I don't know how to move!");
   433           return;
   436           return;
   434         }
   437         }
   435         var updated = board.move[fn].call(null, board.current);
   438         var updated = board.move[fn].call(null, board.current);
   436         if (updated) {
   439         if (updated) {
   437           board.random(board.current);
   440           board.putRandom(board.current);
   438         } else {
   441         } else {
   439           ui.board.update(board.current);
   442           ui.board.update(board.current);
   440           ui.score.update(board.current);
   443           ui.score.update(board.current);
   441           ui.message.set("Wrong move!");
   444           ui.message.set("Wrong move!");
   442           return;
   445           return;