Como criar números aleatórios em seu jogo HTML5

números aleatórios são uma parte fundamental do HTML5 programação de jogos. Muitas vezes, você quer algum tipo de comportamento aleatório. Isto é usado para imitar a complexidade e imprevisibilidade do universo. A maioria das linguagens têm um gerador de números aleatórios embutido. Esta função especial produz algum tipo de número semi-aleatório. Muitas vezes você vai ter que fazer alguma manipulação para fazer o número encaixa no padrão que você deseja.

image0.jpg

A página parece um pouco complexo, mas descreve um sistema poderoso e flexível, uma vez que você sabe como usá-lo. Aqui é o que está acontecendo:

  1. javascript gera um número aleatório.

    Diferentes linguagens fazer isso de maneiras diferentes, mas javascript tem uma função que cria um valor de ponto flutuante aleatório entre 0 e 1. Esse valor é mostrado na caixa de cru.

  2. Multiplique o valor bruto por 100.

    Neste exemplo, você quer um número entre 1 e 100. Se você multiplicar a 0 para 1 por 100, você vai ter 0-99,9999 (com um monte de noves) valor. Isso está ficando mais perto. A caixa de tempos 100 mostra o valor bruto depois de ter sido multiplicado por 100.

  3. Converter o número grande em um inteiro.

    O usuário nunca vai adivinhar um número com 17 lugares depois da vírgula, então você precisa um número inteiro. javascript tem um número de maneiras de converter um flutuador para um número inteiro. Para obter o 1 a 100 comportamento que você está procurando, você usa um método chamado Math.ceil. O resultado final é mostrado na caixa final.

Aqui está o código em sua totalidade:

rand100.html

Faça números aleatórios 1-100

Usar a matemática para o seu código do jogo

Para fazer este programa funcionar, você precisa chamar a arma final de geekiness: Math.

javascript tem uma biblioteca maravilhosa chamada Matemática. o Matemática biblioteca tem alguma bondade realmente geeky enterrado nela, como um número de funções comumente usadas matemática, bem como constantes (como pi) e algumas outras funções utilitárias para trabalhar com números.

Em primeiro lugar, é claro, representa a função que gera números aleatórios. É chamado Math.random ().

Você realmente precisa dizer Math.random (). Se você chamar aleatória() por si só, javascript não vai saber o que você está falando.

o Math.random () função produz um número semi-aleatório. (Não é realmente aleatória, mas é produzido através de uma fórmula complexa de um outro número.) O número aleatório será um valor de ponto flutuante entre 0 e 1. Isso não parece útil, mas com um pouco de matemática, você pode converter o 0-1 valor para qualquer outro intervalo que você desejar.

Em adição ao aleatória() função, o Matemática objeto tem um número de funções que lhe permitem converter um valor de ponto flutuante (isto é, um número com um ponto decimal) para um inteiro (você entendeu - um número sem um ponto decimal). O padrão parseInt () método é construído em javascript, mas às vezes você quer fazer uma conversão mais extravagante. A biblioteca matemática tem um número dessas ferramentas:

  • Math.round (): Converte um número usando o algoritmo de arredondamento padrão. Se a parte decimal é 0,5 ou menos, o número inteiro mais pequeno é Escolhido se a parte decimal é maior do que 0,5, o número inteiro maior for escolhido. Isso significa que 3,1 é arredondado para 3 e 3,8 rodadas a 4.

  • Math.floor (): Esta função sempre arredonda para baixo, para 3,1 e 3,8 ambos tornam-se 3. A parseInt () é idêntica à função Math.floor ().

  • Math.ceil (): Esta função (obtê-lo - a função de teto) sempre arredonda-se, portanto, 3.1 e 3.8 ambos acabam como 4.

A função que você precisa depende das circunstâncias específicas.

Como fazer com que a forma de jogo HTML

Como sempre, HTML é o alicerce de qualquer programa de javascript. A questão principal aqui é a forma que fornece a interface do usuário. Esta forma tem algumas características previsíveis:

  • Um espaço para armazenar os dados em bruto: Não há realmente nada para o usuário tipo, então use uma extensão para os vários elementos de saída. Vãos são uma tag em linha genérico. Eles são super para situações como esta, onde você precisa de algum elemento de saída simples, que pode ser em linha com o fluxo principal da página. O intervalo de dados brutos é chamado (aqui você vai...) spnRaw.

  • Outra extensão para o times100 dados: À medida que o programa faz os cálculos, ele irá mostrar a saída.

  • Um terceiro intervalo para a saída final: Depois de todos os cálculos são terminado, você precisa de alguma maneira para mostrar o seu trabalho brilhante. spnFinal vai servir a esse propósito.

  • Etiquetas para tornar tudo claro: Sem rótulos explicando o que está acontecendo, haverá apenas um monte de números na tela. Não se esqueça de adicionar rótulos sequer a exemplos simples para que o usuário pode descobrir o que está acontecendo.

  • Um botão para iniciar toda a ação: Nada vai acontecer até que o usuário pede para ele, assim que adiciona um botão ao formulário. Quando o botão é clicado, tê-lo chamar a rolo() funcionar a rolar um número.

  • CSS para fazer tudo com bom aspecto: HTML sem CSS é feio, então adicionar CSS suficiente para tornar o formulário HTML parecem decentes.

menu