Come codificare un semplice dado virtuale casuale: 6 passaggi
Come codificare un semplice dado virtuale casuale: 6 passaggi

Sommario:

Anonim
Come codificare un semplice dado virtuale casuale
Come codificare un semplice dado virtuale casuale

Ciao a tutti!!!!! Questo è il mio primo tutorial e ti insegnerò come codificare un dado virtuale sul tuo PC o smartphone. Sto usando HTML, JavaScript e CSS, spero che amerete tutti e non dimenticate di votarmi nel contesto sottostante.

Forniture

1. Un buon editor di testo sul tuo smartphone o PC

Passaggio 1: ottieni il tuo editor di testo

Qui sto usando il mio smartphone come editor di testo qui (AnWriter). Puoi anche usare il blocco note del tuo PC o procurarti un buon editor di testo online

Passaggio 2: scarica Die Faces

Scarica Die Faces
Scarica Die Faces
Scarica Die Faces
Scarica Die Faces
Scarica Die Faces
Scarica Die Faces

Ho scaricato alcune facce da 1 a 6 che allego a questo passaggio. Quindi, puoi scaricare il tuo preferito o usare il mio (sei libero).

Ho chiamato il mio in base alle facce del dado. Questo è:

Die_face_1.png, Die_face_2-p.webp

Passaggio 3: inizia a codificare

Salva il codice come file.html

Inizia introducendo la faccia della fustella predefinita che desideri utilizzando img src

Passaggio 4:

Successivamente avremo bisogno di un pulsante per lanciare i dadi, lo facciamo aggiungendo una funzione del pulsante

TIRARE I DADI

Passaggio 5: utilizzare la funzione Var e Math

Usa la funzione Var e matematica
Usa la funzione Var e matematica

AGITARE I DADI

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

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

}

Questo è il codice completo, studialo e testalo e assicurati di ottenere la foto per ottenere l'effetto

E se hai bisogno del mio aiuto su questo codice, menzionalo nella sezione commenti

Potresti cambiare il design se non ti piace, ma lo preferisco per lo scopo per cui voglio usarlo

Passaggio 6: eseguire

esegui il codice sul tuo browser per farlo funzionare