Tic-Tac-Toe / Jogo da Velha em HTML5

index.html

<div id="game">
  <div id="game-inner">
    
    <div id="turn">
      É a vez do <span id="turn-token"></span>
    </div>
    
    <div id="board"></div>
    
  </div>
  
  <div id="gameover">
    <div id="win-msg">Empate!</div>
  </div>
  
</div>

script.js

$(function() {
  
  var els = {
    'board': $('#board'),
    'turn-token': $('#turn-token'),
    'gameover': $('#gameover'),
    'win-msg': $('#win-msg'),
    'playagain': $('#playagain')
  };
  
  var game = new TicTacToeGame();
  //game.setBoardString('[X..][OX.][..O]');
  var players = game.getPlayers();
  
  var renderBoard = function() {
    
    var board = game.getBoard();
    var frag = $('<div>');
    for(var i = 0, ln = board.length; i < ln; i++) {
      var el = $('<a>', { 'data-slot' : i, href: '#' });
      var className = (board[i]===null) ? 'empty' : 'token-' + board[i];
      el.addClass(className);
      var token = (board[i] === null) ? '' : board[i];
      el.html('<span>' + token + '</span>');
      frag.append(el);
    }
    els.board.html(frag.html());
    
  };
  
  var setTurn = function() {
   
    var player = game.getCurrentPlayer();
    els['turn-token'].html('Jogador ' + (player + 1) + ' (' + players[player] + ')');
    
  }
  
  var doMove = function(pos) {
    
    if(game.makeMove(pos) === false) return false;
    
    var winner = game.getWinner();
    if(winner === null) {
      update();
    } else {
      renderBoard();
      gameOver(winner);
    }
    
  };
  
  var gameOver = function(winner) {
    var msg;    
    if(winner === 'draw') {
      msg = 'Empate!';
    } else {     
        if(players[winner] == 'X'){
           msg = 'Jogador 1 ganhou!';
        } else {
           msg = 'Jogador 2 ganhou!';
        }      
    }
    els['win-msg'].html(msg);
    els['gameover'].fadeIn();
    
  };
  
  var newGame = function() {
    
    els['gameover'].fadeOut();
    game = new TicTacToeGame();
    update();
    
  };
  
  var addListeners = function() {
    
    $(document).on('click', '#board a.empty', function(e) {
      
      e.preventDefault();
      var pos = $(this).data('slot');
      doMove(pos);
      
    });
    
    els.gameover.on('click', function(e) {
      
      newGame();
      
    });
    
  };
  
  var update = function() {
    renderBoard();
    setTurn();
  }
  
  var init = function() {
   
    addListeners();
    update();
    
  };
 
  init();
  
});

style.css

body {
  background: #113322;
  margin:0;
  padding:0;
}

#game {
  font-family: Arial, sans-serif;
  color: #444;
  text-align:center;
  position:absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  background: #00CC99;
  box-shadow: 0 0 40px rgba(0,0,0,0.8);
}

#game-inner {
  width: 450px;
  margin: 0 auto;
  padding: 2em;
  perspective: 300px;
}

#turn {
  font-size: 2em;
  color: #fff;
  margin-bottom: 1em;
}

#board {
  margin: 0 auto;
  width: 303px;
  height: 303px;
  border-top: 1px solid #666;
  border-left: 1px solid #666;
  text-decoration: none;
  box-shadow: 2px 2px 15px rgba(0,0,0,0.6);
  transform: rotateX(30deg) translateY(-30px);
}

#board a {
 border-right: 1px solid #666; 
 border-bottom: 1px solid #666;
 width: 100px;
 height: 100px;
 float:left;
 margin:0;
 line-height: 100px;
 font-size: 3em;
 text-decoration: none;
 background: #fff;
 transition: background-color 0.1s ease-in-out;
 box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
}

#board a.token-X {
  color: blue;
  background-color: #eef;
}

#board a.token-O {
  color: red;
  background-color: #fee;
}

#board a.empty:hover {
 
  background-color: #fd9;
 
}

#gameover {
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  line-height: 100%;
  background: rgba(0,0,0,0.8);
  display: none;
  cursor:pointer;
}

#win-msg {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3em;
  color: #fff
}

Tic-Tac-Toe-HTML5.markdown

Jogo da Velha em HTML5

A Pen by Cesar Augusto Nogueira on CodePen.

License.