Comment coder un dé virtuel aléatoire simple : 6 étapes
Comment coder un dé virtuel aléatoire simple : 6 étapes

Table des matières:

Anonim
Comment coder un dé virtuel aléatoire simple
Comment coder un dé virtuel aléatoire simple

Salut à tous!!!!! Il s'agit de mon premier instructable et je vais vous apprendre à coder un dé virtuel sur votre PC ou smartphone. J'utilise HTML, JavaScript et CSS, j'espère que vous l'aimerez tous et n'oubliez pas de voter pour moi dans le contexte ci-dessous.

Fournitures

1. Un bon éditeur de texte sur votre smartphone ou votre PC

Étape 1: Obtenez votre éditeur de texte

Ici, j'utilise mon smartphone comme éditeur de texte ici (AnWriter). Vous pouvez également utiliser le bloc-notes de votre PC ou obtenir un bon éditeur de texte en ligne

Étape 2: Téléchargez les faces des matrices

Télécharger Die Faces
Télécharger Die Faces
Télécharger Die Faces
Télécharger Die Faces
Télécharger Die Faces
Télécharger Die Faces

J'ai téléchargé quelques faces de matrice de 1 à 6 que je joins à cette étape. Ainsi, vous pouvez télécharger celui que vous préférez ou utiliser le mien (vous êtes libre).

J'ai nommé le mien d'après les faces du dé. C'est-à-dire:

Die_face_1.png, Die_face_2-p.webp

Étape 3: commencer à coder

Enregistrez le code en tant que fichier.html

Commencez par introduire la face de matrice par défaut que vous souhaitez en utilisant le src img

Étape 4:

Ensuite, nous aurons besoin d'un bouton pour lancer les dés, nous le faisons en ajoutant une fonction de bouton

ROULEZ LES DÉS

Étape 5: Utilisez la fonction Var et Math

Utiliser la fonction Var et Math
Utiliser la fonction Var et Math

SECOUER LES DÉS

fonction getRand(){

var vu=Math.floor(Math.random()*6)+1;

var vu2=Math.floor(Math.random()*6)+1;

var di =["die_face_1.png", "die_face_2.png", "die_face_3.png", "die_face_4.png", "die_face_5.png", "die_face_6.png"];

document.getElementById("dés").src= di[vu-1];

document.getElementById("dicl").src= di[vu2-1];

}

Ceci est le code complet, étudiez-le et testez-le et assurez-vous d'obtenir la photo pour obtenir l'effet

Et si vous avez besoin de mon aide sur ce code mentionnez-le dans la section commentaire

Vous pouvez changer le design si vous ne l'aimez pas, mais je le préfère pour le but pour lequel je veux l'utiliser

Étape 6: Exécuter

exécutez le code sur votre navigateur pour le faire fonctionner