Início

JS Dice

Rolador de Dados

dom, 03/06/2007 - 11:54 — bardo
<!-- google_ad_section_start -->

Adicionei ao site um simulador de lances de dados na forma de um simples bloco, usando apenas JavaScript e HTML. É um recurso interessante para RPG e experimentações estatísticas.

Para fazer um simulador de dados, é bem simples. O programa mesmo tem apenas 8 linhas, o restante é HTML. A imagem do artigo mostra como fica. Vou deixar disponível esse "brinquedo" aqui no site por uns dias, depois deixo como recurso opcional para quem se cadastrou no site. Isso apenas para poupar espaço visual, pois o site está cheio de coisas e acho que esse recurso não é útil pra maioria dos visitantes.

Mas vamos ver como ele é feito. Primeira coisa: vamos à idéia.

Dados...

Quando você diz "um dado tem 6 lados" para uma pessoa comum, ela concorda com você. Quando diz isso para um RPGista, ele vai franzir a testa e dizer "depende...". Sim, porque dados podem ter muitos lados! Em RPG os mais comuns são de 4, de 6, de 8, de 12 e de 20 lados, mas há ainda outros. Veja na Wikipedia que tem sobre dados.

Além de existirem vários tipos de dados, às vezes é necessário rolar mais de um do mesmo tipo. Uma combinação comum é a de 3 dados de 6 lados.

Por isso, utiliza-se uma "sintaxe" própria para se referir aos dados que precisam ser lançados. Quando queremos nos referir a um dado de 8 lados, dizemos "d8"; de 20 lados, dizemos "d20", e por aí vai... Para mais de um dado, colocamos o número antes do "d". Os 3 dados de 6 lados são referenciados por "3d6".

Isso é importante! Não basta o intervalo! Se eu jogar "1d20" será bem diferente de eu jogar "2d10". Não apenas pela presença ou ausência do 1, mas pelas possibilidades de cada número serem diferentes no segundo caso.

Um pouco de Matemática

JavaScript oferece uma biblioteca matemática, que por sua vez tem um método apropriado para coisas aleatórias. Só tem um problema: ele gera números fracionários entre 0 e 1. Aí precisamos de um processo matemático para transpô-lo para o intervalo desejado.

Os passos são:

  1. aumentamos bastante as casas decimais desse número, para sair do intervalo (0-1) para (0 a 10.000), por exemplo;
  2. dividir o número pela quantidade de lados que o dado tem;
  3. pegar o resto dessa divisão, que vai dar um número entre 0 e o número de lados, decrescido de um;
  4. pegar apenas a parte inteira desse resto, e somar um.

Digamos que queremos rolar um dado de 6 lados. Veja neste exemplo detalhado como a coisa funciona:

  1. primeiro geramos o número aleatório e digamos que foi 0,34200174730355415;
  2. multiplicado por 10.000, se torna 3.420,0174730355415;
  3. segundo o interpretador de JavaScript aqui, dividindo por 6, dá 570,002912172593, sobrando 0,017473035541570425. Não faz muito sentido, mas não precisamos do valor exato aqui, muito pelo contrário: não queremos nem saber dos "centavos";
  4. a parte inteira do resto é o 0. (para 1d6, o número tem que ser entre 0 e 5);
  5. somando 1, o resultado do lance de dados é 1!

Concordo, é bem mais simples pegar um dado e jogar na mesa do que calcular isso tudo. Mas tendo um programa já feito, vai ser só clicar no botão. ;-)

O Código

Temos no início a função que faz esse procedimento matemático e modifica o "display" do resultado. No código HTML, você vê o display e os botões. Se quiser dar suporte a outros lances de dados, é só adicionar botões seguindo o padrão apresentado.

<script type="application/x-javascript">
function rolldice(iDices, iFaces){
result =0
for(i =0; i <iDices; i++){
r0 =(Math.random() *10000) %iFaces +1
r1 =r0 %1
result +=r0 -r1
}
document.getElementById("dice").innerHTML =result
}
</script>
<form>
<span id="dice">Resultado</span>
<input type="button" onclick="rolldice(1,4)" value="1d4" />
<input type="button" onclick="rolldice(1,6)" value="1d6" />
<input type="button" onclick="rolldice(1,8)" value="1d8" />
<input type="button" onclick="rolldice(1,10)" value="1d10" />
<input type="button" onclick="rolldice(1,12)" value="1d12" />
<input type="button" onclick="rolldice(1,20)" value="1d20" />
<input type="button" onclick="rolldice(1,100)" value="1d100" />
<input type="button" onclick="rolldice(3,6)" value="3d6" />
</form>

O código acima já está pronto e deve funcionar. É interessante colocar um estilo pelo menos no resultado. Que tal esse?

#dice {
display: block;
padding: 2px;
margin: 2px;
font-decoration: italic;
border: 1px solid #ccc;
text-align: right;
}

A imagem aparece com os botões arredondados por causa do estilo deste site. É um recurso do Firefox...

-- Cárlisson Galdino

P.S.: Artigo publicado inicialmente em 27 de agosto de 2006 no Bardo. A imagem mostrada é como está se apresentando o recurso visualmente no Bardo.

Syndicate content