Ir ao conteúdo
  • Cadastre-se

Javascript Jogo de caça-palavras usando Visual G e Javascript


Posts recomendados

@Programadora Iniciante     no visualG será uma tarefa difícil , pois ele tem poucos recursos , e assim não terá jeito de marcar as palavras encontradas , que geralmente se circula com um traçado para que fique em destaque , ele não tem nada de gráficos e não tem jeito de colorir apenas algumas palavras e outras não , pois mudando a cor muda todas as letras que estiverem na tela , ele é para usar com textos ,   e no javascript pode se colorir as letras para destaca-las , e no sublime também ,  mas creio que poderia usar a linguagem c / c++  .   mas a melhor para criação de jogos é o blitz 3D , linguagem basic fácil  e muitos recursos para construção de gráficos .

   se você já tiver feito algum código para esse exercício , poste aqui para vermos como está e em que podemos ajudar   .

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

  • 2 semanas depois...

@devair1010 ,
Muito obrigada pelas dicas!Terei que fazer o código usando o Sublime e o JavaScript, pois não sei usar o Blitz 3D.Por favor, você sabe onde posso encontrar algum framework de caça-palavras?Você conhece algum tutorial para fazer caça-palavras no Blitz 3D?Quando eu começar o código, pretendo postar aqui.
Muito obrigada,
Programadora Iniciante

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

Olá, @devair1010!
   Desenvolvi o código do caça-palavras, por favor, poderiam ajudar-me a implementá-lo, usando o JavaScript?Segue abaixo o código que desenvolvi:

<!DOCTYPE html>
<head>
    <title>Caça-palavras
    <meta charset="utf-8">    
    </title>
</head>
<body bgcolor="yellow">
    <font>
    <center>
    <font color="red">    Caça-palavras
    </font>
    <br/>
    <font color="blue">
    Objetos de casa
    </center>
    <br/>
   </font>
   <table border="4" align="center">
       <tr align="center">
           <td><font color="black" size="4" face="Tahoma">C</font></td>
           <td><font color="black" size="4" face="Tahoma">D</font></td>
           <td><font color="black" size="4" face="Tahoma">V</font></td>
           <td><font color="black" size="4" face="Tahoma">C</font></td>
           <td><font color="black" size="4" face="Tahoma">L</font></td>
           <td><font color="black" size="4" face="Tahoma">A</font></td>
       </tr>
    <tr align="center">
           <td><font color="black" size="4" face="Tahoma">A</font></td>
           <td><font color="black" size="4" face="Tahoma">B</font></td>
           <td><font color="black" size="4" face="Tahoma">A</font></td>
           <td><font color="black" size="4" face="Tahoma">J</font></td>
           <td><font color="black" size="4" face="Tahoma">U</font></td>
           <td><font color="black" size="4" face="Tahoma">R</font></td>
       </tr>
       <tr align="center">
           <td><font color="black" size="4" face="Tahoma">M</font></td>
           <td><font color="black" size="4" face="Tahoma">B</font></td>
           <td><font color="black" size="4" face="Tahoma">S</font></td>
           <td><font color="black" size="4" face="Tahoma">H</font></td>
           <td><font color="black" size="4" face="Tahoma">J</font></td>
           <td><font color="black" size="4" face="Tahoma">L</font></td>
       </tr>
       <tr align="center">
           <td><font color="black" size="4" face="Tahoma">A</font></td>
           <td><font color="black" size="4" face="Tahoma">K</font></td>
           <td><font color="black" size="4" face="Tahoma">O</font></td>
           <td><font color="black" size="4" face="Tahoma">F</font></td>
           <td><font color="black" size="4" face="Tahoma">X</font></td>
           <td><font color="black" size="4" face="Tahoma">W</font></td>
       </tr>
       
   </table>
</body>


Grata,
Programadora Iniciante

caca-palavras-teste.rar

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

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.

  • Curtir 1
  • Obrigado 1
Link para o comentário
Compartilhar em outros sites

@Alexsander Gutierrez ,
     Boa noite!Muito obrigada pelas dicas!Eu já estudei a declaração de variáveis e as estruturas "if, for, while e do while.É possível desenvolver o jogo apenas com isso ou eu preciso aprender algo mais, por favor?
Cordialmente,
Programadora Iniciante

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

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

  • Curtir 1
  • Obrigado 1
Link para o comentário
Compartilhar em outros sites

  • 2 semanas depois...
Em 12/06/2020 às 12:24, Alexsander Gutierrez disse:

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 1 kB · 1 download

Olá, @Alexsander Gutierrez !
       Você me ajudou muito, eu já estava queimando meus neurônios, pensando em formas de desenvolver o caça-palavras com as estruturas de decisão e de repetição.Eu nunca fiz um jogo eletrônico antes e gosto muito de aprender assuntos novos.Vale mencionar que o caça-palavras está incluso em um projeto de vida meu, voltado para surdos. Como não trabalho ainda, este site(Clube do Hadware) é a ferramenta que uso para desenvolver meus conhecimentos. Além disso, desculpe-me, mas encontrei um erro em seu código:não há diferenciação entre as palavras encontradas e as demais letras do caça-palavras (tudo fica marcado de azul e a marcação verde não é ativada), mas trabalharei muito para tentar reparar esse erro.Sou grata por tudo.Tenha um ótimo dia!
Cordialmente,
Programadora Iniciante

  • Curtir 2
Link para o comentário
Compartilhar em outros sites

  • 2 semanas depois...
<!DOCTYPE html>

<head>

    <title>Caça-palavras
        <meta charset="utf-8">
    </title>
</head>

<body bgcolor="yellow">

    <font>
        <center>
            <font color="red"> Caça-palavras
            </font>
            <br />
            <font color="blue">
                Objetos de casa
        </center>
        <br />
    </font>

    <div id="jogo">
        <table border="4" align="center">
            <tr align="center" onclick="errado()">
                <td>
                    <font color="black" size="4" face="Tahoma">C</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">D</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">V</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">C</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">L</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">A</font>
                </td>
            </tr>
            <tr align="center" id="correto" onclick="correto()">
                <td>
                    <font color="black" size="4" face="Tahoma">A</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">B</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">A</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">J</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">U</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">R</font>
                </td>
            </tr>
            <tr align="center" onclick="errado()">
                <td>
                    <font color="black" size="4" face="Tahoma">M</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">B</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">S</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">H</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">J</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">L</font>
                </td>
            </tr>
            <tr align="center" onclick="errado()">
                <td>
                    <font color="black" size="4" face="Tahoma">A</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">K</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">O</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">F</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">X</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">W</font>
                </td>
            </tr>

        </table>
    </div>

    <script>
        //Quando clicar na palavra correta o backgroud da ficará vermelha
        function correto() {
            document.getElementById('correto').style.backgroundColor = 'red'
        }

        //Número de tentativas clicando no errado
        var tentativas = 5
        
		//Função caso clique no errado para as tentativas diminuirem
        function errado() {
            tentativas = tentativas - 1
            alert('Ops, essa não é uma palavra! Agora você tem: ' + tentativas + ' chances')

            if (tentativas == 0) {
                alert('Suas chances acabaram')
                document.getElementById('jogo').innerHTML = '<center><h1>FIM DE JOGO </h1></center>'
            }
        }
    </script>
</body>

Tenta esse código que implementei o seu e diz se é algo do tipo! ^^ se for, posso ajudar a prosseguir.

  • Curtir 1
  • Obrigado 1
Link para o comentário
Compartilhar em outros sites

@Gustavo Augusto Lopes

Em 05/07/2020 às 11:43, Gustavo Augusto Lopes disse:

<!DOCTYPE html>

<head>

    <title>Caça-palavras
        <meta charset="utf-8">
    </title>
</head>

<body bgcolor="yellow">

    <font>
        <center>
            <font color="red"> Caça-palavras
            </font>
            <br />
            <font color="blue">
                Objetos de casa
        </center>
        <br />
    </font>

    <div id="jogo">
        <table border="4" align="center">
            <tr align="center" onclick="errado()">
                <td>
                    <font color="black" size="4" face="Tahoma">C</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">D</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">V</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">C</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">L</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">A</font>
                </td>
            </tr>
            <tr align="center" id="correto" onclick="correto()">
                <td>
                    <font color="black" size="4" face="Tahoma">A</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">B</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">A</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">J</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">U</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">R</font>
                </td>
            </tr>
            <tr align="center" onclick="errado()">
                <td>
                    <font color="black" size="4" face="Tahoma">M</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">B</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">S</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">H</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">J</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">L</font>
                </td>
            </tr>
            <tr align="center" onclick="errado()">
                <td>
                    <font color="black" size="4" face="Tahoma">A</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">K</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">O</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">F</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">X</font>
                </td>
                <td>
                    <font color="black" size="4" face="Tahoma">W</font>
                </td>
            </tr>

        </table>
    </div>

    <script>
        //Quando clicar na palavra correta o backgroud da ficará vermelha
        function correto() {
            document.getElementById('correto').style.backgroundColor = 'red'
        }

        //Número de tentativas clicando no errado
        var tentativas = 5
        
		//Função caso clique no errado para as tentativas diminuirem
        function errado() {
            tentativas = tentativas - 1
            alert('Ops, essa não é uma palavra! Agora você tem: ' + tentativas + ' chances')

            if (tentativas == 0) {
                alert('Suas chances acabaram')
                document.getElementById('jogo').innerHTML = '<center><h1>FIM DE JOGO </h1></center>'
            }
        }
    </script>
</body>

Tenta esse código que implementei o seu e diz se é algo do tipo! ^^ se for, posso ajudar a prosseguir.

@Gustavo Augusto Lopes ,
     Muito obrigada!Gostei da sua implementação do caça-palavras e do caça-palavras do Alesxander. No que você fez, ficou legal, mas não é possível clicar nas palavras verticais, pois ao tentar clicar, aparece a mensagem de que o número de chances esgotou após encerrar as tentativas (sem ao menos permitir que se clique em palavras nas verticais, só há a possibilidade de cliques horizontais ).Além disso, se não for pedir muito, seria possível incluir a mensagem "Parabéns!" quando a pessoa acertar todas as palavras, por favor? O caça-palavras que postei é só um exemplo, então, eu usaria sua implementação para fazer um novo caça-palavras com outro tema.Além disso, estou pensando em abrir umas td's e umas tr's entre o caça-palavras e entre as dicas que quero escrever no caça-palavras.Exemplo: De um lado da tabela ficaria a dica (1. Objeto usado para iluminar o quarto)e do outro lado da tabela ficaria o caça-palavras.Você acha que ficaria muito bagunçado e com muitas td's e tr's?Obrigada por sua ajuda!Tenha um ótimo dia!Grata.
Cordialmente,
Programadora Iniciante

adicionado 9 minutos depois
Em 21/06/2020 às 01:50, Programadora Iniciante disse:

Olá, @Alexsander Gutierrez !
       Você me ajudou muito, eu já estava queimando meus neurônios, pensando em formas de desenvolver o caça-palavras com as estruturas de decisão e de repetição.Eu nunca fiz um jogo eletrônico antes e gosto muito de aprender assuntos novos.Vale mencionar que o caça-palavras está incluso em um projeto de vida meu, voltado para surdos. Como não trabalho ainda, este site(Clube do Hadware) é a ferramenta que uso para desenvolver meus conhecimentos. Além disso, desculpe-me, mas encontrei um erro em seu código:não há diferenciação entre as palavras encontradas e as demais letras do caça-palavras (tudo fica marcado de azul e a marcação verde não é ativada), mas trabalharei muito para tentar reparar esse erro.Sou grata por tudo.Tenha um ótimo dia!
Cordialmente,
Programadora Iniciante

Olá, @Alexsander Gutierrez!
     Tentei modificar a cor do clique verdadeiro, na estrutura else, mas não obtive êxito, pois ainda, sim, não é desenvolvido a distinção entre as palavras encontradas e as demais letras contidas no caça-palavras. Por favor, poderia ajudar-me com isso?Segue abaixo parte do seu código:
    

    primeiroclique = true;
            }else{
                console.log("coluna "+e.target.id);
                console.log("linha "+e.target.parentElement.id);
                console.log("letra "+e.target.innerText);
            
                data.colunafinal = parseInt(e.target.id);
                data.linhafinal = parseInt(e.target.parentElement.id);
                data.letrafinal = e.target.innerText;
                
                e.target.style.backgroundColor = "lightblue";
                
                comparar(data);
                primeiroclique = false;
            }
        }


Grata e cordialmente,
Programadora Iniciante

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

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

  • Curtir 1
  • Obrigado 1
Link para o comentário
Compartilhar em outros sites

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

 

  • Curtir 1
  • Obrigado 1
Link para o comentário
Compartilhar em outros sites

@DiF ,
     Desculpe-me!O @Alexsander Gutierrez só está tentando ajudar-me.Muito obrigada pela dica!
Cordialmente,
Programadora Iniciante

adicionado 3 minutos depois

Pessoal,
     Estou tentando inserir dicas no caça palavras, mas as dicas estão empurrando o caça-palavras para baixo.Por favor, vocês sabem o que devo fazer para que as dicas do caça-palavras fiquem ao lado do caça-palavras?Já abri tr e td, mas não funcionou, pois elas ficam dentro do caça-palavras; retirei tr e td, mas as dicas empurraram o caça-palavras para baixo.Não sei o que fazer  para que as dicas e o caça-palavras fiquem lado a lado.Por favor, poderiam ajudar-me?Grata.Segue abaixo o código sem implementação:

<!DOCTYPE html>
<head>
    <title>Caça-palavras
    <meta charset="utf-8">    
    </title>
</head>
<body bgcolor="yellow">
    <font>
    <center>
    <font color="red">    Caça-palavras
    </font>
    <br/>
    <font color="blue">
    Objetos de casa
    </center>
    <br/>
   </font>

   
   <table border="4" align="center">
      1.Objeto que ilumina o quarto.<br/>
            2.Objeto usado para dormir.<br/>
            3.Objeto usado para colocar flores.<br/>
         <br/>
       <tr align="center">
           <td><font color="black" size="4" face="Tahoma">C</font></td>
           <td><font color="black" size="4" face="Tahoma">D</font></td>
           <td><font color="black" size="4" face="Tahoma">V</font></td>
           <td><font color="black" size="4" face="Tahoma">C</font></td>
           <td><font color="black" size="4" face="Tahoma">L</font></td>
           <td><font color="black" size="4" face="Tahoma">A</font></td>
       </tr>
    <tr align="center">
           <td><font color="black" size="4" face="Tahoma">A</font></td>
           <td><font color="black" size="4" face="Tahoma">B</font></td>
           <td><font color="black" size="4" face="Tahoma">A</font></td>
           <td><font color="black" size="4" face="Tahoma">J</font></td>
           <td><font color="black" size="4" face="Tahoma">U</font></td>
           <td><font color="black" size="4" face="Tahoma">R</font></td>
       </tr>
       <tr align="center">
           <td><font color="black" size="4" face="Tahoma">M</font></td>
           <td><font color="black" size="4" face="Tahoma">B</font></td>
           <td><font color="black" size="4" face="Tahoma">S</font></td>
           <td><font color="black" size="4" face="Tahoma">H</font></td>
           <td><font color="black" size="4" face="Tahoma">J</font></td>
           <td><font color="black" size="4" face="Tahoma">L</font></td>
       </tr>
       <tr align="center">
           <td><font color="black" size="4" face="Tahoma">A</font></td>
           <td><font color="black" size="4" face="Tahoma">K</font></td>
           <td><font color="black" size="4" face="Tahoma">O</font></td>
           <td><font color="black" size="4" face="Tahoma">F</font></td>
           <td><font color="black" size="4" face="Tahoma">X</font></td>
           <td><font color="black" size="4" face="Tahoma">W</font></td>
       </tr>
   </table>
</body>


Cordialmente,
Programadora Iniciante

  • Curtir 2
Link para o comentário
Compartilhar em outros sites

  • Moderador
19 minutos atrás, Programadora Iniciante disse:

  Desculpe-me!O @Alexsander Gutierrez só está tentando ajudar-me.Muito obrigada pela dica!

Eu sei que ele estava tentando ajudar, porém não é todos que podem fazer o download do arquivo, isso priva as pessoas de poderem ajudar.

De qualquer forma,  ao postar um código, utilize o botão CODE <> que está contido no editor. Se não souber como usar, recomendo ler o tópico em destaque deste setor. 

  • Curtir 2
Link para o comentário
Compartilhar em outros sites

3 horas atrás, DiF disse:

Eu sei que ele estava tentando ajudar, porém não é todos que podem fazer o download do arquivo, isso priva as pessoas de poderem ajudar.

De qualquer forma,  ao postar um código, utilize o botão CODE <> que está contido no editor. Se não souber como usar, recomendo ler o tópico em destaque deste setor. 

@DiF ,
    Entendido.Desculpe-me e muito obrigada!
Cordialmente,
Programadora Iniciante

adicionado 38 minutos depois
4 horas atrás, Alexsander Gutierrez disse:

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 2 kB · 2 downloads

@Alexsander Gutierrez ,
      O caça-palavras que você fez e implementou ficou ótimo!Muito obrigada!O algoritmo gerador de caça-palavras não é usado para que outra pessoa crie o caça palavras da forma que quiser?Pesquisei sobre algoritmo gerador de caça palavras e só encontrei geradores de caça-palavras online. Se for isso, da forma que você fez ficou ótimo, não é necessário colocar algoritmo gerador de caça palavras. Isso me ajudou muito!
   Além disso, por favor, qual foi a tecnologia que você usou (HTML, CSS, JavaScript etc)?Foi apenas o HTML?Grata.
Cordialmente,
Programadora Iniciante

 

Notei que usou o CSS e o HTML. Usou alguma outra tecnologia, por favor?Grata.

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

18 minutos atrás, Gustavo Augusto Lopes disse:

@Programadora Iniciante Todo o conteúdo presente dentro das tags <script> ... </script> estão formadas por JavaScript.

Ele utilizou do HTML, CSS e JavaScript

@Gustavo Augusto Lopes ,
      Muito obrigada por tudo!Que legal, a estrutura de condição e os comandos dos botões foram todos desenvolvidos com o Javascript, a formatação (cor, borda, tamanho) e a execução automática do botão foi realizado em CSS e, o conjunto do arquivo (incluso a tabela) foi criado em HTML.Estou deslumbrada!
Cordialmente,
Programadora Iniciante

  • Curtir 2
Link para o comentário
Compartilhar em outros sites

 

.

adicionado 15 minutos depois

Olá, @Gustavo Augusto Lopes!
Estou tentando inserir dicas no caça palavras, mas as dicas estão empurrando o caça-palavras para baixo.Por favor, você sabe o que devo fazer para que as dicas do caça-palavras fiquem ao lado do caça-palavras?Já abri tr e td, mas não funcionou, pois elas ficam dentro do caça-palavras; retirei tr e td, mas as dicas empurraram o caça-palavras para baixo.Não sei o que fazer  para que as dicas e o caça-palavras fiquem lado a lado.Por favor, poderia ajudar-me?Grata.Segue abaixo o código sem implementação:
 

<!DOCTYPE html>
<head>
	<title>Caça-palavras
	<meta charset="utf-8">	
	</title>
</head>
<body bgcolor="yellow">
	<font>
	<center>
	<font color="red">	Caça-palavras
	</font>
	<br/>
	<font color="blue">
	Objetos de casa
    </center>
    <br/>
   </font>

   
   <table border="4" align="center">
      1.Objeto que ilumina o quarto.<br/>
            2.Objeto usado para dormir.<br/>
            3.Objeto usado para colocar flores.<br/>
         <br/>
   	<tr align="center">
   		<td><font color="black" size="4" face="Tahoma">C</font></td>
   		<td><font color="black" size="4" face="Tahoma">D</font></td>
   		<td><font color="black" size="4" face="Tahoma">V</font></td>
   		<td><font color="black" size="4" face="Tahoma">C</font></td>
   		<td><font color="black" size="4" face="Tahoma">L</font></td>
   		<td><font color="black" size="4" face="Tahoma">A</font></td>
   	</tr>
    <tr align="center">
   		<td><font color="black" size="4" face="Tahoma">A</font></td>
   		<td><font color="black" size="4" face="Tahoma">B</font></td>
   		<td><font color="black" size="4" face="Tahoma">A</font></td>
   		<td><font color="black" size="4" face="Tahoma">J</font></td>
   		<td><font color="black" size="4" face="Tahoma">U</font></td>
   		<td><font color="black" size="4" face="Tahoma">R</font></td>
   	</tr>
   	<tr align="center">
   		<td><font color="black" size="4" face="Tahoma">M</font></td>
   		<td><font color="black" size="4" face="Tahoma">B</font></td>
   		<td><font color="black" size="4" face="Tahoma">S</font></td>
   		<td><font color="black" size="4" face="Tahoma">H</font></td>
   		<td><font color="black" size="4" face="Tahoma">J</font></td>
   		<td><font color="black" size="4" face="Tahoma">L</font></td>
   	</tr>
   	<tr align="center">
   		<td><font color="black" size="4" face="Tahoma">A</font></td>
   		<td><font color="black" size="4" face="Tahoma">K</font></td>
   		<td><font color="black" size="4" face="Tahoma">O</font></td>
   		<td><font color="black" size="4" face="Tahoma">F</font></td>
   		<td><font color="black" size="4" face="Tahoma">X</font></td>
   		<td><font color="black" size="4" face="Tahoma">W</font></td>
   	</tr>
   </table>
</body>

Cordialmente,
Programadora Iniciante

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

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

  • Obrigado 1
Link para o comentário
Compartilhar em outros sites

Em 10/07/2020 às 19:55, Alexsander Gutierrez disse:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

O que significa "viewport e "width=device-width, initial-scale=1.0", por favor?

