Tartalomjegyzék:
- Kellékek
- 1. lépés: Szerezze be a szövegszerkesztőt
- 2. lépés: Töltse le a Die Faces -t
- 3. lépés: Indítsa el a kódolást
- 4. lépés:
- 5. lépés: Használja a Var és Math funkciót
- 6. lépés: Fuss
Videó: Egyszerű véletlenszerű virtuális kockák kódolása: 6 lépés
2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:40
Sziasztok!!!!! Ez az első utasításom, és megtanítom, hogyan kell kódolni egy virtuális kockát a számítógépén vagy okostelefonján. HTML -t, JavaScriptet és CSS -t használok, remélem, mindenkinek tetszeni fog, és ne felejtse el szavazni rám az alábbi kontextusban.
Kellékek
1. Jó szövegszerkesztő okostelefonon vagy számítógépen
1. lépés: Szerezze be a szövegszerkesztőt
Itt az okostelefonomat használom szövegszerkesztőként (AnWriter). Használhatja számítógépének jegyzettömbjét is, vagy beszerezhet egy jó szövegszerkesztőt az interneten
2. lépés: Töltse le a Die Faces -t
Letöltöttem néhány kockát 1 -től 6 -ig, amelyeket ehhez a lépéshez csatolok. Tehát letöltheti kedvencét, vagy használhatja az enyémet (ingyenes).
Az enyémet a kockalapok szerint neveztem el. Vagyis:
Die_face_1.png, Die_face_2.png… és így tovább 6 -ig a jobb felismerés érdekében
3. lépés: Indítsa el a kódolást
Mentse a kódot.html fájlként
Kezdje azzal, hogy az img src használatával bevezeti a kívánt alaplapot
4. lépés:
Ezután szükségünk lesz egy gombra a kockák dobásához, ezt gombfunkció hozzáadásával végezzük
DOBOZNI
5. lépés: Használja a Var és Math funkciót
DAY DAKE
függvény 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 ("kocka"). src = di [vu-1];
document.getElementById ("dicl"). src = di [vu2-1];
}
Ez a teljes kód, tanulmányozza és tesztelje, és győződjön meg róla, hogy megkapja a fotót, hogy megkapja a hatást
És ha szüksége van a segítségemre ezzel a kóddal kapcsolatban, említse meg a megjegyzések részben
Megváltoztathatod a dizájnt, ha nem tetszik, de én inkább arra a célra használom, amire használni szeretném
6. lépés: Fuss
futtassa a kódot a böngészőben, hogy működjön
Ajánlott:
Digitális Ludo kockák Arduino 7 szegmenses megjelenítési projektjével: 3 lépés
Digitális Ludo kockák az Arduino 7 szegmenses megjelenítési projektjével: Ebben a projektben a 7 szegmenses kijelzőt 1-6 közötti szám véletlenszerű megjelenítésére használják, amikor megnyomjuk a nyomógombot. Ez az egyik legmenőbb projekt, amelyet mindenki szívesen készít. A 7 szegmenses kijelzővel való munka megismeréséhez kattintson ide: -7 segme
Egyszerű Playdoh formák kódolása W/ P5.js és Makey Makey: 7 lépés
Egyszerű Playdoh alakzatok kódolása W/ P5.js és Makey Makey: Ez egy fizikai számítástechnikai projekt, amely lehetővé teszi, hogy Playdoh -val alakzatot hozzon létre, amely kódot alakít ki a p5.js használatával, és kiváltja az alak megjelenését a számítógép képernyőjén a Playdoh megérintésével Makey Makey.p5.js egy nyílt forráskódú webes b
Elektromos többszörös csiszolt kockák: 3 lépés
Elektromos többszörös kockás kocka: Sok projekt tanítja meg, hogyan kell elektromos vagy LED -es kockákat készíteni az oktatható webhelyen, de ez a projekt más, ez az elektromos kocka különböző méretű csiszolásra állítható be. Saját maga választhatja meg a kockák oldalát
Színes LED Arduino kockák készítése: 8 lépés
Hogyan készítsünk színes LED -es Arduino kockát: Ebben az oktatóanyagban megtanulhatja, hogyan kell felépíteni egy színes LED Arduino kockát, amelyet egy gombnyomással „fel lehet dobni”. Elmagyarázom, hogyan kell felépíteni az Arduino -t, és hogyan kell kódolni. Ez egy meglehetősen egyszerű oktatóanyag azoknak, akik az elején vannak
Halmozható LED-kockák (RGB): 11 lépés
Stack-Able LED Cubes (RGB): Ezt a projektet a make it glow verseny 2018. számára készítettem. Az ötlet az, hogy ez lenne az alap, ahol kis LED-kockákat helyezhetne fel, és világíthatnak. Mágnesek használatával összeragadnának