Grafiskā rulete ar Obniz: 5 soļi

2024 Autors: John Day | [email protected]. Pēdējoreiz modificēts: 2024-01-30 10:57

Esmu izveidojis grafisko ruleti. Nospiežot pogu, rulete sāk griezties. Nospiežot vēlreiz, rulete pārstāj griezties un pīkst!

1. darbība: ķēde

Mēs izmantojam tikai vadu skaļruni un pogu.

Vadu pin numuri ir ierakstīti programmā.

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

2. solis: pagrieziet Rulette attēlu

HTML var izmantot “CSS transformāciju”. Piemēram, tas ir attēla pagriešanas par 90 grādiem kods.

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

Lai sāktu un apturētu lēnu rotāciju, pievienojiet mainīga ātruma rotācijas pakāpi vienam kadram.

ļaujiet ātrumam = 0; lai deg = 0; funkcija rotate () {deg += ātrums; document.getElementById ("rulete"). style = "transform: rotate ("+deg+"deg);";

}

setInterval (pagriezt, 10);

3. darbība: pīkstiens

Vai vēlaties pīkstēt uz ruletes bez izmaiņām? Ar to jūs varat pīkstēt 440 Hz 10ms.

runātājs.spēle (440); gaidīt obniz.wait (10); skaļrunis.stop ();

Lūk, kā uzzināt par ruletes Nr.

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

Tātad, tas ir pagriešanas un pīkstiena kods.

ļaujiet ātrumam = 0; lai deg = 0; function rotate () {// on change value if (Math.floor ((deg + speed) /(360 /7.0)) - Math.floor (deg /(360 /7.0))> = 1) {onRouletteChange (); } deg += ātrums; document.getElementById ("rulete"). style = "transform: rotate ("+deg+"deg);";

}

setInterval (pagriezt, 10);

async funkcija onRouletteChange () {

ja (! runātājs) {atgriešanās;} runātājs.spēle (440); gaidīt obniz.wait (10); skaļrunis.stop (); }

4. solis: sāciet nospiest pogu

Lai uzzinātu pogas stāvokli, pievienojiet var buttonState un iestatiet pašreizējā pogas stāvokļa vērtību.

button.onchange = funkcija (nospiests) {buttonState = nospiests; };

Un arī pievienojiet var fāzi pašreizējam ruletes stāvoklim. Fāze ir iestatīta viena no šīm.

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

Piemēram, ja fāze ir PHASE_WAIT_FOR_START un vēlaties pāriet uz nākamo posmu.

ja (fāze == PHASE_WAIT_FOR_START) {ātrums = 0; if (buttonState) {fāze = PHASE_ROTATE; }}

Lai paātrinātu ruletes maiņu, mainiet ātrumu.

ja (fāze == PHASE_ROTATE) {ātrums = ātrums+0,5; }

Lai paātrinātu ruletes maiņu, mainiet ātrumu.

:

ja (fāze == PHASE_STOPPING) {ātrums = ātrums-0,2; }

Tās ir ruletes sastāvdaļa. Tiksim galā!

5. solis: programma

Lūdzu, skatiet šeit programmu