Comment créer des nombres aléatoires dans votre jeu HTML5 - les nuls

Les nombres aléatoires sont un élément clé de la programmation de jeux HTML5. Souvent, vous voulez un comportement aléatoire. Ceci est utilisé pour imiter la complexité et l'imprévisibilité de l'univers. La plupart des langues ont un générateur de nombres aléatoires intégré. Cette fonction spéciale produit une sorte de nombre semi-aléatoire. Souvent, vous devrez faire quelques manipulations pour que le nombre corresponde au motif que vous voulez.

La page semble un peu complexe, mais elle décrit un système puissant et flexible, une fois que vous savez l'utiliser. Voici ce qui se passe:

JavaScript génère un nombre aléatoire.

Différentes langues font cela de différentes manières, mais JavaScript a une fonction qui crée une valeur aléatoire à virgule flottante entre 0 et 1. Cette valeur est affichée dans la boîte brute.
Multipliez la valeur brute par 100.

Dans cet exemple, vous voulez un nombre entre 1 et 100. Si vous multipliez un 0 par 1 par 100, vous obtiendrez 0 à 99. 9999 (avec beaucoup de neuf) valeur. Ça se rapproche. La boîte de temps 100 affiche la valeur brute après qu'elle a été multipliée par 100.
Convertissez le grand nombre en nombre entier.

L'utilisateur ne devinera jamais un nombre avec 17 places après la virgule, vous avez donc besoin d'un nombre entier. JavaScript a un certain nombre de façons de convertir un float en entier. Pour obtenir le comportement de 1 à 100 que vous recherchez, vous utilisez une méthode appelée Math. ceil. Le résultat final est indiqué dans la dernière case.

Voici le code dans son intégralité:

rand100. fieldset html {width: 600px; marge-droite: auto; marge-gauche: auto;} label {float: left; largeur: 250px; text-align: droit; marge-droite: 1em; clear: left;} span {float: left;} bouton {affichage: bloquer; clarifier les deux; margin: auto;} function roll () {// crée des variables pour les éléments de formulaire var spnRaw = document. getElementById ("spnRaw"); var spn100 = document. getElementById ("spn100"); var spnFinal = document. getElementById ("spnFinal"); // obtient un nombre aléatoire var raw = Math. au hasard(); spnRaw. innerHTML = brut; // multiplier par 100 var fois100 = raw * 100; spn100. innerHTML = times100; // obtient le plafond var final = Math. ceil (times100); spnFinal. innerHTML = final;} // end roll

Faire des nombres aléatoires 1 - 100
raw 0 fois 100 0 final 0 lancer les dés

Utiliser les maths pour votre code de jeu

Pour que ce programme fonctionne, besoin d'appeler l'arme ultime de la geekiness: Math.

JavaScript a une magnifique bibliothèque appelée Math . La bibliothèque de maths a quelque chose de vraiment geek caché dans elle, comme un certain nombre de fonctions mathématiques couramment utilisées ainsi que des constantes (comme pi) et quelques autres fonctions d'utilité pour travailler avec des nombres.

Tout d'abord, bien sûr, c'est la fonction qui génère des nombres aléatoires. Ça s'appelle Math. au hasard().

Vous avez vraiment besoin de dire Math. au hasard(). Si vous appelez random () tout seul, JavaScript ne saura pas de quoi vous parlez.

Les maths. La fonction random () produit un nombre semi-aléatoire. (Ce n'est pas vraiment aléatoire, mais est produit par une formule complexe d'un autre nombre.) Le nombre aléatoire sera une valeur à virgule flottante entre 0 et 1. Cela ne semble pas utile, mais avec un peu de maths, vous pouvez convertir la valeur de 0 à 1 à toute autre gamme que vous souhaitez.

En plus de la fonction random (), l'objet Math possède un certain nombre de fonctions qui vous permettent de convertir une valeur à virgule flottante (c'est-à-dire un nombre avec un point décimal) en entier (vous l'avez - un nombre sans point décimal). La méthode parseInt () standard est construite en JavaScript, mais parfois vous voulez faire une conversion plus géniale. La bibliothèque Math possède un certain nombre de ces outils:

Math. round (): Convertit un nombre en utilisant l'algorithme d'arrondi standard. Si la partie décimale est. 5 ou moins, le plus petit entier est choisi; si la partie décimale est supérieure à. 5, l'entier le plus grand est choisi. Cela signifie que 3. 1 tours à 3 et 3. 8 tours à 4.
Math. floor (): Cette fonction arrondit toujours vers le bas, donc 3. 1 et 3. 8 deviennent tous les deux 3. La fonction parseInt () est identique à Math. sol().
Math. ceil (): Cette fonction (get it - la fonction de plafond) arrondit toujours, donc 3. 1 et 3. 8 les deux finissent comme 4.

La fonction dont vous avez besoin dépend des circonstances spécifiques.

Comment faire le formulaire de jeu HTML

Comme toujours, HTML constitue le fondement de tout programme JavaScript. La chose principale ici est le formulaire qui fournit l'interface utilisateur. Ce formulaire a des caractéristiques prévisibles:

Un intervalle pour contenir les données brutes: Il n'y a vraiment rien à saisir pour l'utilisateur, utilisez donc un span pour les différents éléments de sortie. Les travées sont un tag inline générique. Ils sont super pour des situations comme celle-ci où vous avez besoin d'un élément de sortie simple qui peut être en ligne avec le flux principal de la page. L'intervalle de données brutes est appelé (ici vous allez …) spnRaw.
Une autre plage pour les données times100 : Lorsque le programme effectue les calculs, il affiche la sortie.
Un troisième intervalle pour la sortie finale: Une fois tous les calculs terminés, vous avez besoin d'un moyen d'afficher votre travail brillant. spnFinal servira ce but.
Étiquettes pour tout clarifier: Sans étiquettes expliquant ce qui se passe, il y aura juste un tas de chiffres à l'écran. N'oubliez pas d'ajouter des étiquettes même à des exemples simples afin que l'utilisateur puisse comprendre ce qui se passe.
Un bouton pour commencer toute l'action: Rien ne se passera jusqu'à ce que l'utilisateur le demande, alors ajoutez un bouton au formulaire. Lorsque le bouton est cliqué, appelez la fonction roll () pour lancer un nombre.
CSS pour que tout soit beau: HTML sans CSS est moche, alors ajoutez suffisamment de CSS pour que le formulaire HTML soit correct.