Javascript Saber qual item do array foi selecionado

bigbossbr · 16 de março de 2021

Olá pessoal,

Estou desenvolvendo um jogo da velha e cheguei em um ponto onde preciso conseguir verificar qual das minhas combinações dentro do array foi de fato contemplada.

O jogo já esta funcionando, só quero poder desenhar sobre o jogo uma linha para mostrar qual foi a combinação que ganhou, mais para isto preciso conseguir pegar o arrary contemplado e não estou conseguindo.

Segue os códigos até aqui.

JAVASCRIPT

'use strict';

//constante e variáveis do jogo
const celulas = document.querySelectorAll('.celula');
const grid = document.getElementById('grid');
const w = grid.clientWidth;
const h = grid.clientHeight;
const wc = w - 10;
const hc = h - 10;
const jogadorX = "✘";
const jogadorO = "◎";
let fimDeJogo = false;
let jogador;
let centro;


//Montagem do canvas para criar a linha que mostra o vencedor
let canvasEl = document.getElementById('linhaCanvas');
let ctx = canvasEl.getContext('2d');

let li = 10;
let lf = 10;

function primeiraLinhaHorizontal() {
    ctx.strokeStyle = '#ffffff';
    ctx.beginPath();
    ctx.moveTo(10, 60);
    ctx.lineTo(332, 60);
    ctx.closePath();
    ctx.stroke();
}

function linhaCentroHorizontal() {
    ctx.strokeStyle = '#ffffff';
    ctx.beginPath();
    ctx.moveTo(10, 170);
    ctx.lineTo(332, 170);
    ctx.closePath();
    ctx.stroke();
}

function ultimaLinhaHorizontal() {
    ctx.strokeStyle = '#ffffff';
    ctx.beginPath();
    ctx.moveTo(10, 285);
    ctx.lineTo(332, 285);
    ctx.closePath();
    ctx.stroke();
}

function primeiraLinhaVertical() {
    ctx.strokeStyle = '#ffffff';
    ctx.beginPath();
    ctx.moveTo(60, 10);
    ctx.lineTo(60, 332);
    ctx.closePath();
    ctx.stroke();
}

function linhaCentroVertical() {
    ctx.strokeStyle = '#ffffff';
    ctx.beginPath();
    ctx.moveTo(175, 10);
    ctx.lineTo(175, 332);
    ctx.closePath();
    ctx.stroke();
}

function ultimaLinhaVertical() {
    ctx.strokeStyle = '#ffffff';
    ctx.beginPath();
    ctx.moveTo(285, 10);
    ctx.lineTo(285, 332);
    ctx.closePath();
    ctx.stroke();
}

function linhaDiagonalBaixo() {
    ctx.strokeStyle = '#ffffff';
    ctx.beginPath();
    ctx.moveTo(li, lf);
    ctx.lineTo(wc, hc);
    ctx.closePath();
    ctx.stroke();
}
function linhaDiagonalCima() {
    ctx.strokeStyle = '#ffffff';
    ctx.beginPath();
    ctx.moveTo(10, 332);
    ctx.lineTo(332, 10);
    ctx.closePath();
    ctx.stroke();
}

// linhaDiagonalBaixo();



//Array com as combinações do tabuleiro
const combinacoes = [
    //Array Linhas
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],

    //Array Colunas
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],

    //Array Diagonais
    [0, 4, 8],
    [2, 4, 6]
]


//Detectar o clique na célula
document.addEventListener('click', (event) => {

    if (event.target.matches('.celula')) {
        jogar(event.target.id, jogadorX);
        setTimeout(() => jogadorCPU(), 1000);
    }
})

//Função para jogar com o computador 
function jogadorCPU() {
    const jogadasDisponiveis = [];
    let index;

    for (index in celulas) {
        if (!isNaN(index)) {
            if (
                !celulas[index].classList.contains('✘') &&
                !celulas[index].classList.contains('◎')) {
                jogadasDisponiveis.push(index);
            }
        }
    }

    if (centro == false || centro == undefined) {
        jogar(jogadasDisponiveis[4], jogadorO);
        centro = true;
    } else {
        const jogadaAleatoria = Math.floor(
            Math.random() * jogadasDisponiveis.length
        );
        if (!fimDeJogo) {
            jogar(jogadasDisponiveis[jogadaAleatoria], jogadorO);
        }
    }

}

