Grafisk rulett med Obniz: 5 trinn
Grafisk rulett med Obniz: 5 trinn

Innholdsfortegnelse:

Anonim
Image
Image

Jeg har laget en grafisk roulette. Hvis du trykker på knappen, begynner roulette å rotere. Hvis du trykker igjen, slutter roulette å rotere og piper!

Trinn 1: Krets

Roter rulettbilde
Roter rulettbilde

Vi bruker bare en kablet høyttaler og en knapp.

Pin -tallene til kablet er skrevet på programmet.

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

Trinn 2: Roter rulettbilde

I HTML kan du bruke "CSS -transformering". For eksempel er dette koden for rotere bildet 90 grader.

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

For å starte og stoppe rotere sakte, legg til en var -hastighet for rotasjonsgrad per ramme.

la hastighet = 0; la deg = 0; funksjon rotere () {grader += hastighet; document.getElementById ("roulette"). style = "transform: rotate ("+deg+"deg);";

}

setInterval (roter, 10);

Trinn 3: Pip

Vil du pippe på roulette uten endring? Med dette kan du pippe på 440Hz 10ms.

høyttaler.spill (440); avvente obniz.wait (10); speaker.stop ();

Slik vet du om endring av roulette no.

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

Så, dette er koden for roter og pip.

la hastighet = 0; la deg = 0; funksjon rotere () {// ved endringsverdi hvis (Math.floor ((deg + hastighet) /(360 /7.0)) - Math.floor (deg /(360 /7.0))> = 1) {onRouletteChange (); } deg += hastighet; document.getElementById ("roulette"). style = "transform: rotate ("+deg+"deg);";

}

setInterval (roter, 10);

asynkroniseringsfunksjon onRouletteChange () {

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

Trinn 4: Start på knappen Pushed

For å vite knappestatus, legg til var buttonStat og angi verdien for gjeldende knappestatus.

button.onchange = funksjon (trykket) {buttonState = presset; };

Og også legge til var fase for nåværende tilstand av roulette.phase er setted en av dette.

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

For eksempel, når fase er PHASE_WAIT_FOR_START og du vil gå til neste fase.

hvis (fase == PHASE_WAIT_FOR_START) {hastighet = 0; if (buttonState) {phase = PHASE_ROTATE; }}

For å øke hastigheten på rulette, endre var hastighet.

hvis (fase == PHASE_ROTATE) {hastighet = hastighet+0,5; }

For å få fart på ruletten, endre var -hastigheten.

:

hvis (fase == PHASE_STOPPING) {hastighet = hastighet-0,2; }

De er en del av roulette. La oss klare det!

Trinn 5: Program

Se programmet her