Graafinen ruletti Obnizilla: 5 vaihetta
Graafinen ruletti Obnizilla: 5 vaihetta

Sisällysluettelo:

Anonim
Image
Image

Olen tehnyt graafisen ruletin. Jos painat painiketta, ruletti alkaa pyöriä. Jos painat uudelleen, ruletti lakkaa pyörimästä ja piippaa!

Vaihe 1: Piiri

Kierrä Rulette -kuvaa
Kierrä Rulette -kuvaa

Käytämme vain langallista kaiutinta ja painiketta.

Langallisten pin -numerot on kirjoitettu ohjelmaan.

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

Vaihe 2: Kierrä Rulette -kuvaa

HTML: ssä voit käyttää "CSS -muunnosta". Tämä on esimerkiksi kuvan kääntämiskoodi 90 astetta.

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

Aloita ja lopeta pyörittäminen hitaasti lisäämällä vaihteleva kierrosluku kierroslukua kohti.

anna nopeuden = 0; anna deg = 0; toiminto rotate () {deg += nopeus; document.getElementById ("ruletti"). style = "transform: rotate ("+deg+"deg);";

}

setInterval (kierrä, 10);

Vaihe 3: Äänimerkki

Haluatko äänimerkin ruletissa ilman muutosta? Tällä voit piipata 440 Hz 10 ms.

kaiutin. pelata (440); odota obniz.wait (10); kaiutin.pysäytä ();

Näin tiedät ruletin nro.

if (Matematiikkalattia ((aste + nopeus) / (360 / 7,0)) - Matematiikkalattia (aste / (360 / 7,0))> = 1) {onRouletteChange (); }

Joten tämä on kierto- ja piippauskoodi.

anna nopeuden = 0; anna deg = 0; function rotate () {// on change value if (Math.floor ((deg + speed) /(360 /7.0)) - Math.floor (deg /(360 /7.0))> = 1) {onRouletteChange (); } deg += nopeus; document.getElementById ("ruletti"). style = "transform: rotate ("+deg+"deg);";

}

setInterval (kierrä, 10);

async -toiminto onRouletteChange () {

if (! kaiutin) {return;} kaiutin.pelata (440); odota obniz.wait (10); kaiutin.pysäytä (); }

Vaihe 4: Aloita painikkeen painaminen

Jos haluat tietää painikkeen tilan, lisää var buttonStateja aseta nykyisen painikkeen tilan arvo.

button.onchange = toiminto (painettu) {buttonState = painettu; };

Ja lisää myös var -vaihe ruletin nykyiseen tilaan. Vaihe on asetettu tähän.

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

Esimerkiksi, kun vaihe on PHASE_WAIT_FOR_START ja haluat siirtyä seuraavaan vaiheeseen.

jos (vaihe == PHASE_WAIT_FOR_START) {nopeus = 0; if (buttonState) {phase = PHASE_ROTATE; }}

Nopeuta ruletti muuttamalla muuttujan nopeutta.

if (vaihe == PHASE_ROTATE) {nopeus = nopeus+0,5; }

Voit nopeuttaa ruletin vaihtamista vaihtamalla nopeutta.

:

jos (vaihe == VAIHE PYSÄYTYS) {nopeus = nopeus-0,2; }

Ne ovat osa rulettia. Selvitetään!

Vaihe 5: Ohjelmoi

Katso ohjelma täältä