adicionado 2 minutos depois
Em 10/07/2020 às 19:55, Alexsander Gutierrez disse:

#dicas{ position:absolute; font-size:1em; padding-left:.7em; display:inline; margin:0 17% 0 0;

O que significa "display: inline" e "position: absolute", por favor?

adicionado 4 minutos depois
Em 10/07/2020 às 19:55, Alexsander Gutierrez disse:

@media only screen and (max-width:640px){

O que significa : @media only screen and (max-width:640px){ , por favor?

adicionado 4 minutos depois
Em 10/07/2020 às 19:55, Alexsander Gutierrez disse:

display:inline-block;

O que significa : display:inline-block;, por gentileza?

adicionado 6 minutos depois
Em 10/07/2020 às 19:55, Alexsander Gutierrez disse:

position:relative;

O que significa position:relative, por gentileza?

adicionado 44 minutos depois

Olá, @Alexsander Gutierrez!
         Muitíssimo obrigada por tudo !Você é muito inteligente!Tentarei montar um caça-palavras que una o que eu fiz mais o que você fez e implementou, com a temática meios de transporte, e, posto aqui da forma que eu conseguir fazê-lo.
Cordialmente,
Programadora Iniciante

adicionado 48 minutos depois

Observação: fiz algumas perguntas acima sobre o seu código. Por favor, poderia respondê-la?Desculpe-me por perguntar tanto, mas estou com muita vontade de aprender sobre o assunto.Obrigada!

Link para o comentário
Compartilhar em outros sites

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.

  • Obrigado 1
  • Amei 1
Link para o comentário
Compartilhar em outros sites

  • 2 semanas depois...
Em 10/07/2020 às 22:36, Programadora Iniciante disse:

O que significa "viewport e "width=device-width, initial-scale=1.0", por favor?

adicionado 2 minutos depois

O que significa "display: inline" e "position: absolute", por favor?

adicionado 4 minutos depois

O que significa : @media only screen and (max-width:640px){ , por favor?

adicionado 4 minutos depois

O que significa : display:inline-block;, por gentileza?

adicionado 6 minutos depois

O que significa position:relative, por gentileza?

adicionado 44 minutos depois

Olá, @Alexsander Gutierrez!
         Muitíssimo obrigada por tudo !Você é muito inteligente!Tentarei montar um caça-palavras que una o que eu fiz mais o que você fez e implementou, com a temática meios de transporte, e, posto aqui da forma que eu conseguir fazê-lo.
Cordialmente,
Programadora Iniciante

adicionado 48 minutos depois

Observação: fiz algumas perguntas acima sobre o seu código. Por favor, poderia respondê-la?Desculpe-me por perguntar tanto, mas estou com muita vontade de aprender sobre o assunto.Obrigada!

Olá, pessoal!
      Conforme combinado, publico nesta postagem: o caça-palavras sobre Meios de transporte que consegui desenvolver com base nos códigos de vocês.Infelizmente, não consegui inserir as dicas no caça-palavras sem que estas empurrassem o caça-palavras para baixo. Por favor, poderiam ajudar-me a colocar as dicas do caça-palavras em um quadrado (uma tabela sem linhas: estilo box card) ao lado do caça palavras?Além disso, desejo colocar uma imagem de controle de videogame abaixo do botão "jogar", por gentileza, poderiam auxiliar-me com isto também?O meu código segue abaixo:
 

<!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>
</head>

	<style>
		h1{
			color:blue;
			font-size:30px;
		}
		h2{
			color:#757575;
			font-size:20px;
		}
		
		h1, h2{
			text-align:center;
		}
		body{
			background-color:yellow;
		}
		@media only screen and (max-width:640px){
			#dicas{
				position:relative;
				font:2em Tahoma;
				margin:auto;
				left:0;
				right:0;
				display:inline-block;
			}
		}
		#dicas{
				text-align: justify;
				background-color: #F5F5F5;
			}

	
	html, body{
		margin:0;
		padding:0;
		background-color: #4CAF50;
	}

	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: #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;
}

#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.4em;
			margin:0;
		}
	
</style>

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

		<h1>Caça-palavras</h1>
		<h2>Meios de transportes</h2>
		<ol id="dicas">
			<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>

	<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);
				});
			}
			if(transportes.includes(selecionados.palavra)){
				transportes = transportes.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: "+ 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>

Grata.
Cordialmente,
Programadora Iniciante

Meios de transporte-caca-palavras.zip

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

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

  • Curtir 1
  • Obrigado 1
Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

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