antonio-abrantes/jogo-da-velha.html

## jogo-da-velha.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jogo da Velha</title>
    <style>
        table, td, tr{
            border:  1px solid black;
            text-align: center;
        }
        td{
            width: 50px;
            height: 50px;
        }

    </style>
</head>

<body>

    <div></div>
    <table></table>
    <button onclick="Game.start()">Restart</button>

    <script>

        var divElement = document.querySelector('div'),
            tableElement = document.querySelector('table');

        var Game = {
            start(){
                this.field = [
                    ['', '', ''],
                    ['', '', ''],
                    ['', '', '']
                ];
                this.currentPlayer = 'X';
                this.isFinished = false;
                this.round = 0;
                this.render();
            },
            nextPlayer(){
              this.currentPlayer = this.currentPlayer === 'X' ? 'O' : 'X';
            },
            setField(line, column){
                if(!this.isFinished && this.field[line][column] === ''){
                    this.field[line][column] = this.currentPlayer;
                    this.nextPlayer();
                    this.round++;
                    this.render();
                }
            },
            isGameOver(){
                var field = this.field,
                    rows = 3,
                    cols = 3,
                    totalRow = 0;
                    totalCol = 0;
                for(var i = 0; i < rows; i++){
                    totalRow = 0;
                    totalCol = 0;
                    for(var j = 0; j < cols; j++){
                        if(field[i][j] === 'X'){
                            totalRow++;
                        }
                        if(field[i][j] === 'O'){
                            totalRow--;
                        }
                        if(field[j][i] === 'X'){
                            totalCol++;
                        }
                        if(field[j][i] === 'O'){
                            totalCol--;
                        }
                    }
                    if(totalRow === 3 || totalCol === 3){
                        return 'X';
                    }
                    if(totalRow === -3 || totalCol === -3){
                        return 'O';
                    }
                    if(field[0][0] !== '' && field[0][0] === field[1][1] && field[1][1] === field[2][2]){
                        return field[0][0];
                    }
                    if(field[0][2] !== '' && field[0][2] === field[1][1] && field[1][1] === field[2][0]){
                        return field[0][2];
                    }
                    if(this.round === (rows * cols)){
                        return 'Empate';
                    }
                }
            },
            render(){
                var winner = this.isGameOver();
                divElement.textContent = winner ? `Vencedor: ${winner}` : `Jogador: ${this.currentPlayer}`;

                if(winner){
                    this.isFinished = true;
                }

                var template = '';
                this.field.forEach((line, lineIndex) =>{
                    template += '<tr>';
                    line.forEach((column, columnIndex) =>{
                        template += `<td onclick="Game.setField(${lineIndex},${columnIndex})">${column}</td>`
                    })
                    template += '</tr>';
                })
                tableElement.innerHTML = template;
            }
        }

        Game.start();

    </script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="pt-br">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Jogo da Velha</title>
	<style>
	table, td, tr{
	border: 1px solid black;
	text-align: center;
	}
	td{
	width: 50px;
	height: 50px;
	}

	</style>
	</head>

	<body>

	<div></div>
	<table></table>
	<button onclick="Game.start()">Restart</button>

	<script>

	var divElement = document.querySelector('div'),
	tableElement = document.querySelector('table');

	var Game = {
	start(){
	this.field = [
	['', '', ''],
	['', '', ''],
	['', '', '']
	];
	this.currentPlayer = 'X';
	this.isFinished = false;
	this.round = 0;
	this.render();
	},
	nextPlayer(){
	this.currentPlayer = this.currentPlayer === 'X' ? 'O' : 'X';
	},
	setField(line, column){
	if(!this.isFinished && this.field[line][column] === ''){
	this.field[line][column] = this.currentPlayer;
	this.nextPlayer();
	this.round++;
	this.render();
	}
	},
	isGameOver(){
	var field = this.field,
	rows = 3,
	cols = 3,
	totalRow = 0;
	totalCol = 0;
	for(var i = 0; i < rows; i++){
	totalRow = 0;
	totalCol = 0;
	for(var j = 0; j < cols; j++){
	if(field[i][j] === 'X'){
	totalRow++;
	}
	if(field[i][j] === 'O'){
	totalRow--;
	}
	if(field[j][i] === 'X'){
	totalCol++;
	}
	if(field[j][i] === 'O'){
	totalCol--;
	}
	}
	if(totalRow === 3 \|\| totalCol === 3){
	return 'X';
	}
	if(totalRow === -3 \|\| totalCol === -3){
	return 'O';
	}
	if(field[0][0] !== '' && field[0][0] === field[1][1] && field[1][1] === field[2][2]){
	return field[0][0];
	}
	if(field[0][2] !== '' && field[0][2] === field[1][1] && field[1][1] === field[2][0]){
	return field[0][2];
	}
	if(this.round === (rows * cols)){
	return 'Empate';
	}
	}
	},
	render(){
	var winner = this.isGameOver();
	divElement.textContent = winner ? `Vencedor: ${winner}` : `Jogador: ${this.currentPlayer}`;

	if(winner){
	this.isFinished = true;
	}

	var template = '';
	this.field.forEach((line, lineIndex) =>{
	template += '<tr>';
	line.forEach((column, columnIndex) =>{
	template += `<td onclick="Game.setField(${lineIndex},${columnIndex})">${column}</td>`
	})
	template += '</tr>';
	})
	tableElement.innerHTML = template;
	}
	}

	Game.start();

	</script>

	</body>
	</html>