Jak kódovat jednoduchou náhodnou virtuální kostku: 6 kroků
Jak kódovat jednoduchou náhodnou virtuální kostku: 6 kroků

Obsah:

Anonim
Jak kódovat jednoduchou náhodnou virtuální kostku
Jak kódovat jednoduchou náhodnou virtuální kostku

Ahoj všichni!!!!! Toto je můj první návod a naučím vás kódovat virtuální kostky na vašem PC nebo smartphonu. Používám HTML, JavaScript a CSS, doufám, že se vám všem bude líbit a nezapomeňte pro mě hlasovat v níže uvedeném kontextu.

Zásoby

1. Dobrý textový editor na vašem chytrém telefonu nebo PC

Krok 1: Získejte textový editor

Zde používám svůj smartphone jako textový editor zde (AnWriter). Můžete také použít poznámkový blok počítače nebo si pořídit dobrý textový editor online

Krok 2: Stáhněte si Die Faces

Stáhněte si Die Faces
Stáhněte si Die Faces
Stáhněte si Die Faces
Stáhněte si Die Faces
Stáhněte si Die Faces
Stáhněte si Die Faces

Stáhl jsem si některé tváře od 1 do 6, které přikládám k tomuto kroku. Můžete si tedy stáhnout svůj preferovaný nebo použít můj (jste zdarma).

Svou jsem pojmenoval podle tváře. To je:

Die_face_1.png, Die_face_2.png…. A tak dále až do 6 pro lepší rozpoznávání

Krok 3: Začněte kódovat

Uložte kód jako soubor.html

Začněte představením výchozí požadované matrice pomocí nástroje img src

Krok 4:

Dále budeme potřebovat tlačítko k házení kostek, uděláme to přidáním funkce tlačítka

ROLL DICE

Krok 5: Použijte funkci Var a Math

Použijte funkci Var a Math
Použijte funkci Var a Math

TŘETE KOSTKAMI

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

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

}

Toto je úplný kód, prostudujte si ho a vyzkoušejte a ujistěte se, že získáte fotografii, abyste získali efekt

A pokud potřebujete moji pomoc s tímto kódem, uveďte to v sekci komentáře

Pokud se vám nelíbí, můžete změnit design, ale dávám přednost účelu, pro který ho chci použít

Krok 6: Spusťte

spusťte kód v prohlížeči, aby fungoval