Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
  <script type="text/javascript">
    function Game() {
      var game = this;
      this.board = document.getElementById('board');
      this.squares = this.board.getElementsByTagName('input');
      this.gameover = false;
      this.board.onclick = function(e) {
        if( game.gameover) return;
        e = e || window.event;
        var t = e.srcElement || e.target;
        if( t.tagName === "INPUT") {
          if( t.value) return; // square already played
          t.value = "O";
          game.checkForWin("X");
        }
      };
      this.checkForWin = function(next) {
        var i, line;
        for(i=0; i<game.winningLinesCount; i++) {
          line = game.winningLines[i];
          if( game.squares[line[0]].value == game.squares[line[1]].value
             && game.squares[line[0]].value == game.squares[line[2]].value
             && game.squares[line[0]].value != "") {
            game.squares[line[0]].style.backgroundColor =
              game.squares[line[1]].style.backgroundColor =
              game.squares[line[2]].style.backgroundColor = "#80ff80";
            game.gameover = true;
            break;
          }
        }
        if( !game.gameover && next == "X") {
          game.computerPlay();
        }
      };
      this.winningLines = [
        [0,1,2],[3,4,5],[6,7,8], //rows
        [0,3,6],[1,4,7],[2,5,8], //cols
        [0,4,8],[2,4,6] //diagonals
      ];
      this.winningLinesCount = this.winningLines.length;
      this.computerPlay = function() {
        var play = function(x) {
          game.squares[x].value = "X";
          game.checkForWin("O");
        };
        // look for danger
        var i, line, danger = [], dangermod = {"X":-1,"O":1,"":0};
        for(i=0; i<game.winningLinesCount; i++) {
          line = game.winningLines[i];
          danger[Math.abs(dangermod[game.squares[line[0]].value]
              + dangermod[game.squares[line[1]].value]
              + dangermod[game.squares[line[2]].value])] = line;
        }
        if( danger[2]) {
          // 2 of same symbol - either a win for computer or a need to block
          line = danger[2];
          if( game.squares[line[0]].value == "") play(line[0]);
          else if( game.squares[line[1]].value == "") play(line[1]);
          else if( game.squares[line[2]].value == "") play(line[2]);
        }
        else {
          // no danger, pick a random square - this is where the AI would go to adjust difficulty
          var available = [];
          for(i=0; i<9; i++) if(game.squares[i].value == "") available.push(i);
          play(available[Math.floor(Math.random()*available.length)]);
        }
      };
    }
  </script>
</head>
<body>
  <table border=1 id="board">
    <tr>
      <td><input size=1 readonly /></td>
      <td><input size=1 readonly /></td>
      <td><input size=1 readonly /></td>
    </tr>
    <tr>
      <td><input size=1 readonly /></td>
      <td><input size=1 readonly /></td>
      <td><input size=1 readonly /></td>
    </tr>
    <tr>
      <td><input size=1 readonly /></td>
      <td><input size=1 readonly /></td>
      <td><input size=1 readonly /></td>
    </tr>
  </table>
  <script type="text/javascript">new Game();</script>
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers