Graphical Roulette Sa Obniz: 5 Hakbang

2025 May -akda: John Day | [email protected]. Huling binago: 2025-01-23 15:13

Gumawa ako ng isang graphic na roulette. Kung pinindot mo ang pindutan, ang roulette ay nagsisimulang umiikot. Kung pinindot mo ulit, ang roleta ay hihinto sa pag-ikot at pag-beep!

Hakbang 1: Circuit

Gumagamit lamang kami ng isang wired speaker at isang pindutan.

Ang mga numero ng pin ng wired ay nakasulat sa programa.

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

Hakbang 2: Paikutin ang Larawan ng Rulette

Sa HTML, maaari mong gamitin ang "CSS transform". Halimbawa, ito ang code ng paikutin ang imahe 90 degree.

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

Upang simulan at ihinto ang paikutin nang dahan-dahan, magdagdag ng bilis ng var para sa paikutin na degree bawat frame.

hayaan ang bilis = 0; hayaan ang deg = 0; paikutin ang pagpapaandar () {deg + = bilis; document.getElementById ("roulette"). style = "transform: paikutin (" + deg + "deg);";

}

setInterval (paikutin, 10);

Hakbang 3: Beep

Nais mo bang beep sa roulette nang walang pagbabago? Sa pamamagitan nito, maaari kang beep sa 440Hz 10ms.

tagapagsalita.play (440); naghihintay sa obniz.hintay (10); tagapagsalita.stop ();

Ito kung paano malalaman sa pagbabago ng roulette no.

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

Kaya, ito ang code ng paikutin at beep.

hayaan ang bilis = 0; hayaan ang deg = 0; paikutin ang pagpapaandar () {// sa halaga ng pagbabago kung (Math.floor ((deg + bilis) / (360 / 7.0)) - Math.floor (deg / (360 / 7.0))> = 1) {onRouletteChange (); } deg + = bilis; document.getElementById ("roulette"). style = "transform: paikutin (" + deg + "deg);";

}

setInterval (paikutin, 10);

pagpapaandar ng async saRouletteChange () {

kung (! speaker) {return;} speaker.play (440); naghihintay sa obniz.hintay (10); tagapagsalita.stop (); }

Hakbang 4: Magsimula sa Button Pushed

Upang malaman ang estado ng pindutan, magdagdag ng pindutan ng varState at itakda ang halaga ng kasalukuyang estado ng pindutan.

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

At magdagdag din ng yugto ng var para sa kasalukuyang estado ng roulette.phase ay nakatakda sa isa sa mga ito.

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

Halimbawa, kung ang yugto ay PHASE_WAIT_FOR_START at nais mong susunod na yugto.

kung (phase == PHASE_WAIT_FOR_START) {bilis = 0; kung (buttonState) {phase = PHASE_ROTATE; }}

Upang mapabilis ang rulette, baguhin ang bilis ng var.

kung (phase == PHASE_ROTATE) {bilis = bilis + 0.5; }

Upang mapabilis ang rulette, baguhin ang bilis ng var.

:

kung (phase == PHASE_STOPPING) {bilis = bilis-0.2; }

Ang mga iyon ay bahagi ng roulette. Gawin natin!

Hakbang 5: Programa

Mangyaring mag-refer dito para sa programa