//Função para efetuar o jogo
function jogar(id, jogador) {
    const celula = document.getElementById(id);

    if (celula.id == 4) {
        centro = true;
    }

    celula.textContent = jogador;
    celula.classList.add(jogador);
    analisarVencedor(jogador);

}


//Função que analisa se ouve um vencedor
function analisarVencedor(jogador) {
    const vencedor = combinacoes.some((comb) => {
        return comb.every((index) => {
            return celulas[index].classList.contains(jogador);
        })
    })

    if (vencedor) {
        finalizarJogo(jogador);
    } else if (verificarEmpate()) {
        finalizarJogo();
    }
}

//Função que analisa se teve empate
function verificarEmpate() {
    let x = 0;
    let o = 0;
    let index;

    for (index in celulas) {
        if (!isNaN(index)) {
            if (celulas[index].classList.contains(jogadorX)) {
                x++;
            }

            if (celulas[index].classList.contains(jogadorO)) {
                o++;
            }
        }
    }
    return x + o === 9 ? true : false;
}


//Função ara finalizar o jogo e mostrar a mensagem final
function finalizarJogo(vencedor = null) {

    fimDeJogo = true;
    const telaEscura = document.getElementById('tela-escura');
    const h2 = document.createElement('h2');
    const h3 = document.createElement('h3');
    let msg = null;

    telaEscura.style.display = 'block';
    telaEscura.appendChild(h2);
    telaEscura.appendChild(h3);

    if (vencedor) {
        h2.innerHTML = `<img id="fogos" src="./img/fogos.gif"><br><span class="resultado">${vencedor}</span> é o jogador vencedor`;
    } else {
        h2.innerHTML = `<img id="empate" src="./img/empate.gif"><br>O jogo Empatou.`;
    }

    let relogio = 5;

    setInterval(() => {
        h3.innerHTML = `<span class="relogio">Reiniciando em ${relogio--} seg.</span>`;
    }, 1000);
    setTimeout(() => location.reload(), 5000);
}

HTML

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="./css/style.css">
    </link>
    <title>Jogo da Velha em HTML 5/CSS e Javascript/</title>
</head>

<body>
    <div id="tela-escura"></div>
    <div class="container">
        <div class="jogo">
            <h2 class="titulo">Jogo da Velha</h2>
            <!-- <div class="jogadores">
                <div>
                    <label for="jogador_1">Jogador - X</label>
                    <input type="text" class="jogador" id="jogador_1">
                </div>
                <div>
                    <label for="jogador_2">Jogador - O</label>
                    <input type="text" class="jogador" id="jogador_2">
                </div>
            </div> -->
            <div class="grid" id="grid">
                <canvas id="linhaCanvas" width="342" height="342"></canvas>
                <div class="celula" id="0"></div>
                <div class="celula" id="1"></div>
                <div class="celula" id="2"></div>
                <div class="celula" id="3"></div>
                <div class="celula" id="4"></div>
                <div class="celula" id="5"></div>
                <div class="celula" id="6"></div>
                <div class="celula" id="7"></div>
                <div class="celula" id="8"></div>
            </div>
        </div>
    </div>
    <script src="./js/script.js"></script>
</body>

</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap');

body, html{
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    height: 100%;
    background-color:lightgray;
}
.container{
    position: relative;
    top: 25%;
    transform: translateY(-25%);
}
.jogo{
    margin: 0 auto;
    max-width: 342px;
    padding: 5px;
}
h2, h3{
    text-align: center;
    margin-bottom: 20px;
}
.grid{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
}
.celula{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2px ;
    width: 100px;
    height: 100px;
    background-color: #000000;
    font-size: 5rem;
    font-weight: 300;
    padding: 5px;
    border-radius: 15px;
}
#tela-escura{
    width: 100%;
    height: 100%;
    opacity: 0.90;
    position:absolute;
    background-color: black;
    color: #eeff00 !important;
    display: none;
    z-index: 1;
    padding: 5% 0 0 0;
}
.resultado{
    display: block;
    padding: 10px;
    font-size: 45px;
}
.relogio{
    color: red;
}
#fogos, #empate{
    margin: 0 0 20px 0;;
}
.✘{
    color: rgb(125, 125, 248);
}
.◎{
    color: crimson;
}
.titulo{
    font-size: 45px;
    margin: 0 0 50px 0;
    color:darkred;
}
.jogadores{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 15px 0;
}
label{
    display: block;
    margin: 5px;
    font-weight: bold;
}
.jogador {
    width: 150px;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #9e9e9e;
}
canvas{
    /* position: absolute; */
    
     /* border: 1px solid #000; */
}

