0

Não conseguindo ajustar o CSS abaixo.

Fiz um código onde brinco de jokempo com a máquina mas a pontuação está fora das divs do jogador e do computador. Já fiz de tudo para colocar mas não vai.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Pedra, papel, tesoura</title>
    <style type="text/css">
        * {
            font-family: Helvetica;
            font-weight: 400;
        }

        #titulo {
            color: #0984e3;
            text-align: center;
        }


        #placar {
            display: flex; 
            align-content: center;
            justify-content: center;
        }


        #jogador #computador {
            position: relative;
            flex-grow: 1;
            border-radius: 5px;
            width: 200px;
            padding: 20px;
            color: #fff;
        }
        #jogador {
            background-color: #ff7675;
        }
        #computador {
            background-color: #74b9ff
        }
        #versus {
            font-size: 40px;
            text-align: center;
            width: 70px;
        }

        #jogador-nome, #computador-nome; {
            padding: 0px;
            margin: 0px;
        }
        #jogador-nome {
            text-align: left;
        }
        #computador-nome {
            text-align: right;
        }
        #jogador-pontos, #computador-pontos {
            position: absolute;
            top: 8px;
            font-size: 32px;
        }
        #jogador-pontos {
            right: 20px;
        }
        ul#jogador-escolha li, ul#computador-escolha li {
            list-style: inline;
            text-align: center;
            margin: 0;
            padding: 0; 
        }

        ul#jogador-escolha li, ul#computador-escolha li {
            display: inline;

        }
        ul#jogador-escolha li a, ul#computador-escolha li a {
            opacity: .2;

        }
        ul#jogador-escolha li a:hover, ul#jogador-escolha li a.selecionado, ul#computador-escolha li a.selecionado {
            opacity: 1;

        }
        ul#jogador-escolha li a img, ul#computador-escolha li a img {
            max-width: 80px;
        }
        #mensagens {
            background-color: #636e72;
            font-size: 32px;
            border-radius: 5px;
            margin: 40px 0;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="principal">
        <h1 id="titulo">Pedra, Papel e Tesoura</h1>
        <div id="placar">
            <div id="jogador">
                <h2 id="jogador-nome">Jogador</h2>
                <span id="jogador-pontos">0</span>
                <ul id="jogador-escolha">
                    <li><a id="jogador-escolha-1" onclick="jogar(1)"><img src="pedra.png"></a></li>
                    <li><a id="jogador-escolha-2" onclick="jogar(2)"><img src="papel.png"></a></li>
                    <li><a id="jogador-escolha-3" onclick="jogar(3)"><img src="tesoura.png"></a></li>
                </ul>
            </div>
            <div id="versus">vs</div>
                <div id="computador">
                <h2 id="computador-nome">Computador</h2>
                <span id="computador-pontos">0</span>
                <ul id="computador-escolha">
                    <li><a id="computador-escolha-1"><img src="pedra.png"></a></li>
                    <li><a id="computador-escolha-2"><img src="papel.png"></a></li>
                    <li><a id="computador-escolha-3"><img src="tesoura.png"></a></li>
                </ul>
            </div>
        </div>
        <div id="mensagens">&nbsp;</div>
    </div>
    <script>
        var jogadorEscolha = 0;
        var jogadorPontuacao = 0;
        var computadorEscolha = 0;
        var computadorPontuacao = 0;
        var ganhador = -1;


        function jogar(escolha) {
            jogadorEscolha = escolha;

            computadorEscolha = Math.floor((Math.random() * (3 - 1 + 1))) + 1 ;

            //  1 - Pedra 
            //  2 - Papel
            //  3 - Tesoura

            if ((jogadorEscolha == 1) && (computadorEscolha == 1)) {
                ganhador = 0;

            }

            else if ((jogadorEscolha == 1) && (computadorEscolha == 2)) {
                ganhador = 2;

            }

            else if ((jogadorEscolha == 1) && (computadorEscolha == 3)) {
                ganhador = 1;

            }


             else if ((jogadorEscolha == 2) && (computadorEscolha == 1)) {
                ganhador = 1;

            }

            else if ((jogadorEscolha == 2) && (computadorEscolha == 2)) {
                ganhador = 0;

            }

            else if ((jogadorEscolha == 2) && (computadorEscolha == 3)) {
                ganhador = 2;


            }
            else if ((jogadorEscolha == 3) && (computadorEscolha == 1)) {
                ganhador = 2;

            }

            else if ((jogadorEscolha == 3) && (computadorEscolha == 2)) {
                ganhador = 1;


            }

            else if ((jogadorEscolha == 3) && (computadorEscolha == 3)) {
                ganhador = 0;

            }

            document.getElementById("jogador-escolha-1").classList.remove('selecionado');
            document.getElementById("jogador-escolha-2").classList.remove('selecionado');
            document.getElementById("jogador-escolha-3").classList.remove('selecionado');

            document.getElementById("computador-escolha-1").classList.remove('selecionado');
            document.getElementById("computador-escolha-2").classList.remove('selecionado');
            document.getElementById("computador-escolha-3").classList.remove('selecionado');


            document.getElementById("jogador-escolha-" + jogadorEscolha).classList.add('selecionado');
            document.getElementById("computador-escolha-" + computadorEscolha).classList.add('selecionado');

            if(ganhador == 0 ){
                document.getElementById('mensagens').innerHTML = 'Empate';

            }
            else if(ganhador == 1 ){
                document.getElementById('mensagens').innerHTML = 'Jogador ganhou!';
                jogadorPontuacao++;
            } 

            else if(ganhador == 2 ){
                document.getElementById('mensagens').innerHTML = 'Computador ganhou!';
                computadorPontuacao++;
            } 

            document.getElementById('jogador-pontos').innerHTML = jogadorPontuacao;
            document.getElementById('computador-pontos').innerHTML = computadorPontuacao;

        }
    </script>
