×
Ir ao conteúdo
  • Cadastre-se

Alexsander Gutierrez

Membro Júnior
  • Posts

    13
  • Cadastrado em

  • Última visita

Reputação

13

Informações gerais

  • Cidade e Estado
    São Paulo
  • Sexo
    Masculino
  1. 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.
  2. 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.
  3. 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.
  4. <!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.
  5. 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; } }
  6. <!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.
  7. <!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.
  8. 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.
  9. <!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.
  10. <!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>
  11. Olá, então fiz várias alterações no código, e removi essa linha e.target.style.backgroundColor = "lightblue"; pois esqueci ela, e com ela lá, o elemento td não vai usar a cor que esta na class css, pois já estava sendo atribuído uma cor diretamente(CSS inline),o código esta no anexo caso queira ver, acredito que esta bem interessante, o que falta nele que não tive tempo de colocar é um algoritmo gerador de caça palavras, acredito que seja interessante pesquisar sobre isso, para adicionar caça palavra diferente deixando o jogo dinâmicos, e deixar o jogo mais robusto, espero que isso lhe ajude, qualquer dúvidas estou a disposição. index.zip
  12. Sim com esse conhecimento é possível, acrescente ids em cada td que possui uma letra que pertence uma palavra, e colocar id em cada linha dessa tabela para identifica las tipo linha 1 linha 2 , após isso precisa criar uma mecânica de como o usuário pode selecionar essas palavras, para o algoritmo verificar, você pode adicionar eventos do mouse nos td com elemento.addEventListener("mousedown", function(e){seu código...}), ou elemento.addEventListener("click", function(e){seu código...}), esse parâmetro "e" é o evento ele guarda informações com coordenas do clique, qual o elemento que clicou, você pode dar console dele e ver essas informações que ele trás ao clicar no td, com isso você precisa criar uma maneira de validar se ouve seleção, e se a seleção forma uma palavra que você tem guardado em um array, existem muitas maneiras de fazer isso, fiz um código de exemplo bem simples para você estudar ler adaptar e melhorar ele, espero que isso ajude. index.zip
  13. Boa noite, existem muitas formas diferentes de desenvolver esse jogo usando javascript, em primeiro lugar no seu código você precisa adicionar a tag meta antes da tag title, segundo para programar em javascript você precisa adiciona uma tag script dentro da tag body, para escrever seu código javascript dentro, eu recomendo fortemente que antes de você programar um jogo, aprenda os conceitos básicos da linguagem, exemplos com usar if, for, while, do while, declarar variáveis, iterar um array, manipular o DOM, porque o algoritmo de um jogo é um pouco complicado de fazer quando se é iniciante e pode te frustar, você pode começar estudando focado em construir esse jogo, exemplo estude como você guardaria essas palavras para serem exibidas pelo jogo, pode usar um array: exemplo var palavras = ["palavra1", "palvaras2"]; depois estude como exibir esses dados na página, você pode criar os elementos usando javascript, com o método document.createElement("nomedoelemento"); exemplo: //isso cria uma tabela vázia var table = document.createElement("table"); e adicionar essa tabela na página usando document.body.appendChild(table); ou você pode ja ter uma tabela no corpo do html com as palavras já montadas, e para acessar um elemento você precisa por um id dentro dele exemplo <td id="letraA">A</td> var letraA = document.getElementById("letraA"); isso vai guardar uma referencia da tag td que tem esse id; e para acessar o texto dele use o comando: letraA.innerText; ou letraA.textContent; vai retornar o texto dentro da tag isso são coisas básicas que precisam estar fixas antes de fazer um jogo, pode parecer bastante coisa mas quanto mais você praticar mais ficara melhor. espero ter te ajudado.

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

GRÁTIS: ebook Redes Wi-Fi

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!