Obs.: Ainda quero melhorar a parte de montagem do canvas, deixei como esta porque parei nesta parte de pegar o arrays ganhador, uma vez com ele, pretendo deixar os eixos mais dinamicos bem como a criação de todas as linhas.

Rui Guilherme · 16 de março de 2021

A sua função analisarVencedor() checa a combinação do vencedor, basta salvar a combinação.

function analisarVencedor(jogador) {
  // essa variavel vai salvar a combinação real 
  let combinacao = [];
    const vencedor = combinacoes.some((comb) => {
      // Nesse momento não importa se a combinação deu certo ou não.
        combinacao = comb;
        return comb.every((index) => {
            return celulas[index].classList.contains(jogador);
        })
    })

    if (vencedor) {
      	// aqui está a combinação vencedora, exemplo: [0,4,8]
        // 0,4,8 seria isso: (X venceu)
        // X O -
        // - X O
        // - - X
        console.log(combinacao)
        finalizarJogo(jogador);
    } else if (verificarEmpate()) {
      // se deu empate você pode zerar a combinacao 
        combinacao = []
        finalizarJogo();
    }
}

Agora que você tem a numeração do vencedor basta você usar a array combinacao para fazer o risco no HTML e destacar qual linha foi a vencedora, no meu exemplo a ID 0, ID 4 e ID 8 venceram.

bigbossbr · 16 de março de 2021

@Rui Guilherme Caramba, acredita que eu tentei varias formas bem ai dentro da função e não consegui vir o array em si.

Ai fiz de uma forma que ficou muito ruim, mais funcionou, mais vou modificar para sua forma que era o que eu estava tentando fazer

Como eu tinha feito, não vale rir, (hehehe)

function ver() {

    //verificação para jogador ✘
    if (celulas[0].textContent === '✘' && celulas[1].textContent === '✘' && celulas[2].textContent === '✘') {
        primeiraLinhaHorizontal();
    } else if (celulas[3].textContent === '✘' && celulas[4].textContent === '✘' && celulas[5].textContent === '✘') {
        linhaCentroHorizontal();
    } else if (celulas[6].textContent === '✘' && celulas[7].textContent === '✘' && celulas[8].textContent === '✘') {
        ultimaLinhaHorizontal();
    } else if (celulas[0].textContent === '✘' && celulas[3].textContent === '✘' && celulas[6].textContent === '✘') {
        primeiraLinhaVertical();
    } else if (celulas[1].textContent === '✘' && celulas[4].textContent === '✘' && celulas[7].textContent === '✘') {
        linhaCentroVertical();
    } else if (celulas[2].textContent === '✘' && celulas[5].textContent === '✘' && celulas[8].textContent === '✘') {
        ultimaLinhaVertical();
    } else if (celulas[0].textContent === '✘' && celulas[4].textContent === '✘' && celulas[8].textContent === '✘') {
        linhaDiagonalBaixo();
    } else if (celulas[2].textContent === '✘' && celulas[4].textContent === '✘' && celulas[6].textContent === '✘') {
        linhaDiagonalCima();

        //verificação para jogador ◎
    } else if (celulas[0].textContent === '◎' && celulas[1].textContent === '◎' && celulas[2].textContent === '◎') {
        primeiraLinhaHorizontal();
    } else if (celulas[3].textContent === '◎' && celulas[4].textContent === '◎' && celulas[5].textContent === '◎') {
        linhaCentroHorizontal();
    } else if (celulas[6].textContent === '◎' && celulas[7].textContent === '◎' && celulas[8].textContent === '◎') {
        ultimaLinhaHorizontal();
    } else if (celulas[0].textContent === '◎' && celulas[3].textContent === '◎' && celulas[6].textContent === '◎') {
        primeiraLinhaVertical();
    } else if (celulas[1].textContent === '◎' && celulas[4].textContent === '◎' && celulas[7].textContent === '◎') {
        linhaCentroVertical();
    } else if (celulas[2].textContent === '◎' && celulas[5].textContent === '◎' && celulas[8].textContent === '◎') {
        ultimaLinhaVertical();
    } else if (celulas[0].textContent === '◎' && celulas[4].textContent === '◎' && celulas[8].textContent === '◎') {
        linhaDiagonalCima();
    } else if (celulas[2].textContent === '◎' && celulas[4].textContent === '◎' && celulas[6].textContent === '◎') {
        linhaDiagonalBaixo();
    }
}
document.addEventListener('click', ver);

