Roulette grafica con Obniz: 5 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:03

Ho creato una roulette grafica. Se premi il pulsante, la roulette inizia a ruotare. Se premi di nuovo, la roulette smette di ruotare e emette un segnale acustico!

Passaggio 1: circuito

Usiamo solo un altoparlante cablato e un pulsante.

I numeri dei pin dei cablati sono scritti sul programma.

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

Passaggio 2: ruota l'immagine della regola

In HTML, puoi usare "Trasformazione CSS". Ad esempio, questo è il codice per ruotare l'immagine di 90 gradi.

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

Per avviare e interrompere la rotazione lentamente, aggiungere una velocità var per il grado di rotazione per fotogramma.

lasciare velocità = 0; sia gradi = 0; funzione ruotare(){ gradi += velocità; document.getElementById("roulette").style = "transform:rotate("+deg+"deg);";

}

setInterval(ruota, 10);

Passaggio 3: segnale acustico

Vuoi suonare alla roulette senza cambiare? Con questo, puoi emettere un segnale acustico a 440Hz 10ms.

altoparlante.play(440); attendi obniz.wait(10); altoparlante.stop();

Ecco come sapere sul cambio della roulette n.

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

Quindi, questo è il codice di rotazione e segnale acustico.

lasciare velocità = 0; sia gradi = 0; function rotate(){ //al cambio valore if(Math.floor((deg + speed) / (360/7.0)) - Math.floor(deg / (360/7.0)) >= 1){ onRouletteChange(); } gradi += velocità; document.getElementById("roulette").style = "transform:rotate("+deg+"deg);";

}

setInterval(ruota, 10);

funzione asincrona onRouletteChange(){

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

Passaggio 4: avvia premendo il pulsante

Per conoscere lo stato del pulsante, aggiungere var buttonState e impostare il valore dello stato corrente del pulsante.

button.onchange = function(pressed){ buttonState = premuto; };

E aggiungi anche var phase per lo stato attuale della roulette.phase è impostato su uno di questi.

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

Ad esempio, quando la fase è PHASE_WAIT_FOR_START e si desidera la fase successiva.

if(fase == PHASE_WAIT_FOR_START){ velocità = 0; if(Statopulsante){ fase = PHASE_ROTATE; } }

Per velocizzare le regole, cambia var speed.

if(fase == PHASE_ROTATE){ velocità = velocità+0,5; }

Per velocizzare la regola, cambia var speed.

:

if(fase == FASE_ARRESTO){ velocità = velocità-0.2; }

Questi sono componenti della roulette. Facciamolo!

Passaggio 5: programma

Si prega di fare riferimento qui per il programma