Jak zakodować prostą losową wirtualną kostkę: 6 kroków
Jak zakodować prostą losową wirtualną kostkę: 6 kroków

Spisu treści:

Anonim
Jak zakodować prostą losową wirtualną kostkę?
Jak zakodować prostą losową wirtualną kostkę?

Cześć wszystkim!!!!! To jest moja pierwsza instrukcja i nauczę Cię, jak kodować wirtualną kostkę na komputerze lub smartfonie. Używam HTML, JavaScript i CSS, mam nadzieję, że wszystkim się spodoba i nie zapomnijcie zagłosować na mnie w poniższym kontekście.

Kieszonkowe dzieci

1. Dobry edytor tekstu na smartfonie lub komputerze!

Krok 1: Pobierz edytor tekstu

Tutaj używam mojego smartfona jako edytora tekstu (AnWriter). Możesz też skorzystać z notatnika na swoim komputerze lub zaopatrzyć się w dobry edytor tekstu online

Krok 2: Pobierz Die Faces

Pobierz Die Faces
Pobierz Die Faces
Pobierz Die Faces
Pobierz Die Faces
Pobierz Die Faces
Pobierz Die Faces

Pobrałem kilka twarzy matryc od 1 do 6, które dołączam do tego kroku. Możesz więc pobrać preferowany lub użyć mojego (jesteś wolny).

Nazwałem moje zgodnie z twarzami kości. To jest:

Die_face_1.png, Die_face_2-p.webp

Krok 3: Rozpocznij kodowanie

Zapisz kod jako plik.html

Zacznij od wprowadzenia domyślnej powierzchni matrycy, którą chcesz, używając img src

Krok 4:

Następnie będziemy potrzebować przycisku do rzucania kostką, robimy to, dodając funkcję przycisku

RZUĆ KOŚCIĄ

Krok 5: Użyj funkcji Var i Math

Użyj funkcji Var i matematyki
Użyj funkcji Var i matematyki

WSTRZĄŚNIJ KOŚCIĄ

funkcja getRand(){

var vu=Matematyka.podłoga(Matematyka.losowa()*6)+1;

var vu2=Matematyka.podłoga(Matematyka.losowa()*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("kostka").src= di[vu-1];

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

}

To jest pełny kod, przestudiuj go i przetestuj i upewnij się, że otrzymasz zdjęcie, aby uzyskać efekt

A jeśli potrzebujesz mojej pomocy w sprawie tego kodu, wspomnij o tym w sekcji komentarzy

Możesz zmienić projekt, jeśli ci się nie podoba, ale wolę go do celu, w którym chcę go użyć

Krok 6: Uruchom

uruchom kod w przeglądarce, aby działał