</body>
</html>
4
  • Mellon como não temos as imagens vc poderia posta um print da sua tela com elas, pelo menos para termos uma ideia de onde os números devem ficar
    – hugocsl
    Commented 21/05/2018 às 1:35
  • Acho que faltou passar o HTML também. Commented 21/05/2018 às 1:44
  • @hugocsl Cara infelizmente não estou conseguindo passar as imgs. Está dando erro no site. Mas tudo bem já consegui resolver o problema. Abraços e obrigado! ;)
    – user64495
    Commented 24/05/2018 às 8:49
  • @guastallaigor Já consertei o problema! Obrigado e abraços!
    – user64495
    Commented 24/05/2018 às 8:49

1 Resposta 1

1

Se você deseja colocar dentro das divs, o problema é o position:absolute que você está utilizando nas classes de pontuação.

Utilizando apenas o display:flex, flex-direction:column já mantém a pontuação logo abaixo do nome sem sair da tela. O position:absolute irá ignorar os a div "pai" e basicamente você iria setar o top, left, right, bottom da sua posição, o que neste caso não acho que é o melhor uso.

Verifique abaixo se é o que você precisa:

var jogadorEscolha = 0;
        var jogadorPontuacao = 0;
        var computadorEscolha = 0;
        var computadorPontuacao = 0;
        var ganhador = -1;


        function jogar(escolha) {
            jogadorEscolha = escolha;

            computadorEscolha = Math.floor((Math.random() * (3 - 1 + 1))) + 1 ;

            //  1 - Pedra 
            //  2 - Papel
            //  3 - Tesoura

            if ((jogadorEscolha == 1) && (computadorEscolha == 1)) {
                ganhador = 0;

            }

            else if ((jogadorEscolha == 1) && (computadorEscolha == 2)) {
                ganhador = 2;

            }

            else if ((jogadorEscolha == 1) && (computadorEscolha == 3)) {
                ganhador = 1;

            }


             else if ((jogadorEscolha == 2) && (computadorEscolha == 1)) {
                ganhador = 1;

            }

            else if ((jogadorEscolha == 2) && (computadorEscolha == 2)) {
                ganhador = 0;

            }

            else if ((jogadorEscolha == 2) && (computadorEscolha == 3)) {
                ganhador = 2;


            }
            else if ((jogadorEscolha == 3) && (computadorEscolha == 1)) {
                ganhador = 2;

            }

            else if ((jogadorEscolha == 3) && (computadorEscolha == 2)) {
                ganhador = 1;


            }

            else if ((jogadorEscolha == 3) && (computadorEscolha == 3)) {
                ganhador = 0;

            }

            document.getElementById("jogador-escolha-1").classList.remove('selecionado');
            document.getElementById("jogador-escolha-2").classList.remove('selecionado');
            document.getElementById("jogador-escolha-3").classList.remove('selecionado');

            document.getElementById("computador-escolha-1").classList.remove('selecionado');
            document.getElementById("computador-escolha-2").classList.remove('selecionado');
            document.getElementById("computador-escolha-3").classList.remove('selecionado');


            document.getElementById("jogador-escolha-" + jogadorEscolha).classList.add('selecionado');
            document.getElementById("computador-escolha-" + computadorEscolha).classList.add('selecionado');

            if(ganhador == 0 ){
                document.getElementById('mensagens').innerHTML = 'Empate';

            }
            else if(ganhador == 1 ){
                document.getElementById('mensagens').innerHTML = 'Jogador ganhou!';
                jogadorPontuacao++;
            } 

            else if(ganhador == 2 ){
                document.getElementById('mensagens').innerHTML = 'Computador ganhou!';
                computadorPontuacao++;
            } 

            document.getElementById('jogador-pontos').innerHTML = jogadorPontuacao;
            document.getElementById('computador-pontos').innerHTML = computadorPontuacao;

        }