Rui Guilherme · 18 de março de 2021

@bigbossbr o que importar é achar a solução, se fosse em uma empresa te garanto que ninguém iria rir do seu código já que você resolveu o problema. Refatoração vem quando você tiver tempo(vou ser xingado por mts agora) kkkkkk

bigbossbr · 18 de março de 2021

@Rui Guilherme Com certeza, você tem toda razão.

No mundo real, primeiro os caras querem faturar para depois pensar em coisas como usabilidade, navegabilidade, performance, etc.

Depois vou postar como ficou o código final do jogo aqui, até para colher ideias de melhorias.

Inclusive consegui fazer tudo, menos animar a linha sobre o tabuleiro, consigo animar ela se for fora da verificação, mais coloco em tempo de execução no momento que o jogo verifica o ganhador, simplesmente não gera a linha animada, só sem animação.

bigbossbr · 18 de março de 2021

Códigos do Jogo, quem quiser melhorar ou dar sugestões, fique a vontade.

Inclusive estou pensando como daria para criar uma AI para fazer o jogo com o CPU ficar mais difícil

HTML

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="./css/style.css">
    </link>
    <title>Jogo da Velha em HTML 5/CSS e Javascript/</title>
</head>

<body>
    <div id="tela-escura"></div>
    <div class="container">
        <div class="jogo">
            <h2 class="titulo">Jogo da Velha</h2>
            <!-- <div class="jogadores">
                <div>
                    <label for="jogador_1">Jogador - X</label>
                    <input type="text" class="jogador" id="jogador_1">
                </div>
                <div>
                    <label for="jogador_2">Jogador - O</label>
                    <input type="text" class="jogador" id="jogador_2">
                </div>
            </div> -->
            <div class="grid" id="grid">
                <canvas id="linhaCanvas" width="342" height="342"></canvas>
                <div class="celula" id="0"></div>
                <div class="celula" id="1"></div>
                <div class="celula" id="2"></div>
                <div class="celula" id="3"></div>
                <div class="celula" id="4"></div>
                <div class="celula" id="5"></div>
                <div class="celula" id="6"></div>
                <div class="celula" id="7"></div>
                <div class="celula" id="8"></div>
            </div>
        </div>
    </div>
    <script src="./js/script.js"></script>
</body>

</html>

JAVASCRIPT

'use strict';

//constante e variáveis do jogo
const celulas = document.querySelectorAll('.celula');
const grid = document.getElementById('grid');

const jogadorX = "✘";
const jogadorO = "◎";
let fimDeJogo = false;
let jogador;
let centro;
let proxJogador = true;

//Montagem do canvas para criar a linha que mostra o vencedor
const canvas = document.querySelector('canvas');
let w = canvas.clientWidth;
let h = canvas.clientHeight;
let startX = 0;
let startY = 0;
let dif = 60;
let ctx = canvas.getContext('2d');

function geraLinha(x, y, w, h) {
    ctx.beginPath();
    ctx.strokeStyle = 'yellow';
    ctx.moveTo(x, y);
    ctx.lineTo(w, h);
    ctx.lineWidth = 20;
    ctx.shadowBlur = 20;
    ctx.shadowColor = "red";
    ctx.lineCap = 'square';
    ctx.stroke();
    ctx.save();
    ctx.closePath();
}

