Graphical Roulette Sa Obniz: 5 Hakbang
Graphical Roulette Sa Obniz: 5 Hakbang

Talaan ng mga Nilalaman:

Anonim
Image
Image

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

Paikutin ang Larawan ng Rulette
Paikutin ang Larawan ng Rulette

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