Hvordan kode en enkel tilfeldig virtuell terning: 6 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:22

Hei alle sammen!!!!! Dette er min første instruks, og jeg skal lære deg hvordan du koder en virtuell terning på din PC eller smarttelefon. Jeg bruker HTML, JavaScript og CSS, jeg håper dere alle vil like det og ikke glem å stemme på meg i konteksten nedenfor.

Rekvisita

1. En god tekstredigerer på smarttelefonen eller PC -en

Trinn 1: Få tekstredigereren

Her bruker jeg smarttelefonen min som tekstredigerer her (AnWriter). Du kan også bruke notatblokken på PC -en, eller få en god tekstredigerer på nettet

Trinn 2: Last ned Die Faces

Jeg lastet ned noen dørflater fra 1 til 6 som jeg legger ved dette trinnet. Så du kan laste ned din foretrukne eller bruke min (du er gratis).

Jeg navngav min i henhold til døransiktene. Det er:

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

Trinn 3: Start kodingen

Lagre koden som.html -fil

Start med å introdusere standard dørflate du ønsker ved å bruke img src

Trinn 4:

Deretter trenger vi en knapp for å kaste terningene vi gjør dette ved å legge til en knappfunksjon

RULLER DERE

Trinn 5: Bruk Var og Math -funksjonen

RISK TERNINGER

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

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

}

Dette er hele koden, studer den og test den og sørg for at du får bildet for å få effekten

Og hvis du trenger min hjelp med denne koden, kan du nevne det i kommentarfeltet

Du kan endre designet hvis du ikke liker det, men jeg foretrekker det for det formålet jeg vil bruke det til

Trinn 6: Kjør

kjør koden i nettleseren din for å få den til å fungere