Simular Lançamento de Dados em JavaScript

Neste tutorial de JavaScript, vamos te ensinar como criar um script que simula o lançamento de dados, ou seja, que te gera aleatoriamente números de 1 até 6.

Apostila JavaScript Progressivo

Gerando Números de 1 até 6

No tutorial anterior, aprendemos como gerar números aleatórios em JavaScript, onde estudamos a função random() do objeto Math.

Vimos que fazendo: Math.random() , o JS nos fornece um valor decimal de 0.0 até 1.0 (exceto o 1.0).
Se multiplicamos esse valor por 6 nesse comando, temos valores de: 0.0 até 6.0
Por fim, somamos uma unidade e teremos: 1.0 até 7.0 (exceto o o 7).

Agora, basta arredondarmos para baixo, usando a Math.floor() e teremos números inteiros de 1 até 6, que é exatamente o que desejamos obter ao lançar dados.

Nosso código HTML + JS fica:

<!DOCTYPE html>
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
 </head>
 <body>
 <button onclick="jogar()">Lançar Dados</button><br />
 Sorteado: <div id="resp"></div>

 <script type="text/javascript">
  function jogar()
  {
    var resp = document.getElementById('resp');
    resp.innerHTML = Math.floor( 1 + 6*Math.random() );
  }
 </script>
 </body>
</html>

Resultado:

Sorteado:

Simular Lançamento de Dados

Salve cada uma das imagens:

Com os nomes:
dados-funcao-0.png
dados-funcao-1.png
dados-funcao-2.png
dados-funcao-3.png
dados-funcao-4.png
dados-funcao-5.png
dados-funcao-6.png

Em seguida, utilize o seguinte código:

<!DOCTYPE html>
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
 <script>
  var dado;
  
  function iniciar()
  {
   var button = document.getElementById( "rolar" );
   button.addEventListener( "click", rolar, false );
   dado = document.getElementById( "dado" );
  }

  function rolar()
  {
   setImage( dado );
  }

  function setImage( dado )
  {
   var valor = Math.floor( 1 + Math.random() * 6 );
   dado.setAttribute( "src", "dados-funcao-" + valor + ".png" );
  } 
  window.addEventListener("load", iniciar, false);
 </script>
 </head>
 <body>
 <form action = "#">
  <input id = "rolar" type = "button" value = "Rodar Dados">
 </form>
 <img id = "dado" src = "dados-funcao-0.png">

 </body>
</html>

Cada vez que clicar no botão, ele vai exibir a imagem de um dado, com o valor de 1 até 6.
Repetindo: com a imagem, ao invés apenas dos números.

No decorrer de nosso curso iremos aprender e entender melhor como funciona o código anterior.

Simular Lançamento de Dados em JavaScript

Gerando Números de 1 até 6

Simular Lançamento de Dados

5 comentários: