Graafiline rulett Obniziga: 5 sammu

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:49

Olen teinud graafilise ruleti. Kui vajutate nuppu, hakkab rulett pöörlema. Kui vajutate uuesti, lõpetab rulett pöörlemise ja piiksub!

Samm: vooluring

Kasutame ainult juhtmega kõlarit ja nuppu.

Juhtmega pin -numbrid on programmis kirjas.

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

2. samm: pöörake Rulette'i pilti

HTML -is saate kasutada "CSS -teisendust". Näiteks on see pildi 90 kraadi pööramise kood.

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

Aeglase pööramise käivitamiseks ja peatamiseks lisage pöörlemiskiiruse muutuv kiirus kaadri kohta.

las kiirus = 0; laseme deg = 0; funktsioon rotate () {deg += kiirus; document.getElementById ("rulett"). style = "transform: rotate ("+deg+"deg);";

}

setInterval (pööra, 10);

3. samm: piiks

Kas soovite ruletil piiksuda muutmata kujul? Selle abil saate piiksuda 440Hz 10ms.

kõneleja.mäng (440); oota obniz.wait (10); kõlar.peatus ();

Nii saate teada ruleti nr.

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

Niisiis, see on pööramise ja piiksumise kood.

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

}

setInterval (pööra, 10);

async funktsioon onRouletteChange () {

if (! esineja) {return;} speaker.play (440); oota obniz.wait (10); kõlar.peatus (); }

Samm: alustage nupu vajutamisega

Nupu oleku teadasaamiseks lisage var buttonState ja määrake nupu praeguse oleku väärtus.

button.onchange = funktsioon (vajutatud) {buttonState = vajutatud; };

Ja lisage ka ruleti hetkeoleku var faas. Faas on üks sellest.

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

Näiteks kui faas on PHASE_WAIT_FOR_START ja soovite järgmise faasi.

kui (faas == PHASE_WAIT_FOR_START) {kiirus = 0; if (buttonState) {faas = PHASE_ROTATE; }}

Ruletti kiirendamiseks muutke var kiirust.

if (faas == PHASE_ROTATE) {kiirus = kiirus+0,5; }

Ruletti kiirendamiseks muutke kiirust.

:

kui (faas == PÕHJAMINE) {kiirus = kiirus-0,2; }

Need on osa ruletist. Saame hakkama!

Samm: programm

Palun vaadake programmi siit