Hur man kodar en enkel slumpmässig virtuell tärning: 6 steg
Hur man kodar en enkel slumpmässig virtuell tärning: 6 steg

Innehållsförteckning:

Anonim
Hur man kodar en enkel slumpmässig virtuell tärning
Hur man kodar en enkel slumpmässig virtuell tärning

Hej allihopa!!!!! Detta är min första instruerbara och jag kommer att lära dig hur man kodar en virtuell tärning på din dator eller smartphone. Jag använder HTML, JavaScript och CSS, jag hoppas att ni alla skulle älska det och glöm inte att rösta på mig i sammanhanget nedan.

Tillbehör

1. En bra textredigerare på din smartphone eller dator

Steg 1: Skaffa din textredigerare

Här använder jag min smartphone som textredigerare här (AnWriter). Du kan också använda datorns anteckningsblock eller få en bra textredigerare online

Steg 2: Ladda ner Die Faces

Ladda ner Die Faces
Ladda ner Die Faces
Ladda ner Die Faces
Ladda ner Die Faces
Ladda ner Die Faces
Ladda ner Die Faces

Jag laddade ner några die ansikten från 1 till 6 som jag bifogar detta steg. Så du kan ladda ner din favorit eller använda min (du är ledig).

Jag namngav min enligt de ansikten. Det är:

Die_face_1.png, Die_face_2.png….och så vidare till 6 för bättre igenkänning

Steg 3: Starta kodning

Spara koden som.html -fil

Börja med att introducera det standardformade ansiktet du vill ha med img src

Steg 4:

Därefter behöver vi en knapp för att kasta tärningarna vi gör detta genom att lägga till en knappfunktion

KASTA TÄRNING

Steg 5: Använd Var och Math -funktionen

Använd Var och Math -funktionen
Använd Var och Math -funktionen

SKAKA TÄRINGAR

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

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

}

Detta är hela koden, studera den och testa den och se till att du får fotot för att få effekten

Och om du behöver min hjälp med den här koden, tala om det i kommentarsfältet

Du kan ändra designen om du inte gillar den men jag föredrar den för det ändamål jag vill använda den till

Steg 6: Kör

kör koden i din webbläsare för att få den att fungera