Ako kódovať jednoduchú náhodnú virtuálnu kocku: 6 krokov

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:57

Ahoj všetci!!!!! Toto je môj prvý pokyn a naučím vás kódovať virtuálne kocky na počítači alebo smartfóne. Používam HTML, JavaScript a CSS, dúfam, že sa vám to bude všetkým páčiť a nezabudnite mi dať svoj hlas v kontexte nižšie.

Zásoby

1. Dobrý textový editor vo vašom smartfóne alebo počítači

Krok 1: Získajte textový editor

Tu používam svoj smartphone ako textový editor (AnWriter). Môžete tiež použiť poznámkový blok počítača alebo si zaobstarať dobrý textový editor online

Krok 2: Stiahnite si Die Faces

Stiahol som si niekoľko tvárí od 1 do 6, ktoré prikladám k tomuto kroku. Môžete si teda stiahnuť ten, ktorý uprednostňujete, alebo použiť ten môj (ste zadarmo).

Svoju som pomenoval podľa tvárí. To je:

Die_face_1.png, Die_face_2.png…. A tak ďalej do 6 pre lepšie rozpoznanie

Krok 3: Začnite kódovať

Uložte kód ako súbor.html

Začnite tým, že pomocou img src predstavíte požadovanú predvolenú tvár matrice

Krok 4:

Ďalej budeme potrebovať tlačidlo na hodenie kockami, urobíme to pridaním funkcie tlačidla

ROLL DICE

Krok 5: Použite funkciu Var a matematika

ROZKRASNÚŤ KOSTKY

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

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

}

Toto je úplný kód, preštudujte si ho, otestujte a uistite sa, že získate fotografiu, aby ste dosiahli efekt

A ak potrebujete moju pomoc s týmto kódom, uveďte to v sekcii komentárov

Dizajn môžete zmeniť, ak sa vám nepáči, ale ja ho preferujem na účel, na ktorý ho chcem použiť

Krok 6: Spustite

spustite kód vo svojom prehliadači, aby fungoval