Grafična ruleta z Obnizom: 5 korakov
Grafična ruleta z Obnizom: 5 korakov

Kazalo:

Anonim
Image
Image

Naredil sem grafično ruleto. Če pritisnete gumb, se ruleta začne vrteti. Če znova pritisnete, se ruleta neha vrteti in piska!

1. korak: Vezje

Zavrtite sliko Rulette
Zavrtite sliko Rulette

Uporabljamo samo žični zvočnik in gumb.

Številke žičnih žic so zapisane v programu.

button = obniz.wired ("Gumb", {signal: 6, gnd: 7}); zvočnik = obniz.wired ("Zvočnik", {signal: 0, gnd: 1});

2. korak: Zavrtite sliko rulete

V HTML -ju lahko uporabite "CSS transform". To je na primer koda zasuka slike za 90 stopinj.

document.getElementById ("ruleta"). style = "pretvori: vrti (90 stopinj);";

Za zagon in ustavitev počasnega vrtenja dodajte hitrost var za stopnjo vrtenja na okvir.

naj bo hitrost = 0; naj bo deg = 0; funkcija rotate () {deg += hitrost; document.getElementById ("ruleta"). style = "transform: rotate ("+deg+"deg);";

}

setInterval (sukanje, 10);

3. korak: pisk

Ali želite piskati na ruleti brez sprememb? S tem lahko piskate na 440Hz 10ms.

zvočnik.igra (440); čakati obniz.wait (10); speaker.stop ();

Tako veste o menjavi rulete št.

if (Math.floor ((stop. + hitrost) / (360 / 7,0)) - Math.floor (stop. / (360 / 7,0))> = 1) {onRouletteChange (); }

Torej, to je koda rotacije in piska.

naj bo hitrost = 0; naj bo deg = 0; funkcija rotate () {// pri spremembi vrednosti if (Math.floor ((deg + speed) /(360 /7.0)) - Math.floor (deg /(360 /7.0))> = 1) {onRouletteChange (); } deg += hitrost; document.getElementById ("ruleta"). style = "transform: rotate ("+deg+"deg);";

}

setInterval (sukanje, 10);

funkcija async onRouletteChange () {

if (! zvočnik) {return;} speaker.play (440); čakati obniz.wait (10); speaker.stop (); }

4. korak: Začnite s pritiskom na gumb

Če želite vedeti stanje gumba, dodajte var buttonState in nastavite vrednost trenutnega stanja gumba.

button.onchange = function (pritisnjeno) {buttonState = pritisnjeno; };

Dodamo tudi fazo var za trenutno stanje rulete.faza je ena od teh.

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

Na primer, ko je faza PHASE_WAIT_FOR_START in želite naslednjo fazo.

if (faza == PHASE_WAIT_FOR_START) {hitrost = 0; if (buttonState) {faza = PHASE_ROTATE; }}

Za pospešitev rulete spremenite hitrost var.

if (faza == PHASE_ROTATE) {hitrost = hitrost+0,5; }

Za pospešitev rulete spremenite hitrost var.

:

if (faza == PHASE_STOPPING) {hitrost = hitrost-0,2; }

To so sestavni deli rulete. Naj nam uspe!

5. korak: Program

Program najdete tukaj