Ir ao conteúdo
  • Cadastre-se

Alexsander Gutierrez

Membro Júnior
  • Posts

    18
  • Cadastrado em

  • Última visita

Tópicos solucionados

  1. O post de Alexsander Gutierrez em Jogo da Velha - erro de escopo/lógica foi marcado como solução   
    Olá boa noite, eu ajustei aqui seu código apenas troquei o onclick event para click e arrow function no seu arquivo js e comentei algumas linhas também alterei seu HTML adicionando a tag script abaixo do body pois como ele acessa elementos do DOM precisa ser carregado depois segue as alterações:
    let jogadoresAtivos = false; function cellWins(cell) { cell.style.hover = 'transform: scale(1.2);'; } window.onload = function () { document.getElementById('players').style.visibility = 'hidden'; document.getElementById('jogadorAtual').style.visibility = 'hidden'; document.getElementById('jogo').style.visibility = 'hidden'; }; const infoBtn = document.getElementById('info'); infoBtn.addEventListener('click', () => { alert( 'Jogo da Velha feito com HTML, CSS e JavaScript\n' + 'Desenvolvido por: @campanaricarlos\n' + 'GitHub: https://github.com/ccampa896\n' + 'LinkedIn: https://www.linkedin.com/in/carlos-campanari-9b4b3b1b3/\n' ); }); const iconsBtn = document.getElementById('icons'); iconsBtn.addEventListener('click', () => { alert('Icons by https://icons.getbootstrap.com/'); }); function useLightTheme() { document.body.style.color = '#212529'; document.body.style.backgroundColor = '#f1f5f9'; const hash = document.getElementById('hashtag'); const controller = document.getElementById('controller'); hash.style.border = '0px solid #fff'; controller.style.border = '0px solid #fff'; } function useDarkTheme() { document.body.style.color = '#f1f5f9'; document.body.style.backgroundColor = '#212529'; const hash = document.getElementById('hashtag'); const controller = document.getElementById('controller'); hash.style.margin = '10px'; controller.style.margin = '10px'; hash.style.border = '5px solid #fff'; controller.style.border = '5px solid #fff'; hash.style.borderRadius = '10px'; controller.style.borderRadius = '10px'; } const lightBtn = document.getElementById('is-light'); const darkBtn = document.getElementById('is-dark'); lightBtn.addEventListener('click', useLightTheme); darkBtn.addEventListener('click', useDarkTheme); function jogadores() { let elementos = document.querySelectorAll('.tresD'); elementos.forEach(function (elemento) { elemento.remove(); }); document.getElementById('players').style.visibility = 'visible'; } const btnJogadores = document.getElementById('jogadores'); btnJogadores.addEventListener('click', jogadores); let NomeJogador1 = ''; let NomeJogador2 = ''; const btnSubmit = document.getElementById('submit'); btnSubmit.addEventListener('click', () => { NomeJogador1 = document.getElementById('jogador1').value; NomeJogador2 = document.getElementById('jogador2').value; jogadoresAtivos = true; alert( 'Jogadores cadastrados!\n' + 'Jogador 1: ' + NomeJogador1 + '\n' + 'Jogador 2: ' + NomeJogador2 ); let elementos = document.querySelectorAll('#players'); elementos.forEach(function (elemento) { elemento.remove(); }); }); function Jogador(nome, forma) { this.nome = nome; this.forma = forma; } let jogador1, jogador2; //Jogador da rodada let jogadorAtual; let formas = ['X', 'O']; /* 0 1 2 3 4 5 6 7 8 */ let tabuleiro = new Array(9); const setLabelJogadorAtual = function () { document.getElementById('jogadorAtualh3').innerHTML = 'Jogador atual: ' + jogadorAtual.nome; }; function iniciarJogo() { if (jogadoresAtivos) { alert( 'Para iniciar um novo jogo, clique em "Reiniciar"\n' + 'Ou clique em "Parar jogo" para finalizar o jogo atual!' ); alert( 'Jogo iniciado!\n' + 'Jogador 1: ' + NomeJogador1 + '\n' + 'Jogador 2: ' + NomeJogador2 + '\n' + 'Boa sorte!' ); jogador1 = new Jogador(NomeJogador1, 0); //X jogador2 = new Jogador(NomeJogador2, 1); //O jogadorAtual = jogador1; setLabelJogadorAtual(); document.getElementById('jogadorAtual').style.visibility = 'visible'; document.getElementById('jogo').style.visibility = 'visible'; } else { alert('Você precisa informar os jogadores!'); } } jogadorAtual = jogador1; const btnIniciarJogo = document.getElementById('iniciarJogo'); btnIniciarJogo.addEventListener('click', iniciarJogo); /*Verifica se o tabuleiro está completamente preenchido, se estiver, significa que ninguém venceu a rodada*/ tabuleiroIsFilled = function () { let preenchidos = 0; for (let i = 0; i < tabuleiro.length; i++) if (tabuleiro[i] != undefined) preenchidos++; return preenchidos == tabuleiro.length; }; /*Verifica a existência de ocorrências de um mesmo elemento(X ou O) nas linhas do tabuleiro, procurando um vencedor*/ allElementsInSomeLine = function () { for (let i = 0; i < 7; i += 3) { if ( tabuleiro[i] == 'X' && tabuleiro[i + 1] == 'X' && tabuleiro[i + 2] == 'X' ) { alert(jogador1.nome + ' wins!!!'); pararJogo(); } if ( tabuleiro[i] == 'O' && tabuleiro[i + 1] == 'O' && tabuleiro[i + 2] == 'O' ) { alert(jogador2.nome + ' wins!!!'); pararJogo(); } } }; /*Verifica a existência de ocorrências de um mesmo elemento(X ou O) nas colunas do tabuleiro, procurando um vencedor*/ allElementsInSomeColumn = function () { for (let i = 0; i < 3; i++) { if ( tabuleiro[i] == 'X' && tabuleiro[i + 3] == 'X' && tabuleiro[i + 6] == 'X' ) { alert(jogador1.nome + ' wins!!!'); pararJogo(); } if ( tabuleiro[i] == 'O' && tabuleiro[i + 3] == 'O' && tabuleiro[i + 6] == 'O' ) { alert(jogador2.nome + ' wins!!!'); pararJogo(); } } }; /*Verifica a existência de ocorrências de um mesmo elemento(X ou O) nas diagonais do tabuleiro, procurando um vencedor*/ allElementsInSomeDiagonal = function () { if ( (tabuleiro[0] == 'X' && tabuleiro[4] == 'X' && tabuleiro[8] == 'X') || (tabuleiro[2] == 'X' && tabuleiro[4] == 'X' && tabuleiro[6] == 'X') ) { alert(jogador1.nome + ' wins!!!'); pararJogo(); } else if ( (tabuleiro[0] == 'O' && tabuleiro[4] == 'O' && tabuleiro[8] == 'O') || (tabuleiro[2] == 'O' && tabuleiro[4] == 'O' && tabuleiro[6] == 'O') ) { alert(jogador2.nome + ' wins!!!'); pararJogo(); } }; /*Preenche a célula da tabela HTML escolhida pelo usuário ao clicar, além de cuidar do jogador atual da rodada e chamar as funções de verificação de algum ganhador */ function setOnCeil(cell, pos) { if (tabuleiro[pos] == undefined) { cell.textContent = jogadorAtual.forma; tabuleiro[pos] = jogadorAtual.forma; if (jogadorAtual == jogador1) { jogadorAtual = jogador2; } else { jogadorAtual = jogador1; } setLabelJogadorAtual(); } else { alert('Célula já preenchida! Escolha outra!'); } allElementsInSomeLine(); allElementsInSomeColumn(); allElementsInSomeDiagonal(); if (tabuleiroIsFilled()) { alert('Nobody wins! :(. Try Again'); pararJogo(); } } const btnCell0 = document.getElementById('cell0'); const btnCell1 = document.getElementById('cell1'); const btnCell2 = document.getElementById('cell2'); const btnCell3 = document.getElementById('cell3'); const btnCell4 = document.getElementById('cell4'); const btnCell5 = document.getElementById('cell5'); const btnCell6 = document.getElementById('cell6'); const btnCell7 = document.getElementById('cell7'); const btnCell8 = document.getElementById('cell8'); btnCell0.addEventListener('click', () => setOnCeil(btnCell0, 0)); btnCell1.addEventListener('click', () => setOnCeil(btnCell1, 1)); btnCell2.addEventListener('click', () => setOnCeil(btnCell2, 2)); btnCell3.addEventListener('click', () => setOnCeil(btnCell3, 3)); btnCell4.addEventListener('click', () => setOnCeil(btnCell4, 4)); btnCell5.addEventListener('click', () => setOnCeil(btnCell5, 5)); btnCell6.addEventListener('click', () => setOnCeil(btnCell6, 6)); btnCell7.addEventListener('click', () => setOnCeil(btnCell7, 7)); btnCell8.addEventListener('click', () => setOnCeil(btnCell8, 8)); const pararJogo = function () { if (jogadoresAtivos) { alert( 'Jogo finalizado!\n' + 'Obrigado por jogar!\n' + 'Página recarregada!' ); jogadoresAtivos = false; // document.getElementById('jogador1').value = ''; // document.getElementById('jogador2').value = ''; window.location.reload(); } else { alert('O jogo não foi iniciado!\n' + 'Comece um novo jogo!'); } }; const btnPararJogo = document.getElementById('pararJogo'); btnPararJogo.addEventListener('click', pararJogo); const btnJogoDaVelha = document.getElementById('jogo_wiki'); btnJogoDaVelha.addEventListener('click', () => { alert('Página recarregada!\n' + 'Você será redirecionado para a Wikipédia!'); window.location.reload(); window.open('https://pt.wikipedia.org/wiki/Jogo_da_velha'); }); <!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" /> <title>Jogo da Velha</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous" /> <link rel="stylesheet" href="./style.css" /> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script> </head> <body> <header> <nav class="navbar bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" title="Jogo da Velha: Wikipédia, a enciclopédia livre" href="#" id="jogo_wiki"> <img src="./imagens/hash.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top" /> Jogo da Velha </a> <a class="navbar-brand" id="jogadores" href="#"> <img src="./imagens/person-fill.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top" /> Jogadores </a> <a class="navbar-brand" id="iniciarJogo" href="#"> <img src="./imagens/play-circle.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top" /> Iniciar </a> <a class="navbar-brand" href="#"> <img src="./imagens/repeat.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top" /> Reiniciar </a> <a class="navbar-brand" id="pararJogo" href="#"> <img src="./imagens/x-lg.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top" /> Parar jogo </a> <a class="navbar-brand" id="is-light" href="#"> <img src="./imagens/sun-fill.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top" /> Modo Claro </a> <a class="navbar-brand" id="is-dark" href="#"> <img src="./imagens/moon-fill.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top" /> Modo Escuro </a> <a class="navbar-brand" id="info" href="#"> <img src="./imagens/info.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top" /> Info </a> <a class="navbar-brand" id="icons" href="#"> <img src="./imagens/images.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top" /> Icons </a> </div> </nav> </header> <div class="clearfix"> <img src="./imagens/hash.svg" class="float-end" id="hashtag" alt="hashtag" /> <p> O jogo da velha (português brasileiro) ou jogo do galo (português europeu) ou três em linha é um jogo e/ou passatempo popular. É um jogo de regras extremamente simples, que não traz grandes dificuldades para seus jogadores e é facilmente aprendido. A origem é desconhecida, com indicações de que pode ter começado no antigo Egito, onde foram encontrados tabuleiros esculpidos na rocha, que teriam mais de 3.500 anos. De alguma forma, é um jogo "aparentado" dos "Merels". </p> <img src="./imagens/controller.svg" class="float-start" id="controller" alt="controller" /> <p> Algumas lendas urbanas contam que o jogo terá nascido em Portugal, na cidade de Almada no ano 545. No entanto, só foi popularizado no ano 1500, pelo descobridor Pedro Álvares Cabral, que adorava jogar este jogo durante as suas viagens. Álvares Cabral terá decidido que este jogo seria o primeiro a ser ensinado ao povo indígena no Brasil. O jogo pode ser jogado sobre um tabuleiro ou mesmo sendo riscado sobre um pedaço de papel ou mesa. O menor tabuleiro do mundo foi feito com DNA. </p> <p> Se os dois jogadores jogarem sempre da melhor forma, o jogo terminará sempre em empate. A lógica do jogo é muito simples, de modo que não é difícil deduzir ou decorar todas as possibilidades para efetuar a melhor jogada - apesar de o número total de possibilidades ser muito grande, a maioria delas é simétrica, além de que as regras são simples. Por esse motivo, é muito comum que o jogo empate (ou "dê velha"). </p> <br /> <div class="tresD"> <div class="front"> <img src="./imagens/notebook.png" alt="Tecnologia da Informação" /> </div> <div class="back"> <img src="./imagens/hash.png" alt="Tecnologia da Informação" /> </div> </div> </div> <div id="jogadorAtual"> <h3 id="jogadorAtualh3"></h3> </div> <div id="players"> <h3>Jogadores</h3> <label for="Jogador 1"> Jogador 1: </label> <input type="text" id="jogador1" /> <br /> <br /> <label for="Jogador 1"> Jogador 2: </label> <input type="text" id="jogador2" /> <br /> <br /> <input type="submit" id="submit" value="Ok" /> </div> <div id="jogo"> <table cellpadding="0" cellspacing="0" id="table"> <tr> <td class="table-data" id="cell0"> &nbsp; </td> <td class="table-data" id="cell1"> &nbsp; </td> <td class="table-data" id="cell2"> &nbsp; </td> </tr> <tr> <td class="table-data" id="cell3"> &nbsp; </td> <td class="table-data" id="cell4"> &nbsp; </td> <td class="table-data" id="cell5"> &nbsp; </td> </tr> <tr> <td class="table-data" id="cell6"> &nbsp; </td> <td class="table-data" id="cell7"> &nbsp; </td> <td class="table-data" id="cell8"> &nbsp; </td> </tr> </table> </div> <script src="./index.js"></script> </body> </html>  
  2. O post de Alexsander Gutierrez em como ajustar imagem na barra lateral fixa css+html? foi marcado como solução   
    <!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"> <title>Document</title> <style> .barrafixa{ height: 45%; width: 60px; margin-top: 85px; position: fixed; margin: 150px; top: 0px; left: 0px; background-color: #DAA520 ; padding: 10px; /** Adicionado **/ display: flex; flex-direction: column; align-items: center; } </style> </head> <body> <div class="barrafixa"> <a href="https://www.instagram.com/"> <img width= "50px" src="url da image aqui"/> </a> <a href="https://www.instagram.com/"> <img width= "50px" src="url da image aqui"/> </a> <a href="https://www.instagram.com/"> <img width= "50px" src="url da image aqui"/> </a> <a href="https://www.instagram.com/"> <img width= "50px" src="url da image aqui"/> </a> </div> </body> </html> Olá boa noite, você pode ajustar as imagens adicionando as propriedades display: flex; align-items: center; flex-direction: column; na barra fixa, ou como no caso as imagens dentro de uma tag âncora que por padrão são elementos de linha, você simplesmente pode adicionar um text-align: center que vai centraliza-las, segue o código de exemplo que fiz.

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...