Com codificar un dau virtual aleatori simple: 6 passos
Com codificar un dau virtual aleatori simple: 6 passos

Taula de continguts:

Anonim
Com codificar un dau virtual aleatori simple
Com codificar un dau virtual aleatori simple

Hola a tothom!!!!! Aquesta és la meva primera instrucció i us ensenyaré a codificar un dau virtual al vostre PC o telèfon intel·ligent. Estic fent servir HTML, JavaScript i CSS, espero que a tots us encantarà i no us oblideu de votar-me en el context següent.

Subministraments

1. Un bon editor de text al vostre telèfon intel·ligent o PC

Pas 1: obteniu el vostre editor de text

Aquí estic fent servir el meu telèfon intel·ligent com a editor de text aquí (AnWriter). També podeu utilitzar el bloc de notes del vostre PC o obtenir un bon editor de text en línia

Pas 2: descarregueu Die Faces

Descarrega Die Faces
Descarrega Die Faces
Descarrega Die Faces
Descarrega Die Faces
Descarrega Die Faces
Descarrega Die Faces

He descarregat algunes cares de l'1 al 6 que adjunto a aquest pas. Per tant, podeu descarregar la vostra preferida o utilitzar la meva (sou gratuït).

Vaig anomenar la meva segons les cares de la mort. Això és:

Die_face_1.png, Die_face_2-p.webp

Pas 3: Inicieu la codificació

Deseu el codi com a fitxer.html

Comenceu introduint la cara predeterminada que desitgeu mitjançant img src

Pas 4:

A continuació, necessitarem un botó per llançar els daus; ho fem afegint una funció de botó

DAUS DE ROLLS

Pas 5: utilitzeu la funció Var i Math

Utilitzeu la funció Var i Math
Utilitzeu la funció Var i Math

AGITAR ELS DAUS

funció 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 ("daus"). src = di [vu-1];

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

}

Aquest és el codi complet, estudieu-lo i proveu-lo i assegureu-vos que obteniu la foto per obtenir l'efecte

I si necessiteu la meva ajuda sobre aquest codi, mencioneu-lo a la secció de comentaris

Podeu canviar el disseny si no us agrada, però ho prefereixo amb la finalitat per a la qual vull utilitzar-lo

Pas 6: executeu

executeu el codi al navegador perquè funcioni