How to draw a word and letter draw when clicking the start button?

Navigation
0

Hello, can anyone help me? So I need to make a lot of words that are in the Array and a draw of the words of these words every time the user clicks the start button, which is in the table. Thanks in advance !!

SCRIPT 

//chamar no onclick cada div (DEU CERTO O CLICK)
$(document).ready(function() {
  $('div[id^=num]', 'table').click(function() {
    var id = $(this).attr("id");
    //aqui está apresentado o elemento da id
    //alert(document.getElementById(id).innerHMTL);
  });
});
//BIBLIOTECA DE PALAVRAS 
var palavras = new Array();
palavras[0] = "escola";
palavras[1] = "casa";
palavras[2] = "inverno";
palavras[3] = "macaco";
palavras[4] = "estudantes";

alert("Eu sou um alert!");


var p = new Array();

function tempo() {
  setTimeout("tempo()", 1000);
  itempo++;
}
/*
                -------------------
                SORTEIO,
                essa funcao eh chamada
                todas as vezes que o jogador
                iniciar ou terinar a jogada. 
                -------------------  */
var numero = [];
var i;

function numero_aleatorio() {
  while (numero.length < 4) {
    var aleatorio = Math.floor(Math.random() * 100);

    if (numeros.indexoOf(aleatorio) == -1) numero.push(aleatorio);
  }
}
/*-------------------
JOGAR -
inicia uma jogada.
quando o usuario clica em uma das
letras ele irá para a outra coluna */

function jogar(letra) {
  var nome = palavras[iconte].toUpperCase();
  nome.split("");
  var erroSim = 0;
  var coleta = "";
}

HTML 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="button" onclick='teste(this.value)'>

