Grafikus rulett Obniz -szal: 5 lépés

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:42

Készítettem egy grafikus rulettet. Ha megnyomja a gombot, a rulett forogni kezd. Ha ismét megnyomja, a rulett nem forog, és sípol!

1. lépés: Áramkör

Csak vezetékes hangszórót és gombot használunk.

A vezetékes pin számok fel vannak írva a programra.

button = obniz.wired ("Button", {signal: 6, gnd: 7}); speaker = obniz.wired ("Speaker", {signal: 0, gnd: 1});

2. lépés: Forgassa el a Rulette -képet

A HTML -ben használhatja a "CSS átalakítást". Például ez a kép 90 fokkal elforgatható kódja.

document.getElementById ("rulett"). style = "transform: rotate (90deg);";

A lassú forgatás elindításához és leállításához adjon hozzá egy fordulatszámot az elforgatási fokhoz képkockánként.

legyen sebesség = 0; legyen deg = 0; függvény rotate () {deg += sebesség; document.getElementById ("rulett"). style = "transform: rotate ("+deg+"deg);";

}

setInterval (forgatás, 10);

3. lépés: Hangjelzés

Szeretne csipogni a ruletten, nem változik? Ezzel 440 Hz -en 10 ms -on sípolhat.

hangszóró.játék (440); várni obniz.wait (10); hangszóró.stop ();

Így tudhatod meg a rulett módosítását.

if (Math.floor ((deg + sebesség) / (360 / 7.0)) - Math.floor (deg / (360 / 7.0))> = 1) {onRouletteChange (); }

Tehát ez a forgatás és sípolás kódja.

legyen sebesség = 0; legyen deg = 0; function rotate () {// on change value if (Math.floor ((deg + speed) /(360 /7.0)) - Math.floor (deg /(360 /7.0))> = 1) {onRouletteChange (); } deg += sebesség; document.getElementById ("rulett"). style = "transform: rotate ("+deg+"deg);";

}

setInterval (forgatás, 10);

async függvény onRouletteChange () {

if (! beszélő) {return;} előadó.játék (440); várni obniz.wait (10); hangszóró.stop (); }

4. lépés: Indítsa el a megnyomott gombot

A gomb állapotának megismeréséhez adja hozzá a var buttonState értéket, és állítsa be az aktuális gombállapot értékét.

button.onchange = funkció (lenyomva) {buttonState = lenyomva; };

És add hozzá a fázist a rulett jelenlegi állapotához. A fázis egyike ebből.

const PHASE_WAIT_FOR_START = 0; const PHASE_ROTATE = 1; const PHASE_STOPPING = 2; const PHASE_STOPPED = 3;

Például, ha a fázis PHASE_WAIT_FOR_START, és szeretne a következő fázisba lépni.

if (fázis == PHASE_WAIT_FOR_START) {sebesség = 0; if (buttonState) {fázis = PHASE_ROTATE; }}

A rulette felgyorsításához változtassa meg a var speedet.

if (fázis == PHASE_ROTATE) {sebesség = sebesség+0,5; }

A rulett legyorsításához változtassa meg a sebességet.

:

if (fázis == PHASE_STOPPING) {speed = speed-0.2; }

Ezek a rulett alkotóelemei. Készítsük el!

5. lépés: Programozás

Kérjük, nézze meg itt a programot