TicTacToeJS

by Kewerson Hugo

HTML

<html>
	<body onload="desenharTabuleiro()">
    <div id="principal">
      <div id="tabuleiro" class="diag2"></div>
      <div id="status"></div>
    </div>
  </body>
	</html>

CSS

#principal {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

#tabuleiro {
	position: relative;
	overflow: hidden;
}

#status {
	margin-top: 20px;
	height: 20px
} 

.botaoTabuleiro {
	width: 30px;
	height: 30px;
}

JavaScript

var VAZIO = {
  simbolo:"_",
  valor:0
}

var jogadorX = {
  simbolo:"X",
  valor:1
}

var jogadorO = {
  simbolo:"O",
  valor:-1
}

var jogadorAtual = jogadorX;

var tabuleiro = [
  [VAZIO,VAZIO,VAZIO],
  [VAZIO,VAZIO,VAZIO],
  [VAZIO,VAZIO,VAZIO]
]

var numeroDeJogadas = 0;

var novaLinha = function() {
  var br = document.createElement("br");
  document.querySelector("#tabuleiro").appendChild(br);
}

var limparTela = function() {
  document.querySelector("#tabuleiro").innerHTML = '';
  document.querySelector("#status").innerHTML = '';

}

var alterarStatus = function(mensagem) {
  document.querySelector("#status").innerHTML = mensagem;
}

var criaBotaoTabuleiro = function(linha, coluna){
  var button = document.createElement("button");
  button.textContent = tabuleiro[linha][coluna].simbolo;
  button.classList.add("botaoTabuleiro");
  button.onclick = function eventoFazerJogada(){
    fazerJogada(linha, coluna)
  };
  document.querySelector("#tabuleiro").appendChild(button);
}

var desenharTabuleiro = function(){
  limparTela();
  for(var linha = 0; linha < 3; linha++) {
    for(var coluna = 0; coluna < 3; coluna++) {
      criaBotaoTabuleiro(linha, coluna);
    }
    novaLinha();
  }
}

var fazerJogada = function(linha, coluna){
  if(tabuleiro[linha][coluna] === VAZIO){
    tabuleiro[linha][coluna] = jogadorAtual;
    desenharTabuleiro();
		numeroDeJogadas++;
    verificarVencedor();
    proximoJogador();
  }
  else {
    alterarStatus("Jogada Inválida!");
  }
}

var proximoJogador = function() {
  if(jogadorAtual === jogadorX){
    jogadorAtual = jogadorO;
  } else {
    jogadorAtual = jogadorX;
  }
}

var verificarVencedor = function() {
  if(verificarLinhas() || verificarColunas() || verificarDiagonais()) {
    alterarStatus("Jogador " + jogadorAtual.simbolo + " venceu!");
  } 
  else if (numeroDeJogadas === 9) {
    alterarStatus("Empate!");
  }
}

var verificarLinhas = function() {
  if(checarTrilha(tabuleiro[0]) || checarTrilha(tabuleiro[1]) ||...