* {
            font-family: Helvetica;
            font-weight: 400;
        }

        #titulo {
            color: #0984e3;
            text-align: center;
        }


        #placar {
            display: flex; 
            align-content: center;
            justify-content: center;
        }


        #jogador,#computador {
            position: relative;
            border-radius: 5px;
            width: 200px;
            padding: 20px;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            flex-wrap: wrap;
        }
        #jogador {
            background-color: #ff7675;
        }
        #computador {
            background-color: #74b9ff
        }
        #versus {
            font-size: 40px;
            text-align: center;
            width: 70px;
        }

        #jogador-nome, #computador-nome; {
            padding: 0px;
            margin: 0px;
        }
        #jogador-nome {
            text-align: left;
        }
        #computador-nome {
            text-align: right;
        }
        #jogador-pontos, #computador-pontos {
            font-size: 32px;
            
        }
        ul#jogador-escolha li, ul#computador-escolha li {
            list-style: inline;
            text-align: center;
            margin: 0;
            padding: 0; 
        }

        ul#jogador-escolha li, ul#computador-escolha li {
            display: inline;

        }
        ul#jogador-escolha li a, ul#computador-escolha li a {
            opacity: .2;

        }
        ul#jogador-escolha li a:hover, ul#jogador-escolha li a.selecionado, ul#computador-escolha li a.selecionado {
            opacity: 1;

        }
        ul#jogador-escolha li a img, ul#computador-escolha li a img {
            max-width: 80px;
        }
        #mensagens {
            background-color: #636e72;
            font-size: 32px;
            border-radius: 5px;
            margin: 40px 0;
            padding: 20px;
        }
<div id="principal">
        <h1 id="titulo">Pedra, Papel e Tesoura</h1>
        <div id="placar">
            <div id="jogador">
                <h2 id="jogador-nome">Jogador</h2>
                <span id="jogador-pontos">0</span>
                <ul id="jogador-escolha">
                    <li><a id="jogador-escolha-1" onclick="jogar(1)"><img src="pedra.png"></a></li>
                    <li><a id="jogador-escolha-2" onclick="jogar(2)"><img src="papel.png"></a></li>
                    <li><a id="jogador-escolha-3" onclick="jogar(3)"><img src="tesoura.png"></a></li>
                </ul>
            </div>
            <div id="versus">vs</div>
                <div id="computador">
                <h2 id="computador-nome">Computador</h2>
                <span id="computador-pontos">0</span>
                <ul id="computador-escolha">
                    <li><a id="computador-escolha-1"><img src="pedra.png"></a></li>
                    <li><a id="computador-escolha-2"><img src="papel.png"></a></li>
                    <li><a id="computador-escolha-3"><img src="tesoura.png"></a></li>
                </ul>
            </div>
        </div>
        <div id="mensagens">&nbsp;</div>
    </div>

5
  • As divs ficaram deitadas. Não teria como elas ficarem em pé?
    – user64495
    Commented 21/05/2018 às 19:43
  • Não entendi, como assim em pé? Usei as suas classes mesmo, só alterei a de pontuação e a #computador, #jogador. Commented 21/05/2018 às 21:32
  • Ahh entendi. Eu pisei na bola. Mas beleza mano! Valeu pela ajuda!
    – user64495
    Commented 24/05/2018 às 8:50
  • Cara continuo sem entender rs. A resposta ajudou? Commented 24/05/2018 às 11:00
  • Ajudou, valeu. ^^
    – user64495
    Commented 29/05/2018 às 12:29

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