2048.html
author Oleksandr Gavenko <gavenkoa@gmail.com>
Tue, 09 Sep 2014 20:22:05 +0300
changeset 31 9de51a02b039
parent 30 1d19768ca71d
child 32 f48151863cdf
permissions -rw-r--r--
Visualise buttons.

<!DOCTYPE html>
<html>
<head>
  <title>2048 AI</title>
  <meta name="viewport" content="width=device-width; initial-scale=1.0"/>
  <meta charset="utf-8"/>

  <script src="rule.js"></script>
  <script src="board.js"></script>
  <script src="perf.js"></script>
  <script src="ai.js"></script>

  <style>
    body {
      font-size: 11pt;
    }
    h1, div.area {
      text-align: center;
      margin: 10px auto;
    }
    #board {
      margin: 10px auto;
    }
    #board td {
      width: 40px;
      height: 40px;
      border: 1px solid red;
      margin: 0;
      text-align: center;
    }
    div.ai-control, div.move-control {
      border: 1px red solid;
      display: inline-block;
      margin: 10px 0 2px 0;
      background-color: cornsilk;
    }
    div.move-control {
      padding: 2px;
    }
    div.ai-control {
      padding: 2px 2px 2px 1em;
    }
    div.ai-control:before {
      content: "AI: ";
      margin-left: -.5em;
      padding: 0;
    }
    .report > .name {
      font-weight: bold;
    }
    div.ai {
      border: 1px red solid;
      margin-top: 20px;
      padding: 2px;
      position: relative;
      background-color: cornsilk;
    }
    div.ai.enabled {
      background-color: wheat;
    }
    div.ai > h5 {
      margin: 2px 0 2px 6em;
    }
    button.ai {
      position: absolute;
      left: 1em;
      top: -1em;
    }
    div.ai > div.option {
      display: inline-block;
      float: left;
      margin: 1px 4px;
    }
    .clearfix {
      clear: both;
    }
    #test {
      display: none;
    }
  </style>
