Grafisk roulette med Obniz: 5 steg
Grafisk roulette med Obniz: 5 steg

Innehållsförteckning:

Anonim
Image
Image

Jag har gjort en grafisk roulette. Om du trycker på knappen börjar roulette rulla. Om du trycker igen slutar roulette rulla och piper!

Steg 1: Krets

Rotera Rulette -bild
Rotera Rulette -bild

Vi använder bara en trådbunden högtalare och en knapp.

Stiftnumren för kabeldragna skrivs på programmet.

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

Steg 2: Rotera Rulette -bild

I HTML kan du använda "CSS -transform". Till exempel är detta koden för roterande bild 90 grader.

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

För att börja och sluta rotera långsamt, lägg till en var -hastighet för rotationsgrad per ram.

låt hastighet = 0; låt deg = 0; funktion rotera () {deg += hastighet; document.getElementById ("roulette"). style = "transform: rotate ("+deg+"deg);";

}

setInterval (rotera, 10);

Steg 3: pip

Vill du pipa på roulette ingen förändring? Med detta kan du peka på 440Hz 10ms.

högtalare. spel (440); vänta obniz.wait (10); speaker.stop ();

Så här vet du om byte av roulette nr.

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

Så det här är koden för rotera och pipa.

låt hastighet = 0; låt deg = 0; funktion rotera () {// vid ändringsvärde if (Math.floor ((deg + speed) /(360 /7.0)) - Math.floor (deg /(360 /7.0))> = 1) {onRouletteChange (); } deg += hastighet; document.getElementById ("roulette"). style = "transform: rotate ("+deg+"deg);";

}

setInterval (rotera, 10);

async -funktion onRouletteChange () {

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

Steg 4: Starta på knappen tryckt

För att veta knappstatus, lägg till var buttonStat och inställt värde för det aktuella knappläget.

button.onchange = funktion (nedtryckt) {buttonState = nedtryckt; };

Och även lägga till var fas för nuvarande tillstånd av roulette.phase är inställt en av detta.

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

Till exempel när fasen är PHASE_WAIT_FOR_START och du vill ta nästa fas.

om (fas == PHASE_WAIT_FOR_START) {hastighet = 0; if (buttonState) {phase = PHASE_ROTATE; }}

För att påskynda ruletten, ändra var hastighet.

om (fas == PHASE_ROTATE) {hastighet = hastighet+0,5; }

För att påskynda ruletten, ändra var hastighet.

:

if (phase == PHASE_STOPPING) {speed = speed-0.2; }

De är en del av roulette. Låt oss göra det!

Steg 5: Program

Se programmet här