//Array com as combinações do tabuleiro
const combinacoes = [
    //Array Linhas
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],

    //Array Colunas
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],

    //Array Diagonais
    [0, 4, 8],
    [2, 4, 6]
]

//Detectar o clique na célula
document.addEventListener('click', (event) => {
    if (event.target.matches('.celula')) {
        jogar(event.target.id, jogadorX);
        setTimeout(() => jogadorCPU(), 500);
    }
})

//Função para jogar com o computador 
function jogadorCPU() {
    const jogadasDisponiveis = [];
    let index;

    for (index in celulas) {
        if (!isNaN(index)) {
            if (
                !celulas[index].classList.contains('✘') &&
                !celulas[index].classList.contains('◎')) {
                jogadasDisponiveis.push(index);
            }
        }
    }

    if (centro == false || centro == undefined) {
        jogar(jogadasDisponiveis[4], jogadorO);
        centro = true;
        // ver();
    } else {
        const jogadaAleatoria = Math.floor(
            Math.random() * jogadasDisponiveis.length
        );
        if (!fimDeJogo) {
            jogar(jogadasDisponiveis[jogadaAleatoria], jogadorO);
            // ver();
        }
    }
}

//Função para efetuar o jogo
function jogar(id, jogador) {
    const celula = document.getElementById(id);

    if (celula.id == 4) {
        centro = true;
    }

    celula.textContent = jogador;
    celula.classList.add(jogador);
    celula.classList.add('blockClick');
    analisarVencedor(jogador);
}

//Função que analisa se ouve um vencedor
function analisarVencedor(jogador) {

    ver();
    let combinacao = [];
    const vencedor = combinacoes.some((comb) => {
        return comb.every((index) => {
            combinacao = comb;
            return celulas[index].classList.contains(jogador);
        })
    })

    if (vencedor) {
        // ver(combinacao);
        finalizarJogo(jogador);
    } else if (verificarEmpate()) {
        finalizarJogo();
    }
}

//Função que analisa se teve empate
function verificarEmpate() {
    let x = 0;
    let o = 0;
    let index;

    for (index in celulas) {
        if (!isNaN(index)) {
            if (celulas[index].classList.contains(jogadorX)) {
                x++;
            }

            if (celulas[index].classList.contains(jogadorO)) {
                o++;
            }
        }
    }
    return x + o === 9 ? true : false;
}


//Função ara finalizar o jogo e mostrar a mensagem final
function finalizarJogo(vencedor = null) {

    fimDeJogo = true;
    canvas.classList.add('mostrar');

    function carregar() {

        const telaEscura = document.getElementById('tela-escura');
        const h2 = document.createElement('h2');
        const h3 = document.createElement('h3');
        let msg = null;

        telaEscura.style.display = 'block';
        telaEscura.appendChild(h2);
        telaEscura.appendChild(h3);

        if (vencedor) {
            h2.innerHTML = `<img id="fogos" src="./img/fogos.gif"><br><span class="resultado">${vencedor}</span> é o jogador vencedor`;
        } else {
            h2.innerHTML = `<img id="empate" src="./img/empate.gif"><br>O jogo Empatou.`;
        }

        let relogio = 1;

        setInterval(() => {
            h3.innerHTML = `<span class="relogio">Reiniciando em ${relogio--} seg.</span>`;
        }, 1000);
        setTimeout(() => location.reload(), 1000);
    }

    setTimeout(carregar, 1000)
}