<table border="0">
  <tr>
    <td colspan="15">Dica:</td>
  </tr>

  <tr class="area">
    <td>
      <div id="num1"></div>
    </td>
    <!--UM ID EM TODAS AS DIV'S-->
    <td>
      <div id="num2"></div>
    </td>
    <td>
      <div id="num3"></div>
    </td>
    <td>
      <div id="num4"></div>
    </td>
    <td>
      <div id="num5"></div>
    </td>
    <td>
      <div id="num6"></div>
    </td>
    <td>
      <div id="num7"></div>
    </td>
    <td>
      <div id="num8"></div>
    </td>
    <td>
      <div id="num9"></div>
    </td>
    <td>
      <div id="num10"></div>
    </td>
    <td>
      <div id="num11"></div>
    </td>
    <td>
      <div id="num12"></div>
    </td>
    <td>
      <div id="num13"></div>
    </td>
    <td>
      <div id="num14"></div>
    </td>
    <td>
      <div id="num15"></div>
    </td>
    <td class="tempo">Tempo</td>
    <!-- AQUI SERÁ O CRONOMETRO-->
  </tr>

  <tr class="area">
    <td>
      <div id="num16"></div>
    </td>
    <td>
      <div id="num17"></div>
    </td>
    <td>
      <div id="num18"></div>
    </td>
    <td>
      <div id="num19"></div>
    </td>
    <td>
      <div id="num20"></div>
    </td>
    <td>
      <div id="num21"></div>
    </td>
    <td>
      <div id="num22"></div>
    </td>
    <td>
      <div id="num23"></div>
    </td>
    <td>
      <div id="num24"></div>
    </td>
    <td>
      <div id="num25"></div>
    </td>
    <td>
      <div id="num26"></div>
    </td>
    <td>
      <div id="num27"></div>
    </td>
    <td>
      <div id="num28"></div>
    </td>
    <td>
      <div id="num29"></div>
    </td>
    <td>
      <div id="num30"></div>
    </td>
  </tr>

  <tr class="area">
    <td>
      <div id="num31"></div>
    </td>
    <td>
      <div id="num32"></div>
    </td>
    <td>
      <div id="num33"></div>
    </td>
    <td>
      <div id="num34"></div>
    </td>
    <td>
      <div id="num35"></div>
    </td>
    <td>
      <div id="num36"></div>
    </td>
    <td>
      <div id="num37"></div>
    </td>
    <td>
      <div id="num38"></div>
    </td>
    <td>
      <div id="num39"></div>
    </td>
    <td>
      <div id="num40"></div>
    </td>
    <td>
      <div id="num41"></div>
    </td>
    <td>
      <div id="num42"></div>
    </td>
    <td>
      <div id="num43"></div>
    </td>
    <td>
      <div id="num44"></div>
    </td>
    <td>
      <div id="num45"></div>
    </td>
    <td class="iniciar"> <button>Iniciar</button></td>
    <!-- MELHORAR ESSE BOTÃO E O DE SAIR-->
  </tr>

  <tr class="area">
    <td>
      <div id="num46"></div>
    </td>
    <td>
      <div id="num47"></div>
    </td>
    <td>
      <div id="num48"></div>
    </td>
    <td>
      <div id="num49"></div>
    </td>
    <td>
      <div id="num50"></div>
    </td>
    <td>
      <div id="num51"></div>
    </td>
    <td>
      <div id="num52"></div>
    </td>
    <td>
      <div id="num53"></div>
    </td>
    <td>
      <div id="num54"></div>
    </td>
    <td>
      <div id="num55"></div>
    </td>
    <td>
      <div id="num56"></div>
    </td>
    <td>
      <div id="num57"></div>
    </td>
    <td>
      <div id="num58"></div>
    </td>
    <td>
      <div id="num59"></div>
    </td>
    <td>
      <div id="num60"></div>
    </td>
  </tr>

  <tr class="area">
    <td>
      <div id="num61"></div>
    </td>
    <td>
      <div id="num62"></div>
    </td>
    <td>
      <div id="num63"></div>
    </td>
    <td>
      <div id="num64"></div>
    </td>
    <td>
      <div id="num65"></div>
    </td>
    <td>
      <div id="num66"></div>
    </td>
    <td>
      <div id="num67"></div>
    </td>
    <td>
      <div id="num68"></div>
    </td>
    <td>
      <div id="num69"></div>
    </td>
    <td>
      <div id="num70"></div>
    </td>
    <td>
      <div id="num71"></div>
    </td>
    <td>
      <div id="num72"></div>
    </td>
    <td>
      <div id="num73"></div>
    </td>
    <td>
      <div id="num74"></div>
    </td>
    <td>
      <div id="num75"></div>
    </td>
    <td class="sair"><button>Sair</button></td>
  </tr>

  <tr class="area">
    <td>
      <div id="num76"></div>
    </td>
    <td>
      <div id="num77"></div>
    </td>
    <td>
      <div id="num78"></div>
    </td>
    <td>
      <div id="num79"></div>
    </td>
    <td>
      <div id="num80"></div>
    </td>
    <td>
      <div id="num81"></div>
    </td>
    <td>
      <div id="num82"></div>
    </td>
    <td>
      <div id="num83"></div>
    </td>
    <td>
      <div id="num84"></div>
    </td>
    <td>
      <div id="num85"></div>
    </td>
    <td>
      <div id="num86"></div>
    </td>
    <td>
      <div id="num87"></div>
    </td>
    <td>
      <div id="num88"></div>
    </td>
    <td>
      <div id="num89"></div>
    </td>
    <td>
      <div id="num90"></div>
    </td>
  </tr>

  <tr class="area">
    <td>
      <div id="num91"></div>
    </td>
    <td>
      <div id="num92"></div>
    </td>
    <td>
      <div id="num93"></div>
    </td>
    <td>
      <div id="num94"></div>
    </td>
    <td>
      <div id="num95"></div>
    </td>
    <td>
      <div id="num96"></div>
    </td>
    <td>
      <div id="num97"></div>
    </td>
    <td>
      <div id="num98"></div>
    </td>
    <td>
      <div id="num99"></div>
    </td>
    <td>
      <div id="num100"></div>
    </td>
    <td>
      <div id="num101"></div>
    </td>
    <td>
      <div id="num102"></div>
    </td>
    <td>
      <div id="num103"></div>
    </td>
    <td>
      <div id="num104"></div>
    </td>
    <td>
      <div id="num105"></div>
    </td>
    <td rowspan="4" class="informacoes">Informações: As Letras da palavras, estão embaralhada; Tem 40 segundos para escrever corretamente; O tempo acabou e não conseguiu escrever, perdeu; terminou antes do tempo, mas a palavra está errada, perdeu;</td>
  </tr>

  <tr class="area_perigo">
    <!--NÃO ESTOU CONSEGUINDO TROCAR A COR-->
    <td>
      <div id="num106"></div>
    </td>
    <td>
      <div id="num107"></div>
    </td>
    <td>
      <div id="num108"></div>
    </td>
    <td>
      <div id="num109"></div>
    </td>
    <td>
      <div id="num110"></div>
    </td>
    <td>
      <div id="num111"></div>
    </td>
    <td>
      <div id="num112"></div>
    </td>
    <td>
      <div id="num113"></div>
    </td>
    <td>
      <div id="num114"></div>
    </td>
    <td>
      <div id="num115"></div>
    </td>
    <td>
      <div id="num116"></div>
    </td>
    <td>
      <div id="num117"></div>
    </td>
    <td>
      <div id="num118"></div>
    </td>
    <td>
      <div id="num119"></div>
    </td>
    <td>
      <div id="num120"></div>
    </td>
  </tr>

  <tr class="area_perigo">
    <td>
      <div id="num121"></div>
    </td>
    <td>
      <div id="num122"></div>
    </td>
    <td>
      <div id="num123"></div>
    </td>
    <td>
      <div id="num124"></div>
    </td>
    <td>
      <div id="num125"></div>
    </td>
    <td>
      <div id="num126"></div>
    </td>
    <td>
      <div id="num127"></div>
    </td>
    <td>
      <div id="num128"></div>
    </td>
    <td>
      <div id="num129"></div>
    </td>
    <td>
      <div id="num130"></div>
    </td>
    <td>
      <div id="num131"></div>
    </td>
    <td>
      <div id="num132"></div>
    </td>
    <td>
      <div id="num133"></div>
    </td>
    <td>
      <div id="num134"></div>
    </td>
    <td>
      <div id="num135"></div>
    </td>
  </tr>

  <tr class="area_perigo">
    <td>
      <div id="num136"></div>
    </td>
    <td>
      <div id="num137"></div>
    </td>
    <td>
      <div id="num138"></div>
    </td>
    <td>
      <div id="num139"></div>
    </td>
    <td>
      <div id="num140"></div>
    </td>
    <td>
      <div id="num141"></div>
    </td>
    <td>
      <div id="num142"></div>
    </td>
    <td>
      <div id="num143"></div>
    </td>
    <td>
      <div id="num144"></div>
    </td>
    <td>
      <div id="num145"></div>
    </td>
    <td>
      <div id="num146"></div>
    </td>
    <td>
      <div id="num147"></div>
    </td>
    <td>
      <div id="num148"></div>
    </td>
    <td>
      <div id="num149"></div>
    </td>
    <td>
      <div id="num150"></div>
    </td>
  </tr>

  <tr>
    <td colspan="10">Respostas: </td>
  </tr>
</table>

</body>

</html>
    
asked by anonymous 17.10.2018 / 14:24

1 answer

0

You can use the Math.random function to select a random value based on the total size of array / String . In the example below I used only one function to select the random values: 

const randomizar = opcoes => opcoes[Math.floor(Math.random() * opcoes.length)];

const embaralhar = (opcoes) => {
  return opcoes
    .split('')
    .map((a) => ({ sort: Math.random(), value: a }))
    .sort((a, b) => a.sort - b.sort)
    .map(a => a.value)
    .join('');
};

// Utilização

const palavras = ['escola', 'casa', 'inverno', 'macaco', 'estudantes'];

const palavra = randomizar(palavras);
const letra = randomizar(palavra);
const embaralhado = embaralhar(palavra);

console.log('palavra', palavra);
console.log('letra', letra);
console.log('embaralhado', embaralhado);

I've also added a function that shuffles the letters of a word.

    
17.10.2018 / 14:35
Input of type date in jQuery Filter object with folder / file structure and return structure filtered by name