2

Isso é um jogo de da velha criado em JS. está funcionando certinho. Quero mudar a cor toda hora que eu clicar em dos quadrados. por Exemplo: quando eu clicar no quadrado o 'X' fica vermelho, quando clico em outro o quadro do 'O' fica verde. tentei mudar o campo na função nextPlayer do JS, mas não estou conseguindo. Poderiam me ajudar?

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div></div>
    <table></table>
    <button onclick="Game.start();">Restart</button>

    <style>
        table,td, tr{
            border: 1px solid black;
            text-align: center;
        }
        td{
            width: 50px;
            height: 50px;
        }
    </style>
    <script src="./scripts.js"></script>
</body>


</html>


JS



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(){
        if(this.currentPlayer ==='X'){
           document.querySelector("td").style.color="red"
           document.getElementById('CC').style.backgroundColor = 'Green'
        }
        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 === 9){
            return 'Ninguem'
        }
    },
    render(){
        var winner = this.isGameOver();
        divElement.textContent = winner ? `Winner: ${winner}` : `Current Player: ${this.currentPlayer}`

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

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

            })
            template+='</tr>'
        })
        tableElement.innerHTML = template;
    }
}

Game.start();

1 Resposta 1

4

Você pode criar duas classes css: classeX, com background-color: greene classeO com background-color: green, e, na function render(), que é a que gera a tabela, adicionar a classe de acordo com a variável "column" que no caso é "X" ou "O":

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(){
        if(this.currentPlayer ==='X'){
           document.querySelector("td").style.color="red"
           document.getElementById('CC').style.backgroundColor = 'Green'
        }
        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 === 9){
            return 'Ninguem'
        }
    },
    render(){
        var winner = this.isGameOver();
        divElement.textContent = winner ? `Winner: ${winner}` : `Current Player: ${this.currentPlayer}`

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

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

            })
            template+='</tr>'
        })
        tableElement.innerHTML = template;
    }
}

Game.start();
table,td, tr{
            border: 1px solid black;
            text-align: center;
        }
        td{
            width: 50px;
            height: 50px;
        }
        
        .fundo {
          background-color: #fff
        }
        .fundoX {
          background-color: green
        }
        .fundoO {
          background-color: red
        }
 <div></div>
 <table></table>
 <button onclick="Game.start();">Restart</button>

2
  • valeu ricardo, era isso que queria fazer mesmo.
    – vitJS
    Commented 5/08/2019 às 23:49
  • boa. uma sugestão seria executar o render na primeira vez, e ir apenas atualizando no click, mas como é bem pequena a tabela não tem problema. não esqueça de marcar a resposta se ela ajudou a resolver :) Commented 6/08/2019 às 0:34

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .