Ir ao conteúdo
  • Cadastre-se

Alexsander Gutierrez

Membro Júnior
  • Posts

    18
  • Cadastrado em

  • Última visita

  1. Olá boa tarde, você pode atribuir um método no evento de click pela propriedade onclick e depois para remover definir como undefined, ou utilizando o removeEventListener você precisa ter a função declarada no código que seriam nove funções, e passar cada referencia dessa função para o removeEventListener de cada botão, segue os exemplos: com o onclick: 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'); btnCell1.onclick = () => setOnCeil(btnCell1, 1); btnCell2.onclick = () => setOnCeil(btnCell2, 2); btnCell3.onclick = () => setOnCeil(btnCell3, 3); btnCell4.onclick = () => setOnCeil(btnCell4, 4); btnCell5.onclick = () => setOnCeil(btnCell5, 5); btnCell6.onclick = () => setOnCeil(btnCell6, 6); btnCell7.onclick = () => setOnCeil(btnCell7, 7); btnCell8.onclick = () => setOnCeil(btnCell8, 8); function removeClicks = () => { btnCell0.onclick = undefined; btnCell1.onclick = undefined; btnCell2.onclick = undefined; btnCell3.onclick = undefined; btnCell4.onclick = undefined; btnCell5.onclick = undefined; btnCell6.onclick = undefined; btnCell7.onclick = undefined; btnCell8.onclick = undefined; } com o removeEventListener: 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'); const setCell0 = () => setOnCeil(btnCell0, 0); const setCell1 = () => setOnCeil(btnCell1, 1); const setCell2 = () => setOnCeil(btnCell2, 2); const setCell3 = () => setOnCeil(btnCell3, 3); const setCell4 = () => setOnCeil(btnCell4, 4); const setCell5 = () => setOnCeil(btnCell5, 5); const setCell6 = () => setOnCeil(btnCell6, 6); const setCell7 = () => setOnCeil(btnCell7, 7); const setCell8 = () => setOnCeil(btnCell8, 8); btnCell0.addEventListener('click', setCell0); btnCell1.addEventListener('click', setCell1); btnCell2.addEventListener('click', setCell2); btnCell3.addEventListener('click', setCell3); btnCell4.addEventListener('click', setCell4); btnCell5.addEventListener('click', setCell5); btnCell6.addEventListener('click', setCell6); btnCell7.addEventListener('click', setCell7); btnCell8.addEventListener('click', setCell8); function removeClicks() { btnCell0.removeEventListener('click', setCell0); btnCell1.removeEventListener('click', setCell1); btnCell2.removeEventListener('click', setCell2); btnCell3.removeEventListener('click', setCell3); btnCell4.removeEventListener('click', setCell4); btnCell5.removeEventListener('click', setCell5); btnCell6.removeEventListener('click', setCell6); btnCell7.removeEventListener('click', setCell7); btnCell8.removeEventListener('click', setCell8); } qualquer duvidas estou a disposição!
  2. 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>
  3. Boa noite talvez isso ajude, vai parecer complexo esse código no inicio mas eu quero que você leia e estude ele com calma: <!DOCTYPE html> <html lang="en"> <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> * { box-sizing: border-box; } p { text-align: center; } table { margin: auto; } table, tr, td { border: 1px solid; } td { text-align: center; width: 100px; font-weight: bold; } </style> </head> <body> <button onclick="generateCalendar()">Gerar próximo mês</button> <p id="monthName"></p> <table id="table"> </table> <script> const months = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"]; let month = -1; let colors = [ "#69af4a", "#69af4a", "#599cda", "#599cda", "#f9ff64", "#f9ff64", "#fc3401", "#fc3401" ]; const isSaturday = (day) => day.getDay() === 6; function generateCalendar() { month += 1; const monthName = months[month]; document.getElementById("monthName").innerText = monthName; const today = new Date(); const year = today.getFullYear(); const firstDayOfMonth = new Date(year, month, 1); const lastDayOfMonth = new Date(year, month + 1, 0); const totalOfDaysMonth = lastDayOfMonth.getDate(); /** @type {HTMLTableElement} **/ const table = document.getElementById("table"); table.innerHTML = "" table.insertRow(0); table.rows[0].innerHTML = "<tr>" + "<th>Dom</th>" + "<th>Seg</th>" + "<th>Ter</th>" + "<th>Qua</th>" + "<th>Qui</th>" + "<th>Sex</th>" + "<th>Sab</th>" + "</tr >"; let days = []; for (let i = -firstDayOfMonth.getDay(); i < totalOfDaysMonth; i++) { const dayNumber = i + 1; days.push(dayNumber); if (isSaturday(new Date(year, month, dayNumber))) { const index = table.rows.length; table.insertRow(index); days.forEach((day, i) => { table.rows[index].insertCell(i) if (day > 0) { table.rows[index].cells[i].innerText = day table.rows[index].cells[i].style.backgroundColor = colors[new Date(year, month, day).getDay()] } }) days = []; const lastColor = colors.pop(); colors.unshift(lastColor); } } if (days.length < 7) { const index = table.rows.length; table.insertRow(index); days.forEach((day, i) => { table.rows[index].insertCell(i) table.rows[index].cells[i].innerText = day table.rows[index].cells[i].style.backgroundColor = colors[new Date(year, month, day).getDay()] }) } } generateCalendar() </script> </body> </html> Qualquer dúvidas estou a disposição.
  4. Olá, existem muitos cursos gratuitos na internet, como o curso em vídeo, Udemy, e muitos outros sites, e também você pode verificar se em sua cidade existe escolas que oferecem cursos técnicos na área, essas escolas podem ajudar a te dar uma visão interessante sobre a área, a maioria provavelmente é paga mais em algumas você pode fazer uma prova e se passar ganha o curso, o importante é você começar a aprender a lógica de programação primeiro, depois quando estiver mais familiarizado com o assunto, começa estudar alguma linguagem de programação, nesse ponto de escolher uma linguagem depende muito dos seus objetivos na carreira. Qualquer dúvidas estou a disposição.
  5. Oi, você precisa praticar e estudar sempre, ai vai chegar um momento em que tudo fara sentido e você estará tão acostumado que fara automático os códigos, também estudei e estudo pelo curso em vídeo, você está no caminho certo, continue firme.
  6. Olá Reishini, tudo bem?, então sem css não tem como mudar o estilo de uma página web, o que você pode fazer é colocar uma função nesse botão que ao ser clicado, ele seleciona um elemento do html e altere seu atributo style.backgroundColor para uma string que pode ser o nome da cor, um RGB, rgba, hsl, hsla, hex, para isso você utiliza javascript para escrever a função e depois apenas precisa adicionar o nome da função no evento de onclick do botão assim: <!DOCTYPE html> <html> <body> <button onclick="toogle()" >toogle</button> <div id="myContainer" style="padding:4rem;"> </div> <script> function toogle() { document.getElementById("myContainer").style.backgroundColor = "red"; } </script> </body> </html> espero que isso ajude, qualquer dúvidas estou a disposição.
  7. Olá Gustavo, tudo bem, em Javascript para calcular valores vindo de entradas inseridas pelo usuário você precisa converter os valores para inteiro ou float assim: function sumExampleWithParseInt(a, b) { let num1 = parseInt(a); let num2 = parseInt(b); console.log(num1 + num2); } function sumExampleWithParseFloat(a, b) { let num1 = parseFloat(a); let num2 = parseFloat(b); console.log(num1 + num2); } quando você tenta somar duas strings em Javascript você elas são concatenadas, espero que isso ajude, outra coisa ao comparar números em Javascript usando o operador de maior ">" ou menor "<", mesmo que o número seja tipo string durante a comparação ele é tratado como numero, o que é chamado de coerção implícita. qualquer dúvidas estou a disposição.
  8. Olá boa noite, uma solução simples é utilizar o evento onscroll e pegar o scrollY para a janela ou o scrollTop para scroll dentro de um elemento como uma div e de acordo com o valor remover ou adicionar uma class com o estilo descrito, para algum elemento na página, fiz um exemplo mostrando isso na pratica <!DOCTYPE html> <html lang="pt-br"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta charset="utf-8" /> <style> .myclass > .box:nth-child(odd) { background-color: red; } .box { height: 200px; border: 1px solid #000; margin: 16px 0; } .withscroll{ max-height: 100px; overflow-y: scroll; color: blue; text-align: center; } .bg-yellow { background-color: yellow !important; } </style> </head> <body> <div id="main"> <div class="box" ></div> <div id="scrollbox" class="box withscroll" > <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </div> <div class="box" ></div> <div class="box" ></div> <div class="box" ></div> <div class="box" ></div> <div class="box" ></div> <div class="box" ></div> <div class="box" ></div> </div> <script> const main = document.getElementById("main"); const withscroll = document.getElementById('scrollbox'); window.onscroll = function() { if(window.scrollY > 100) { main.classList.add("myclass"); }else { main.classList.remove("myclass"); } } withscroll.onscroll = function() { if(withscroll.scrollTop > 30) { withscroll.classList.add("bg-yellow"); }else { withscroll.classList.remove("bg-yellow"); } } </script> </body> </html> Espero que isso o ajude.
  9. <!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.
  10. Ola você pode usar media query do css ou javascript com uma logica bastante simples var largura = window.innerWidth; if(largura < 300){ document.getElementById("id da imagem").style.display = "none"; }else{ document.getElementById("id da imagem").style.display = "block"; } img{ display:block; } @media only screen and (max-width:300px){ img{ display:none; } }
  11. <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Caça-palavras</title> <style> h1{ color:blue; font-size:30px; } h2{ color:#757575; margin:1%; font-size:20px; } h1, h2{ text-align:center; } p{ font-size:15px; margin:0; } body{ background-color:yellow; } #dicas{ overflow-y:scroll; height:90%; width:25%; text-align: justify; padding:1% 1% 2% 3%; font-size:.8em; position:fixed; margin:0 0 0 1%; top:.5%; background-color: #F5F5F5; } #dicas li{ margin:.5%; } @media only screen and (max-width:639px){ #dicas{ overflow:unset; height:auto; margin:auto; width:95%; position:relative; } } html, body{ margin:0; padding:0; background-color: #4CAF50; } table{ width:25%; } table, tr, td{ border: 1px solid black; background-color: white; } td{ font-weight: bold; font-family: monospace; font-size: 1.6em; color: black; } td:hover{ background-color: #F9D387; cursor: pointer; } .selecionada, .encontrada, .errado{ transition:.2s linear; } .selecionada{ background-color: lightblue; } .encontrada{ background-color: #009688; } .errado{ color: red; } #iniciar{ padding: 6%; background-color: lightgrey; } #jogo{ text-align: center; } #btnPlay{ margin:auto; display: block; } #parabens{ margin: auto; text-align: center; color: #FF5722; transition: .2s linear 2s; top:50%; left:0; right:0; } #btnVoltar{ margin: auto; } button{ border:1px solid white; outline:none; background-color:lightblue; transition:.2s linear; font-weight:bold; padding:1% 2%; color:white; } button:hover{ border:1px solid lightblue; outline:none; color:lightblue; background-color:white; } </style> </head> <body> <div id="iniciar"> <h1>Caça-palavras</h1> <button id="btnPlay"> <img src="imag1e.png" width="largura aqui" height="altura aqui" alt="Texto que fica no lugar do elemento caso a imagem não carregue"> </button> </div> <div id="jogo" hidden> <button hidden id="btnVoltar">voltar</button> <h2>Meios de transportes</h2> <p id="encontradas"></p> <h2 hidden id="parabens">Parabéns!</h2> <ol id="dicas"> <h4 style="text-align:center;">Dicas</h4> <li>É um meio de transporte terrestre que, geralmente, cabe cinco pessoas.</li> <li>É um meio de transporte sob duas rodas.</li> <li>É um meio de transporte com vários vagões ligados entre si e pode transportar pessoas ou cargas.</li> <li>É um meio de transporte terrestre que passa por túneis subterrâneos ou por viadutos e realiza a parada em estações designadas. <li>Meio de transporte usado para pedalar em pistas, ciclovias ou parques.</li> <li>É um meio de transporte terrestre grande, com eixos dianteiros e traseiros, geralmente tem entre quatro e dezesseis rodas e, tem uma carreta.</li> <li>Meio de transporte aquático que tem vela, começa com a letra B e tem cinco letras.</li> <li>Meio de transporte aquático que afundou no filme Titanic.</li> <li>Meio de transporte aquático que fica abaixo da água, pode flutuar sob a água e começa com a letra S.</li> <li>Meio de transporte aéreo que tem duas asas, voa e começa com a letra A.</li> <li>Meio de transporte aéreo que tem hélice e começa com a letra H.</li> <li>Meio de transporte aéreo que tem cesto, é movido a ar e começa com a letra B.</li> </ol> <table id="tabuleiro" align="center"> <tr> <td>Ã</td> <td>Ê</td> <td>O</td> <td>O</td> <td>Ã</td> <td>O</td> <td>F</td> <td>C</td> <td>A</td> <td>R</td> <td>R</td> <td>O</td> </tr> <tr> <td>J</td> <td>K</td> <td>S</td> <td>Ã</td> <td>B</td> <td>D</td> <td>L</td> <td>T</td> <td>G</td> <td>W</td> <td>H</td> <td>Ô</td> </tr> <tr> <td>C</td> <td>A</td> <td>M</td> <td>I</td> <td>N</td> <td>H</td> <td>Ã</td> <td>O</td> <td>X</td> <td>Z</td> <td>E</td> <td>B</td> </tr> <tr> <td>H</td> <td>E</td> <td>L</td> <td>V</td> <td>Ç</td> <td>O</td> <td>B</td> <td>Q</td> <td>I</td> <td>M</td> <td>L</td> <td>I</td> </tr> <tr> <td>N</td> <td>A</td> <td>B</td> <td>A</td> <td>L</td> <td>Ã</td> <td>O</td> <td>L</td> <td>H</td> <td>O</td> <td>I</td> <td>C</td> </tr> <tr> <td>T</td> <td>B</td> <td>M</td> <td>E</td> <td>T</td> <td>R</td> <td>Ô</td> <td>T</td> <td>N</td> <td>X</td> <td>C</td> <td>I</td> </tr> <tr> <td>R</td> <td>L</td> <td>Ã</td> <td>O</td> <td>J</td> <td>K</td> <td>Ç</td> <td>Y</td> <td>A</td> <td>R</td> <td>Ó</td> <td>C</td> </tr> <tr> <td>E</td> <td>O</td> <td>B</td> <td>A</td> <td>R</td> <td>C</td> <td>O</td> <td>F</td> <td>V</td> <td>S</td> <td>P</td> <td>L</td> </tr> <tr> <td>M</td> <td>Ã</td> <td>O</td> <td>H</td> <td>E</td> <td>L</td> <td>S</td> <td>U</td> <td>I</td> <td>B</td> <td>T</td> <td>E</td> </tr> <tr> <td>B</td> <td>I</td> <td>M</td> <td>O</td> <td>T</td> <td>O</td> <td>C</td> <td>A</td> <td>O</td> <td>M</td> <td>E</td> <td>T</td> </tr> <tr> <td>F</td> <td>A</td> <td>V</td> <td>I</td> <td>O</td> <td>D</td> <td>H</td> <td>J</td> <td>T</td> <td>O</td> <td>R</td> <td>A</td> </tr> <tr> <td>Q</td> <td>Ã</td> <td>S</td> <td>U</td> <td>B</td> <td>M</td> <td>A</td> <td>R</td> <td>I</td> <td>N</td> <td>O</td> <td>Ô</td> </tr> </div> <script> var t = document.getElementById("tabuleiro"); var transportes, primeiroclique, encontradas, data; function clique(e){ if(transportes.length > 0){ if(primeiroclique == false){ data.colunainicial = parseInt(e.target.dataset.index); data.linhainicial = parseInt(e.target.parentElement.dataset.index); data.letrainicial = e.target.innerText; if(e.target.dataset.encontrada == "true"){ e.target.classList.replace("encontrada", "selecionada"); }else{ e.target.classList.add("selecionada"); } primeiroclique = true; }else{ if(data.colunainicial != parseInt(e.target.dataset.index) && data.linhainicial != parseInt(e.target.parentElement.dataset.index)){ return; } data.colunafinal = parseInt(e.target.dataset.index); data.linhafinal = parseInt(e.target.parentElement.dataset.index); data.letrafinal = e.target.innerText; if(data.colunainicial > data.colunafinal){ var novacolunainicial = data.colunafinal; var novacolunafinal = data.colunainicial; data.colunainicial = novacolunainicial; data.colunafinal = novacolunafinal; } if(data.linhainicial > data.linhafinal){ var novalinhainicial = data.linhafinal; var novalinhafinal = data.linhainicial; data.linhainicial = novalinhainicial; data.linhafinal = novalinhafinal; } primeiroclique = false; if(e.target.dataset.encontrada == "true"){ e.target.classList.replace("encontrada", "selecionada"); }else{ e.target.classList.add("selecionada"); } comparar(data); } } } function horizontal(fn){ console.log("seleção horizontal"); for(var i = data.colunainicial; i < data.colunafinal + 1; i++){ var td = t.rows[data.linhainicial].cells[i]; if(td.dataset.encontrada == "true"){ td.classList.replace("encontrada", "selecionada"); }else{ td.classList.add("selecionada"); } fn(td); } } function vertical(fn){ console.log("seleção vertical"); for(var i = data.linhainicial; i < data.linhafinal + 1; i++){ var td = t.rows[i].cells[data.colunainicial]; if(td.dataset.encontrada == "true"){ td.classList.replace("encontrada", "selecionada"); }else{ td.classList.add("selecionada"); } fn(td); } } function comparar(data){ var selecionados = { palavra:"", elementos:[] }; if(data.colunainicial != data.colunafinal && data.linhainicial == data.linhafinal){ horizontal(function(td){ selecionados.palavra += td.innerText; selecionados.elementos.push(td); }); }else if(data.colunainicial == data.colunafinal && data.linhainicial != data.linhafinal){ vertical(function(td){ selecionados.palavra += td.innerText; selecionados.elementos.push(td); }); } //essa linha aqui usei um operador condicional ternário que vai retorna a palavra selecionada, se ela estiver na lista, //caso a palavra esteja invertida, a primeira condição vai dar falso e vai cair na segunda condicional //que vai inverte a palavra e verificar de novo se tem na lista, caso sim vai retorna ela, caso, não achar mesmo invertendo, vai retorna falso //isso é importante para palavras de cabeça para baixo no quebra cabeça var palavraselecionada = transportes.includes(selecionados.palavra) ? selecionados.palavra : transportes.includes(selecionados.palavra.split("").reverse().join("")) ? selecionados.palavra.split("").reverse().join('') : false; if(palavraselecionada){ transportes = transportes.filter(function(p){ if(palavraselecionada != p){ return p; } }); setTimeout(function(){ for(var i = 0; i < selecionados.elementos.length; i++){ var elemento = selecionados.elementos[i]; elemento.classList.replace("selecionada", "encontrada"); elemento.dataset.encontrada = "true"; } }, 1000); encontradas += 1; document.getElementById("encontradas").innerText = "Encontradas: "+encontradas+"\n Restantes: "+ transportes.length; if(transportes.length == 0){ setTimeout(function(){ document.getElementById("parabens").hidden = false; document.getElementById("btnVoltar").hidden = false; }, 2000); } data = {}; }else{ data = {}; setTimeout(function(){ for(var i = 0; i < selecionados.elementos.length; i++){ var elemento = selecionados.elementos[i]; elemento.classList.replace("selecionada", "errado"); } setTimeout(function(){ for(var i = 0; i < selecionados.elementos.length; i++){ var elemento = selecionados.elementos[i]; if(elemento.dataset.encontrada == "true"){ elemento.classList.replace("errado", "encontrada"); }else{ elemento.classList.remove("errado"); } } }, 1000); }, 1000); } } function iniciaJogo(){ transportes=["CARRO", "MOTO","TREM", "METRÔ","BICICLETA", "CAMINHÃO", "BARCO", "NAVIO", "SUBMARINO", "AVIÃO","HELICÓPTERO", "BALÃO"]; primeiroclique = false; encontradas = 0; data = {}; document.getElementById("encontradas").innerText = "Encontradas: "+encontradas+"\n Restantes: "+ transportes.length; for(var i = 0; i < t.rows.length; i++){ t.rows[i].id = "linha " + i; t.rows[i].dataset.index = i; for(var j = 0; j < t.rows[i].cells.length; j++){ t.rows[i].cells[j].classList = []; t.rows[i].cells[j].dataset.encontrada = "false"; t.rows[i].cells[j].id = "coluna " + j; t.rows[i].cells[j].dataset.index = j; t.rows[i].cells[j].addEventListener("click", clique); } } document.getElementById("iniciar").hidden = true; document.getElementById("parabens").hidden = true; document.getElementById("jogo").hidden = false; document.getElementById("btnVoltar").hidden = true; } var btnPlay = document.getElementById("btnPlay"); btnPlay.onclick = function(){ iniciaJogo(); } var btnVoltar = document.getElementById("btnVoltar"); btnVoltar.onclick = function(){ btnVoltar.hidden = true; document.getElementById("iniciar").hidden = false; document.getElementById("parabens").hidden = true; document.getElementById("jogo").hidden = true; } </script> </body> </html> Olá, boa noite então alterei ai no código a mensagem de parabéns, e quanto a por imagem, eu coloquei no código explicando, mas você pode usar a tag imagem assim <img src="minhaimagem.png ou minhaimagem.jpg a extensão depende do formato da imagem" alt="meu texto para caso a imagem não for exibida" width="largura em pixels tipo 300px ou so põe 300" height="altura em pixels tipo 300px ou so põe 300">, recomendo você fazer um arquivo html e testar essa tag img para entender, aplicar um css nela, treinar bastante, qualquer dúvidas me avise.
  12. <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Caça-palavras</title> <style> h1{ color:blue; font-size:30px; } h2{ color:#757575; font-size:20px; } h1, h2{ text-align:center; } p{ font-size:15px; margin:0; } body{ background-color:yellow; } #dicas{ overflow-y:scroll; height:90%; width:25%; text-align: justify; padding:1% 1% 2% 3%; font-size:.8em; position:fixed; margin:0 0 0 1%; top:.5%; background-color: #F5F5F5; } #dicas li{ margin:.5%; } @media only screen and (max-width:639px){ #dicas{ overflow:unset; height:auto; margin:auto; width:95%; position:relative; } } html, body{ margin:0; padding:0; background-color: #4CAF50; } table{ width:25%; } table, tr, td{ border: 1px solid black; background-color: white; } td{ font-weight: bold; font-family: monospace; font-size: 1.6em; color: black; } td:hover{ background-color: #F9D387; cursor: pointer; } .selecionada, .encontrada, .errado{ transition:.2s linear; } .selecionada{ background-color: lightblue; } .encontrada{ background-color: #009688; } .errado{ color: red; } #iniciar{ padding: 6%; background-color: lightgrey; } #jogo{ text-align: center; } #btnPlay{ margin:auto; display: block; } #parabens{ margin: auto; text-align: center; color: #FF5722; transition: .2s linear 2s; position:absolute; top:50%; left:0; right:0; } #btnVoltar{ margin: auto; } button{ border:1px solid white; outline:none; background-color:lightblue; transition:.2s linear; font-weight:bold; padding:1% 2%; color:white; } button:hover{ border:1px solid lightblue; outline:none; color:lightblue; background-color:white; } </style> </head> <body> <div id="iniciar"> <h1>Caça-palavras</h1> <button id="btnPlay"> <img src="image.png" width="largura aqui" height="altura aqui" alt="Jogar"> </button> </div> <div id="jogo" hidden> <h2 hidden id="parabens">Parabéns!</h2> <button hidden id="btnVoltar">voltar</button> <h2>Meios de transportes</h2> <p id="encontradas"></p> <ol id="dicas"> <h4 style="text-align:center;">Dicas</h4> <li>É um meio de transporte terrestre que, geralmente, cabe cinco pessoas.</li> <li>É um meio de transporte sob duas rodas.</li> <li>É um meio de transporte com vários vagões ligados entre si e pode transportar pessoas ou cargas.</li> <li>É um meio de transporte terrestre que passa por túneis subterrâneos ou por viadutos e realiza a parada em estações designadas. <li>Meio de transporte usado para pedalar em pistas, ciclovias ou parques.</li> <li>É um meio de transporte terrestre grande, com eixos dianteiros e traseiros, geralmente tem entre quatro e dezesseis rodas e, tem uma carreta.</li> <li>Meio de transporte aquático que tem vela, começa com a letra B e tem cinco letras.</li> <li>Meio de transporte aquático que afundou no filme Titanic.</li> <li>Meio de transporte aquático que fica abaixo da água, pode flutuar sob a água e começa com a letra S.</li> <li>Meio de transporte aéreo que tem duas asas, voa e começa com a letra A.</li> <li>Meio de transporte aéreo que tem hélice e começa com a letra H.</li> <li>Meio de transporte aéreo que tem cesto, é movido a ar e começa com a letra B.</li> </ol> <table id="tabuleiro" align="center"> <tr> <td>Ã</td> <td>Ê</td> <td>O</td> <td>O</td> <td>Ã</td> <td>O</td> <td>F</td> <td>C</td> <td>A</td> <td>R</td> <td>R</td> <td>O</td> </tr> <tr> <td>J</td> <td>K</td> <td>S</td> <td>Ã</td> <td>B</td> <td>D</td> <td>L</td> <td>T</td> <td>G</td> <td>W</td> <td>H</td> <td>Ô</td> </tr> <tr> <td>C</td> <td>A</td> <td>M</td> <td>I</td> <td>N</td> <td>H</td> <td>Ã</td> <td>O</td> <td>X</td> <td>Z</td> <td>E</td> <td>B</td> </tr> <tr> <td>H</td> <td>E</td> <td>L</td> <td>V</td> <td>Ç</td> <td>O</td> <td>B</td> <td>Q</td> <td>I</td> <td>M</td> <td>L</td> <td>I</td> </tr> <tr> <td>N</td> <td>A</td> <td>B</td> <td>A</td> <td>L</td> <td>Ã</td> <td>O</td> <td>L</td> <td>H</td> <td>O</td> <td>I</td> <td>C</td> </tr> <tr> <td>T</td> <td>B</td> <td>M</td> <td>E</td> <td>T</td> <td>R</td> <td>Ô</td> <td>T</td> <td>N</td> <td>X</td> <td>C</td> <td>I</td> </tr> <tr> <td>R</td> <td>L</td> <td>Ã</td> <td>O</td> <td>J</td> <td>K</td> <td>Ç</td> <td>Y</td> <td>A</td> <td>R</td> <td>Ó</td> <td>C</td> </tr> <tr> <td>E</td> <td>O</td> <td>B</td> <td>A</td> <td>R</td> <td>C</td> <td>O</td> <td>F</td> <td>V</td> <td>S</td> <td>P</td> <td>L</td> </tr> <tr> <td>M</td> <td>Ã</td> <td>O</td> <td>H</td> <td>E</td> <td>L</td> <td>S</td> <td>U</td> <td>I</td> <td>B</td> <td>T</td> <td>E</td> </tr> <tr> <td>B</td> <td>I</td> <td>M</td> <td>O</td> <td>T</td> <td>O</td> <td>C</td> <td>A</td> <td>O</td> <td>M</td> <td>E</td> <td>T</td> </tr> <tr> <td>F</td> <td>A</td> <td>V</td> <td>I</td> <td>O</td> <td>D</td> <td>H</td> <td>J</td> <td>T</td> <td>O</td> <td>R</td> <td>A</td> </tr> <tr> <td>Q</td> <td>Ã</td> <td>S</td> <td>U</td> <td>B</td> <td>M</td> <td>A</td> <td>R</td> <td>I</td> <td>N</td> <td>O</td> <td>Ô</td> </tr> </div> <script> var t = document.getElementById("tabuleiro"); var transportes, primeiroclique, encontradas, data; function clique(e){ if(transportes.length > 0){ if(primeiroclique == false){ data.colunainicial = parseInt(e.target.dataset.index); data.linhainicial = parseInt(e.target.parentElement.dataset.index); data.letrainicial = e.target.innerText; if(e.target.dataset.encontrada == "true"){ e.target.classList.replace("encontrada", "selecionada"); }else{ e.target.classList.add("selecionada"); } primeiroclique = true; }else{ if(data.colunainicial != parseInt(e.target.dataset.index) && data.linhainicial != parseInt(e.target.parentElement.dataset.index)){ return; } data.colunafinal = parseInt(e.target.dataset.index); data.linhafinal = parseInt(e.target.parentElement.dataset.index); data.letrafinal = e.target.innerText; if(data.colunainicial > data.colunafinal){ var novacolunainicial = data.colunafinal; var novacolunafinal = data.colunainicial; data.colunainicial = novacolunainicial; data.colunafinal = novacolunafinal; } if(data.linhainicial > data.linhafinal){ var novalinhainicial = data.linhafinal; var novalinhafinal = data.linhainicial; data.linhainicial = novalinhainicial; data.linhafinal = novalinhafinal; } primeiroclique = false; if(e.target.dataset.encontrada == "true"){ e.target.classList.replace("encontrada", "selecionada"); }else{ e.target.classList.add("selecionada"); } comparar(data); } } } function horizontal(fn){ console.log("seleção horizontal"); for(var i = data.colunainicial; i < data.colunafinal + 1; i++){ var td = t.rows[data.linhainicial].cells[i]; if(td.dataset.encontrada == "true"){ td.classList.replace("encontrada", "selecionada"); }else{ td.classList.add("selecionada"); } fn(td); } } function vertical(fn){ console.log("seleção vertical"); for(var i = data.linhainicial; i < data.linhafinal + 1; i++){ var td = t.rows[i].cells[data.colunainicial]; if(td.dataset.encontrada == "true"){ td.classList.replace("encontrada", "selecionada"); }else{ td.classList.add("selecionada"); } fn(td); } } function comparar(data){ var selecionados = { palavra:"", elementos:[] }; if(data.colunainicial != data.colunafinal && data.linhainicial == data.linhafinal){ horizontal(function(td){ selecionados.palavra += td.innerText; selecionados.elementos.push(td); }); }else if(data.colunainicial == data.colunafinal && data.linhainicial != data.linhafinal){ vertical(function(td){ selecionados.palavra += td.innerText; selecionados.elementos.push(td); }); } //essa linha aqui usei um operador condicional ternário que vai retorna a palavra selecionada, se ela estiver na lista, //caso a palavra esteja invertida, a primeira condição vai dar falso e vai cair na segunda condicional //que vai inverte a palavra e verificar de novo se tem na lista, caso sim vai retorna ela, caso, não achar mesmo invertendo, vai retorna falso //isso é importante para palavras de cabeça para baixo no quebra cabeça var palavraselecionada = transportes.includes(selecionados.palavra) ? selecionados.palavra : transportes.includes(selecionados.palavra.split("").reverse().join("")) ? selecionados.palavra.split("").reverse().join('') : false; if(palavraselecionada){ transportes = transportes.filter(function(p){ if(palavraselecionada != p){ return p; } }); setTimeout(function(){ for(var i = 0; i < selecionados.elementos.length; i++){ var elemento = selecionados.elementos[i]; elemento.classList.replace("selecionada", "encontrada"); elemento.dataset.encontrada = "true"; } }, 1000); encontradas += 1; document.getElementById("encontradas").innerText = "Encontradas: "+encontradas+"\n Restantes: "+ transportes.length; if(transportes.length == 0){ setTimeout(function(){ document.getElementById("parabens").hidden = false; document.getElementById("btnVoltar").hidden = false; }, 2000); } data = {}; }else{ data = {}; setTimeout(function(){ for(var i = 0; i < selecionados.elementos.length; i++){ var elemento = selecionados.elementos[i]; elemento.classList.replace("selecionada", "errado"); } setTimeout(function(){ for(var i = 0; i < selecionados.elementos.length; i++){ var elemento = selecionados.elementos[i]; if(elemento.dataset.encontrada == "true"){ elemento.classList.replace("errado", "encontrada"); }else{ elemento.classList.remove("errado"); } } }, 1000); }, 1000); } } function iniciaJogo(){ transportes=["CARRO", "MOTO","TREM", "METRÔ","BICICLETA", "CAMINHÃO", "BARCO", "NAVIO", "SUBMARINO", "AVIÃO","HELICÓPTERO", "BALÃO"]; primeiroclique = false; encontradas = 0; data = {}; document.getElementById("encontradas").innerText = "Encontradas: "+encontradas+"\n Restantes: "+ transportes.length; for(var i = 0; i < t.rows.length; i++){ t.rows[i].id = "linha " + i; t.rows[i].dataset.index = i; for(var j = 0; j < t.rows[i].cells.length; j++){ t.rows[i].cells[j].classList = []; t.rows[i].cells[j].dataset.encontrada = "false"; t.rows[i].cells[j].id = "coluna " + j; t.rows[i].cells[j].dataset.index = j; t.rows[i].cells[j].addEventListener("click", clique); } } document.getElementById("iniciar").hidden = true; document.getElementById("parabens").hidden = true; document.getElementById("jogo").hidden = false; document.getElementById("btnVoltar").hidden = true; } var btnPlay = document.getElementById("btnPlay"); btnPlay.onclick = function(){ iniciaJogo(); } var btnVoltar = document.getElementById("btnVoltar"); btnVoltar.onclick = function(){ btnVoltar.hidden = true; document.getElementById("iniciar").hidden = false; document.getElementById("parabens").hidden = true; document.getElementById("jogo").hidden = true; } </script> </body> </html> Olá, ficou muito legal o caça palavras e as dicas, então para posiciona algo ao lado da tabela usei position fixed no #dicas, ajustei as margens usando margin, e coloquei uma largura para ele ocupar pouco espaço na tela, e usei o overflow-y para colocar uma barra de rolagem nas dicas e uma altura para ele não ultrapassar a altura da tela, e quanto a imagem você pode usar a tag img do html5, no atributo src você coloca o caminho da imagem, e os atributos width e height você configura a largura e altura da imagem, isso pode ser configurado via css também você põe um id na tag imagem e usa no css, espero que isso a ajude.
  13. A meta tag com nome viewport é utilizada em dispositivos móveis, para a ajustar a viewport, o valor width=device-width, faz com que a largura da página siga a largura do dispositivo o valor initial-scale=1.0, controla o nível de zoom inicial, você pode alterar esses valores e adicionar outras propriedades no content da meta tag viewport position:absolute; diz como um elemento pode ser posicionado, exemplo absolute, o elemento flutua no documento, e com o marign ele pode posicionar ele na tela, existem muitas outras propriedades, para entender bem você precisa testa las font-size:1em; tamanho da fonte desse elemento, seus valores podem ser px, em, cm padding-left:.7em; adiciona espaçamento interno na esquerda do elemento, tipo faz ele inchar e empurrar os elementos que estão dentro dele, seus valores podem ser px, em, %, cm display:inline; o tipo de caixa de renderização usada por um elemento, ele tem vários valores,cada um tem um comportamento diferente margin:0 17% 0 0; espaçamento em volta do elemento, ele criar um borda invisível ao redor do elemento, que pode ser usado para posicionar o elemento ou empurrar um que esteja próximo tem várias maneiras de usar margin exemplos: margin:10px; todas as margens do elemento terão 10px margin:0px 10px; as margens do topo(top) e de baixo(bottom) do elemento terão 0px e a da esquerda(left) e direita(right) terão 10px margin:0px 1px 2px 3px; top 0px, right 1px, bottom 2px left 3px; @media only screen and (max-width:640px) essa parte do código é chamado de media query ele serve para fazer com que o conteúdo de um site se adapte a resolução de tela no caso o código detro dele é ativado em telas com largura menor que 640px, existem muitos tipos desse, @media only screen and (max-width:640px){ e dentro dele você adiciona os ids e classes aqui e quais valores as propriedades dos elementos vão ter, de acordo com a regra que tem no media query #exemplo{ background-color:red; } } seleção por id é feita usando # e a seleção por classe é feita usando o .(ponto) no site w3schools, e no developer mozila você encontra muito sobre isso, e com muitos exemplos, basta praticar e ver o que fica melhor com que esteja criando, espero que isso a ajude.
  14. <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Caça-palavras</title> <!--aqui usei a tag style para adicionar estilos aos elementos do html--> <style> h1{ color:blue; font-size:30px; } h2{ color:red; font-szie:20px; } table, td{ border:2px solid black; } td{ font-size:1.5em; font-family:Tahoma; font-weight:bold; text-align:center; } #dicas{ position:absolute; font-size:1em; padding-left:.7em; display:inline; margin:0 17% 0 0; } h1, h2{ text-align:center; } body{ background-color:yellow; } @media only screen and (max-width:640px){ #dicas{ position:relative; font-size:2em; margin:auto; left:0; right:0; display:inline-block; } } </style> <!-- o css pode ser adicionado em um documento html de três formas diferentes, css interno, usando a tag style você adiciona css para um documento .html, já o css externo, você usa um arquivo .css separado do html, que lhe permite usar esse mesmo css em várias páginas diferentes, chamando ele em cada página usando a tag link, e tem o css inline que é pouco usado, que é aquele que colocamos diretamente dentro das tags dos elementos do html dessa forma <div style="border:1px solid black"></div> ele só causa efeito no elemento que é inserido e pode afetar os elementos filho desse elemento--> </head> <body> <h1>Caça-palavras</h1> <h2>Objetos de casa</h2> <ol id="dicas"> <li>Objeto que ilumina o quarto.</li> <li>Objeto usado para dormir.</li> <li>Objeto usado para colocar flores.</li> </ol> <table align="center"> <tr> <td>C</td> <td>D</td> <td>V</td> <td>C</td> <td>L</td> <td>A</td> </tr> <tr> <td>A</td> <td>B</td> <td>A</td> <td>J</td> <td>U</td> <td>R</td> </tr> <tr> <td>M</td> <td>B</td> <td>S</td> <td>H</td> <td>J</td> <td>L</td> </tr> <tr> <td>A</td> <td>K</td> <td>O</td> <td>F</td> <td>X</td> <td>W</td> </tr> </table> </body> Olá, fiz uma alteração em seu código, para você posicionar elementos no html, você precisa usar as propriedades margin, padding, position, display, as unidades de medida do css que são o px, em, cm, mm, % e outras, e também precisa entender como funciona a hierarquia dos elementos HTML, pois isso precisa estar correto para um bom css agir sobre ele, existem várias maneiras diferentes de posicionar elementos usando css, no código usei o float:left; do css no elemento ul que tem as dicas dentro, isso faz com que ele permita que um elemento html que vem depois dele, flutue na esquerda, ai com um pouco de margin você vai ajustando a posição dele como desejar, espero que isso ajude, qualquer dúvidas estou a disposição.
  15. <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8" > <meta name="viewport" content="width=device-width, initial-scale=1.0" > <title>Caça-Palavras</title> <style> html, body{ margin:0; padding:0; background-color:lightblue; } table, tr, td{ border:1px solid black; background-color:white; } td{ font-weight:bold; font-family:monospace; font-size:2em; color:black; } td:hover{ background-color:#f9d387; cursor:pointer; } .selecionada, .encontrada, .errado{ transition:.2s linear; } .selecionada{ background-color:lightblue; } .encontrada{ background-color:lightgreen; } .errado{ background-color:red; } #iniciar{ padding:5%; background-color:lightgray; } #jogo{ text-align:center; } #btnPlay{ margin:auto; display:block; } #parabens{ margin:auto; text-align:center; color:yellow; transition:.2s linear 2s; } #btnVoltar{ margin:auto; } button{ border:1px solid white; outline:none; background-color:lightblue; transition:.2s linear; font-weight:bold; padding:1% 2%; color:white; } button:hover{ border:1px solid lightblue; outline:none; color:lightblue; background-color:white; } p{ font-size:1.5em; margin:0; } </style> </head> <body> <div id="iniciar"> <button id="btnPlay">Jogar</button> </div> <div id="jogo" hidden> <h2 hidden id="parabens">Parabéns!</h2> <button hidden id="btnVoltar">voltar</button> <p id="encontradas"></p> <table id="tabuleiro" align="center"> <tr> <td>R</td> <td>O</td> <td>A</td> <td>M</td> <td>A</td> <td>R</td> <td>E</td> <td>L</td> <td>O</td> <td>G</td> <td>P</td> </tr> <tr> <td>S</td> <td>C</td> <td>V</td> <td>E</td> <td>D</td> <td>O</td> <td>M</td> <td>A</td> <td>H</td> <td>Y</td> <td>R</td> </tr> <tr> <td>A</td> <td>R</td> <td>I</td> <td>J</td> <td>I</td> <td>V</td> <td>E</td> <td>R</td> <td>D</td> <td>E</td> <td>F</td> </tr> <tr> <td>Z</td> <td>B</td> <td>O</td> <td>L</td> <td>Y</td> <td>H</td> <td>N</td> <td>A</td> <td>I</td> <td>U</td> <td>E</td> </tr> <tr> <td>U</td> <td>N</td> <td>L</td> <td>R</td> <td>A</td> <td>H</td> <td>F</td> <td>N</td> <td>E</td> <td>O</td> <td>R</td> </tr> <tr> <td>L</td> <td>M</td> <td>E</td> <td>K</td> <td>C</td> <td>F</td> <td>N</td> <td>J</td> <td>A</td> <td>N</td> <td>Q</td> </tr> <tr> <td>H</td> <td>S</td> <td>T</td> <td>I</td> <td>R</td> <td>E</td> <td>B</td> <td>A</td> <td>U</td> <td>S</td> <td>F</td> </tr> <tr> <td>O</td> <td>D</td> <td>A</td> <td>V</td> <td>E</td> <td>R</td> <td>M</td> <td>E</td> <td>L</td> <td>H</td> <td>O</td> </tr> </table> </div> <script> var t = document.getElementById("tabuleiro"); var cores, primeiroclique, encontradas, data; function clique(e){ if(cores.length > 0){ if(primeiroclique == false){ data.colunainicial = parseInt(e.target.dataset.index); data.linhainicial = parseInt(e.target.parentElement.dataset.index); data.letrainicial = e.target.innerText; if(e.target.dataset.encontrada == "true"){ e.target.classList.replace("encontrada", "selecionada"); }else{ e.target.classList.add("selecionada"); } primeiroclique = true; }else{ if(data.colunainicial != parseInt(e.target.dataset.index) && data.linhainicial != parseInt(e.target.parentElement.dataset.index)){ return; } data.colunafinal = parseInt(e.target.dataset.index); data.linhafinal = parseInt(e.target.parentElement.dataset.index); data.letrafinal = e.target.innerText; if(data.colunainicial > data.colunafinal){ var novacolunainicial = data.colunafinal; var novacolunafinal = data.colunainicial; data.colunainicial = novacolunainicial; data.colunafinal = novacolunafinal; } if(data.linhainicial > data.linhafinal){ var novalinhainicial = data.linhafinal; var novalinhafinal = data.linhainicial; data.linhainicial = novalinhainicial; data.linhafinal = novalinhafinal; } primeiroclique = false; if(e.target.dataset.encontrada == "true"){ e.target.classList.replace("encontrada", "selecionada"); }else{ e.target.classList.add("selecionada"); } comparar(data); } } } function horizontal(fn){ console.log("seleção horizontal"); for(var i = data.colunainicial; i < data.colunafinal + 1; i++){ var td = t.rows[data.linhainicial].cells[i]; if(td.dataset.encontrada == "true"){ td.classList.replace("encontrada", "selecionada"); }else{ td.classList.add("selecionada"); } fn(td); } } function vertical(fn){ console.log("seleção vertical"); for(var i = data.linhainicial; i < data.linhafinal + 1; i++){ var td = t.rows[i].cells[data.colunainicial]; if(td.dataset.encontrada == "true"){ td.classList.replace("encontrada", "selecionada"); }else{ td.classList.add("selecionada"); } fn(td); } } function comparar(data){ var selecionados = { palavra:"", elementos:[] }; if(data.colunainicial != data.colunafinal && data.linhainicial == data.linhafinal){ horizontal(function(td){ selecionados.palavra += td.innerText; selecionados.elementos.push(td); }); }else if(data.colunainicial == data.colunafinal && data.linhainicial != data.linhafinal){ vertical(function(td){ selecionados.palavra += td.innerText; selecionados.elementos.push(td); }); } if(cores.includes(selecionados.palavra)){ cores = cores.filter(function(p){ if(selecionados.palavra != p){ return p; } }); setTimeout(function(){ for(var i = 0; i < selecionados.elementos.length; i++){ var elemento = selecionados.elementos[i]; elemento.classList.replace("selecionada", "encontrada"); elemento.dataset.encontrada = "true"; } }, 1000); encontradas += 1; document.getElementById("encontradas").innerText = "Encontradas: "+encontradas+"\n Restantes: "+ cores.length; if(cores.length == 0){ setTimeout(function(){ document.getElementById("parabens").hidden = false; document.getElementById("btnVoltar").hidden = false; }, 2000); } data = {}; }else{ data = {}; setTimeout(function(){ for(var i = 0; i < selecionados.elementos.length; i++){ var elemento = selecionados.elementos[i]; elemento.classList.replace("selecionada", "errado"); } setTimeout(function(){ for(var i = 0; i < selecionados.elementos.length; i++){ var elemento = selecionados.elementos[i]; if(elemento.dataset.encontrada == "true"){ elemento.classList.replace("errado", "encontrada"); }else{ elemento.classList.remove("errado"); } } }, 1000); }, 1000); } } function iniciaJogo(){ cores = ["AZUL", "AMARELO", "VERMELHO", "VERDE", "VIOLETA", "LARANJA"]; primeiroclique = false; encontradas = 0; data = {}; document.getElementById("encontradas").innerText = "Encontradas: "+encontradas+"\n Restantes: "+ cores.length; for(var i = 0; i < t.rows.length; i++){ t.rows[i].id = "linha " + i; t.rows[i].dataset.index = i; for(var j = 0; j < t.rows[i].cells.length; j++){ t.rows[i].cells[j].classList = []; t.rows[i].cells[j].dataset.encontrada = "false"; t.rows[i].cells[j].id = "coluna " + j; t.rows[i].cells[j].dataset.index = j; t.rows[i].cells[j].addEventListener("click", clique); } } document.getElementById("iniciar").hidden = true; document.getElementById("parabens").hidden = true; document.getElementById("jogo").hidden = false; document.getElementById("btnVoltar").hidden = true; } var btnPlay = document.getElementById("btnPlay"); btnPlay.onclick = function(){ iniciaJogo(); } var btnVoltar = document.getElementById("btnVoltar"); btnVoltar.onclick = function(){ btnVoltar.hidden = true; document.getElementById("iniciar").hidden = false; document.getElementById("parabens").hidden = true; document.getElementById("jogo").hidden = true; } </script> </body> </html>

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...