</head>
<body>

  <h1>2048</h1>

  <div id="score-area" class="area">Score: <span id="score">0</span>, Max: <span id="max">0</span>, Turn: <span id="turn">0</span>, Speed: <span id="speed">0</span> t/s</div>

  <div id="message-area" class="area"></div>

  <table id="board">
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>

  <div id="control-area" class="area">
    <div>
      <button id="start">Start</button>
    </div>
    <div class="ai-control">
      <button id="suggest">Suggest</button>
      <button id="step">Step</button>
      <button id="finish">Finish</button>
    </div>
    <div class="clearfix"></div>
    <div class="move-control">
      <table>
        <tr>
          <td></td><td><button id="up">up</button></td><td></td>
        </tr>
        <tr>
          <td><button id="left">left</button></td><td><button id="down">down</button></td><td><button id="right">right</button></td>
        </tr>
      </table>
      <button id="test">test</button>
    </div>
    <h1>AIs</h1>
    <div>
      <div class="ai" id="ai-random">
        <button class="ai">enable</button>
        <h5>bling random</h5>
      </div>
      <div class="ai" id="ai-blind-cycle">
        <button class="ai">enable</button>
        <h5>blind cycle</h5>
        <div class="option">
          <input type="checkbox" name="clockwise"/> clockwise
        </div>
        <div class="option">
          <input type="checkbox" name="whilePossible"/> max move in one direction
        </div>
        <div class="clearfix"></div>
      </div>
      <div class="ai" id="ai-next-max-value">
        <button class="ai">enable</button>
        <h5>next merge makes max value</h5>
      </div>
      <div class="ai" id="ai-deep-max-score">
        <button class="ai">enable</button>
        <h5>deep merges without simulation make max score</h5>
      </div>
      <div class="ai" id="ai-deep-max-score-corner">
        <button class="ai">enable</button>
        <h5>deep merges without simulation make max score + bonus if max value at corner/edge</h5>
      </div>
      <div class="ai" id="ai-expectimax">
        <button class="ai">enable</button>
        <h5>expectimax</h5>
      </div>
    </div>
  </div>

  <div id="report-area" class="area">
    <h1>Reports</h1>
    <div class="report" class="area">
      <div class="name">next max score</div>
      <table>
        <tr>
          <th>Max</th>
          <th>Count</th>
          <th>%</th>
        </tr>
        <tr>
          <td>128</td><td>8</td><td><div style="background: red; width: 100px">x</div></td>
        </tr>
        <tr>
          <td>256</td><td>4</td><td><div style="background: red; width: 50px">x</div></td>
        </tr>
        <tr>
          <td>512</td><td>12</td><td><div style="background: red; width: 150px">x</div></td>
        </tr>
      </table>
    </div>
  </div>

  <script>
    "use strict";

    var boardDom = document.getElementById("board");
    var ui = {};
    ui.board = {};
    /* 'val' typesafe.  */
    ui.board.set = function(i, j, val) {
      if (typeof val !== 'number')
        val = 0;
      var dom = boardDom.querySelectorAll("tr")[i].querySelectorAll("td")[j];
      if (0 < val && val < 15) {
        dom.innerHTML = val;
        var rgb = 'rgb(255,'+ (255-5*val-2*(val%2)) +','+ (255-10*val-5*((val-1)%2)) +')';
      } else {
        dom.innerHTML = '';
        var rgb = 'white';
      }
      dom.style.backgroundColor = rgb;
    }
    ui.board.update = function(brd) {
      for (var i = 0; i < 4; i++) {
        for (var j = 0; j < 4; j++) {
          ui.board.set(i, j, brd[i][j]);
        }
      }
    }
    ui.board.handleEdit = function(tdDom, i, j) {
      if (!tdDom.firstChild || tdDom.firstChild.nodeType === Node.TEXT_NODE) {
        if (tdDom.firstChild)
          tdDom.removeChild(tdDom.firstChild);
        var inputDom = document.createElement('input');
        inputDom.value = board.current[i][j];
        inputDom.style.width = '1em';
        tdDom.appendChild(inputDom);
        inputDom.focus();
        inputDom.select();
        inputDom.addEventListener("blur", function(tdDom, i, j) {
          return function(event) {
            ui.board.handleEdit(tdDom, i, j);
            return false;
          }
        }(tdDom, i, j));
      } else {
        var inputDom = tdDom.firstChild;
        var val = parseInt(inputDom.value);
        if (0 <= val && val < 15) {
          board.current[i][j] = val;
          ui.board.set(i, j, val);
        } else {
          ui.board.set(i, j, board.current[i][j]);
        }
      }
    }
    ui.board.enableEdit = function() {
      var trDoms = boardDom.querySelectorAll("tr");
      for (var i = 0; i < 4; i++) {
        var tdDoms = trDoms[i].querySelectorAll("td");
        for (var j = 0; j < 4; j++) {
          var tdDom = tdDoms[j];
          tdDom.addEventListener("click", function(tdDom, i, j) {
            return function(event) {
              ui.board.handleEdit(tdDom, i, j);
              return false;
            }
          }(tdDom, i, j));
          tdDom.addEventListener("keyup", function(tdDom, i, j) {
            return function(event) {
              if (event.keyCode === 13)
                ui.board.handleEdit(tdDom, i, j);
            }
          }(tdDom, i, j));
        }
      }
    }
    ui.board.enableEdit();

    ui.score = {};
    var scoreDom = document.getElementById("score");
    var maxDom = document.getElementById("max");
    var speedDom = document.getElementById("speed");
    var turnDom = document.getElementById("turn");
    ui.score.clear = function(brd) {
      scoreDom.innerHTML = '0';
      maxDom.innerHTML = '0';
      speedDom.innerHTML = '0';
      turnDom.innerHTML = '0';
    }
    ui.score.update = function(brd) {
      var score = board.score(brd);
      scoreDom.innerHTML = '' + score.score;
      maxDom.innerHTML = '' + score.max;
    }
    ui.score.speed = function(speed, turn) {
      speedDom.innerHTML = '' + speed;
      turnDom.innerHTML = '' + turn;
    }

    ui.action = {};

    ui.action.start = function() {
      ui.score.clear();
      ui.message.clear();
      board.current = board.create();
      board.putRandom(board.current);
      ui.board.update(board.current);
    }
    document.getElementById("start").addEventListener("click", ui.action.start);

    ui.action.up = function() {
      var updated = board.move.up(board.current);
      if (updated) {
        board.putRandom(board.current);
        ui.board.update(board.current);
        ui.score.update(board.current);
        ui.ai.current && ui.ai.current.cleanup();
      }
    }
    document.getElementById("up").addEventListener("click", ui.action.up);
    ui.action.down = function() {
      var updated = board.move.down(board.current);
      if (updated) {
        board.putRandom(board.current);
        ui.board.update(board.current);
        ui.score.update(board.current);
        ui.ai.current && ui.ai.current.cleanup();
      }
    }
    document.getElementById("down").addEventListener("click", ui.action.down);
    ui.action.left = function() {
      var updated = board.move.left(board.current);
      if (updated) {
        board.putRandom(board.current);
        ui.board.update(board.current);
        ui.score.update(board.current);
        ui.ai.current && ui.ai.current.cleanup();
      }
    }
    document.getElementById("left").addEventListener("click", ui.action.left);
    ui.action.right = function() {
      var updated = board.move.right(board.current);
      if (updated) {
        board.putRandom(board.current);
        ui.board.update(board.current);
        ui.score.update(board.current);
        ui.ai.current && ui.ai.current.cleanup();
      }
    }
    document.getElementById("right").addEventListener("click", ui.action.right);

    document.body.addEventListener("keydown", function(event) {
      var key = event.keyCode || event.which;
      switch (key) {
          case 38: ui.action.up(); break;
          case 40: ui.action.down(); break;
          case 37: ui.action.left(); break;
          case 39: ui.action.right(); break;
      }
      return false;
    });

    document.getElementById("test").addEventListener("click", function() {
      board.move.replaceByBoardJS(ui.brdEngine);
    });
    
    ui.message = {};
    var messageDom = document.getElementById("message-area");
    ui.message.clear = function() {
      messageDom.innerHTML = "";
    }
    ui.message.set = function(msg) {
      messageDom.innerHTML = msg;
    }

    function step() {
      ui.message.clear();
      if (board.gameOver(board.current)) {
        ui.message.set("Game over!");
        return;
      }
      var tmpBrd = board.create();
      board.copy(board.current, tmpBrd);
      var move = ui.ai.current.analyse(tmpBrd);
      if (typeof move === 'undefined') {
        ui.message.set("I don't know how to move!");
        return;
      }
      var updated = board.move[move].call(null, board.current);
      if (updated) {
        board.putRandom(board.current);
        ui.board.update(board.current);
        ui.score.update(board.current);
      } else {
        ui.message.set("Wrong move!");
      }
    }
    document.getElementById("step").addEventListener("click", step);

    ui.action.finish = function() {
      ui.message.clear();
      var step = 0;
      var tsFrom = new Date().getTime();
      while (!board.gameOver(board.current)) {
        var tmpBrd = board.create();
        board.copy(board.current, tmpBrd);
        var move = ui.ai.current.analyse(tmpBrd);
        if (typeof move === 'undefined') {
          ui.message.set("I don't know how to move!");
          return;
        }
        var updated = board.move[move].call(null, board.current);
        if (updated) {
          board.putRandom(board.current);
        } else {
          ui.board.update(board.current);
          ui.score.update(board.current);
          ui.message.set("Wrong move!");
          return;
        }
        step++; 
      }
      var tsTo = new Date().getTime();
      ui.board.update(board.current);
      ui.score.update(board.current);
      ui.score.speed(step*1000.0/(tsTo-tsFrom), step);
      ui.message.set("Game over!");
      ui.ai.current && ui.ai.current.cleanup();
    }
    document.getElementById("finish").addEventListener("click", ui.action.finish);

    ////////////////////////////////////////////////////////////////
    // Register AIs.

    ui.ai = {};
    ui.ai.current = null;
    ui.ai.algList = {
      "ai-random": function() {
        return new ai.random(ui.brdEngine);
      },
      "ai-blind-cycle": function(aiDom) {
        var cfg = {};
        cfg.clockwise = aiDom.querySelectorAll("input[name='clockwise']")[0].checked;
        cfg.whilePossible = aiDom.querySelectorAll("input[name='whilePossible']")[0].checked;
        return new ai.blindCycle(ui.brdEngine, cfg);
      },
      "ai-next-max-score": function() {
        return new ai.nextMaxScore(ui.brdEngine);
      },
      "ai-next-max-value": function() {
        return new ai.nextMaxValue(ui.brdEngine);
      },
      "ai-deep-max-score": function() {
        return new ai.deepMaxScore(ui.brdEngine);
      },
      "ai-deep-max-score-corner": function() {
        return new ai.deepMaxScoreCorner(ui.brdEngine);
      },
      "ai-expectimax": function() {
        return new ai.expectimax(ui.brdEngine);
      },
      // "": function() {
      //   return new ai.(ui.brdEngine);
      // },
    };
    ui.ai.domList = document.querySelectorAll('div.ai');
    for (var i = 0; i < ui.ai.domList.length; i++) {
      ui.ai.domList[i].querySelectorAll('button.ai')[0].addEventListener("click", function (event) {
        ui.ai.enable(event.target.parentNode);
      });
    }

    ui.ai.moveToTop = function(aiDom) {
      for (var i = 0; i < ui.ai.domList.length; i++) {
        ui.ai.domList[i].classList.remove('enabled');
      }
      var rootDom = aiDom.parentNode;
      rootDom.removeChild(aiDom);
      rootDom.insertBefore(aiDom, rootDom.firstChild);
      aiDom.classList.add('enabled');
    }
    ui.ai.enable = function(aiDom) {
      if (ui.ai.current)
        ui.ai.current.cleanup();
      ui.ai.moveToTop(aiDom);
      ui.ai.current = ui.ai.algList[aiDom.id](aiDom);
    }

    ui.brdEngine = BoardArr2d; // TODO make user selectable

  </script>
  
</body>
</html>