Ruleta grafică cu Obniz: 5 pași
Ruleta grafică cu Obniz: 5 pași

Cuprins:

Anonim
Image
Image

Am făcut o ruletă grafică. Dacă apăsați butonul, ruleta începe să se rotească. Dacă apăsați din nou, ruleta se oprește din rotire și emite semnale sonore!

Pasul 1: Circuit

Rotiți imaginea ruletei
Rotiți imaginea ruletei

Folosim doar un difuzor cu fir și un buton.

Numerele PIN ale cablurilor sunt scrise pe program.

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

Pasul 2: Rotiți imaginea ruletei

În HTML, puteți utiliza „CSS transform”. De exemplu, acesta este codul rotirii imaginii la 90 de grade.

document.getElementById ("ruletă"). style = "transformare: rotire (90deg);";

Pentru a porni și a opri rotirea lentă, adăugați o viteză var pentru gradul de rotire pe cadru.

lasa viteza = 0; să deg = 0; function rotate () {deg + = viteza; document.getElementById ("ruletă"). style = "transformare: rotire (" + deg + "deg);";

}

setInterval (rotire, 10);

Pasul 3: Bip

Vrei să faci un sunet la ruletă fără schimbare? Cu aceasta, puteți emite un sunet pe 440Hz 10ms.

speaker.play (440); await obniz.wait (10); speaker.stop ();

Așa se știe despre schimbarea ruletei nr.

if (Math.floor ((deg + viteză) / (360 / 7.0)) - Math.floor (deg / (360 / 7.0))> = 1) {onRouletteChange (); }

Deci, acesta este codul rotire și semnal sonor.

lasa viteza = 0; să deg = 0; function rotate () {// on change value if (Math.floor ((deg + speed) / (360 / 7.0)) - Math.floor (deg / (360 / 7.0))> = 1) {onRouletteChange (); } deg + = viteză; document.getElementById ("ruletă"). style = "transformare: rotire (" + deg + "deg);";

}

setInterval (rotire, 10);

funcția de sincronizare onRouletteChange () {

if (! speaker) {return;} speaker.play (440); await obniz.wait (10); speaker.stop (); }

Pasul 4: Porniți butonul apăsat

Pentru a cunoaște starea butonului, adăugați var buttonStat și setați valoarea stării butonului curent.

button.onchange = funcție (apăsat) {buttonState = apăsat; };

Și, de asemenea, adăugați faza var pentru starea actuală a ruletei. Faza este setată una dintre acestea.

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

De exemplu, când faza este PHASE_WAIT_FOR_START și doriți să treceți la faza următoare.

if (phase == PHASE_WAIT_FOR_START) {speed = 0; if (buttonState) {phase = PHASE_ROTATE; }}

Pentru a accelera ruleta, modificați viteza var.

if (phase == PHASE_ROTATE) {speed = speed + 0,5; }

Pentru a accelera reguleta, modificați viteza var.

:

if (phase == PHASE_STOPPING) {speed = speed-0.2; }

Acestea sunt componente ale ruletei. Hai sa o facem!

Pasul 5: Program

Vă rugăm să consultați aici programul