Sådan kodes en simpel tilfældig virtuel terning: 6 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:26

Hej allesammen!!!!! Dette er min første instruerbare, og jeg vil lære dig at kode en virtuel terning på din pc eller smartphone. Jeg bruger HTML, JavaScript og CSS, jeg håber, at I alle ville elske det, og glem ikke at stemme på mig i nedenstående kontekst.

Forbrugsvarer

1. En god tekstredigerer på din smartphone eller pc

Trin 1: Få din tekstredigerer

Her bruger jeg min smartphone som tekstredaktør her (AnWriter). Du kan også bruge din pc's notesblok eller få en god tekstredigerer online

Trin 2: Download Die Faces

Jeg downloadede nogle dørflader fra 1 til 6, som jeg vedhæfter til dette trin. Så du kan downloade din foretrukne eller bruge min (du er gratis).

Jeg navngav mit i henhold til die ansigterne. Det er:

Die_face_1.png, Die_face_2.png….og så videre til 6 for bedre genkendelse

Trin 3: Start kodning

Gem koden som.html -fil

Start med at introducere det ønskede standard -ansigt ved at bruge img src

Trin 4:

Derefter skal vi bruge en knap til at kaste terningerne, vi gør dette ved at tilføje en knapfunktion

ROLL terninger

Trin 5: Brug Var og Math -funktionen

Ryst terninger

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

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

}

Dette er den fulde kode, studer den og test den, og sørg for at få billedet for at få effekten

Og hvis du har brug for min hjælp til denne kode, skal du nævne det i kommentarfeltet

Du kan ændre designet, hvis du ikke kan lide det, men jeg foretrækker det til det formål, jeg vil bruge det til

Trin 6: Kør

kør koden på din browser for at få den til at fungere