//Gerar a linha de canvas na combinação efetuada
const ver = () => {

    //verificação para jogador ✘
    if (celulas[0].textContent === jogadorX && celulas[1].textContent === jogadorX && celulas[2].textContent === jogadorX) {
        geraLinha(startX, (startX + dif), w, (startX + dif));
    } else if (celulas[3].textContent === jogadorX && celulas[4].textContent === jogadorX && celulas[5].textContent === jogadorX) {
        geraLinha(startX, (w / 2), w, h - (h / 2));
    } else if (celulas[6].textContent === jogadorX && celulas[7].textContent === jogadorX && celulas[8].textContent === jogadorX) {
        geraLinha(startX, (h - dif), w, (h - dif));
    } else if (celulas[0].textContent === jogadorX && celulas[3].textContent === jogadorX && celulas[6].textContent === jogadorX) {
        geraLinha((startX + dif), startY, (startX + dif), h);
    } else if (celulas[1].textContent === jogadorX && celulas[4].textContent === jogadorX && celulas[7].textContent === jogadorX) {
        geraLinha((w / 2), startY, (w / 2), h);
    } else if (celulas[2].textContent === jogadorX && celulas[5].textContent === jogadorX && celulas[8].textContent === jogadorX) {
        geraLinha(w - dif, startY, h - dif, h);
    } else if (celulas[0].textContent === jogadorX && celulas[4].textContent === jogadorX && celulas[8].textContent === jogadorX) {
        geraLinha(startX, startY, w, h);
    } else if (celulas[2].textContent === jogadorX && celulas[4].textContent === jogadorX && celulas[6].textContent === jogadorX) {
        geraLinha(w, startX, startY, h);

        //verificação para jogador ◎
    } else if (celulas[0].textContent === jogadorO && celulas[1].textContent === jogadorO && celulas[2].textContent === jogadorO) {
        geraLinha(startX, (startX + dif), w, (startX + dif));
    } else if (celulas[3].textContent === jogadorO && celulas[4].textContent === jogadorO && celulas[5].textContent === jogadorO) {
        geraLinha(startX, (w / 2), w, h - (h / 2));
    } else if (celulas[6].textContent === jogadorO && celulas[7].textContent === jogadorO && celulas[8].textContent === jogadorO) {
        geraLinha(startX, (h - dif), w, (h - dif));
    } else if (celulas[0].textContent === jogadorO && celulas[3].textContent === jogadorO && celulas[6].textContent === jogadorO) {
        geraLinha((startX + dif), startY, (startX + dif), h);
    } else if (celulas[1].textContent === jogadorO && celulas[4].textContent === jogadorO && celulas[7].textContent === jogadorO) {
        geraLinha((w / 2), startY, (w / 2), h);
    } else if (celulas[2].textContent === jogadorO && celulas[5].textContent === jogadorO && celulas[8].textContent === jogadorO) {
        geraLinha(w - dif, startY, h - dif, h);
    } else if (celulas[0].textContent === jogadorO && celulas[4].textContent === jogadorO && celulas[8].textContent === jogadorO) {
        geraLinha(startX, startY, w, h);
    } else if (celulas[2].textContent === jogadorO && celulas[4].textContent === jogadorO && celulas[6].textContent === jogadorO) {
        geraLinha(w, startX, startY, h);
    }
}

CSS

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap');

body, html{
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    height: 100%;
    background-color:lightgray;
}
.container{
    position: relative;
    top: 25%;
    transform: translateY(-25%);
}
.jogo{
    margin: 0 auto;
    max-width: 342px;
    padding: 5px;
}
h2, h3{
    text-align: center;
    margin-bottom: 20px;
}
.grid{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
}
.celula{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2px ;
    width: 100px;
    height: 100px;
    background-color: #000000;
    font-size: 5rem;
    font-weight: 300;
    padding: 5px;
    border-radius: 15px;
}
#tela-escura{
    width: 100%;
    height: 100%;
    opacity: 0.90;
    position:absolute;
    background-color: black;
    color: #eeff00 !important;
    display: none;
    z-index: 1;
    padding: 5% 0 0 0;
}
.resultado{
    display: block;
    padding: 10px;
    font-size: 45px;
}
.relogio{
    color: red;
}
#fogos, #empate{
    margin: 0 0 20px 0;;
}
.✘{
    color: rgb(125, 125, 248);
}
.◎{
    color: crimson;
}
.titulo{
    font-size: 45px;
    margin: 0 0 50px 0;
    color:darkred;
}
.jogadores{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 15px 0;
}
label{
    display: block;
    margin: 5px;
    font-weight: bold;
}
.jogador {
    width: 150px;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #9e9e9e;
}
canvas{
    position: absolute;
    z-index: -1;
    /* display: none; */
    
     /* border: 1px solid #000; */
}
.mostrar{
    display: block;
    z-index: 2;
}
.blockClick{
    pointer-events:none;
}