Roleta gráfica com Obniz: 5 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:38

Eu fiz uma roleta gráfica. Se você pressionar o botão, a roleta começa a girar. Se você pressionar novamente, a roleta para de girar e emite um sinal sonoro!

Etapa 1: Circuito

Usamos apenas um alto-falante com fio e um botão.

Os números dos pinos com fio são escritos no programa.

botão = obniz.wired ("Botão", {sinal: 6, gnd: 7}); alto-falante = obniz.wired ("Alto-falante", {sinal: 0, gnd: 1});

Etapa 2: Rotate Rulette Image

Em HTML, você pode usar "transformação CSS". Por exemplo, este é o código para girar a imagem em 90 graus.

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

Para iniciar e parar a rotação lentamente, adicione uma velocidade var para grau de rotação por quadro.

deixe velocidade = 0; deixe deg = 0; função rotate () {deg + = velocidade; document.getElementById ("roleta"). style = "transform: rotate (" + deg + "deg);";

}

setInterval (girar, 10);

Etapa 3: bip

Você quer apitar na roleta nenhuma mudança? Com isso, você pode bipar em 440Hz 10ms.

speaker.play (440); aguarde obniz.wait (10); speaker.stop ();

Veja como saber sobre a mudança da roleta no.

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

Então, esse é o código de girar e bipar.

deixe velocidade = 0; deixe deg = 0; function rotate () {// ao alterar o valor if (Math.floor ((deg + speed) / (360 / 7.0)) - Math.floor (deg / (360 / 7.0))> = 1) {onRouletteChange (); } deg + = velocidade; document.getElementById ("roleta"). style = "transform: rotate (" + deg + "deg);";

}

setInterval (girar, 10);

função assíncrona onRouletteChange () {

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

Etapa 4: Iniciar com botão pressionado

Para saber o estado do botão, adicione var buttonStateae defina o valor do estado atual do botão.

button.onchange = função (pressionado) {buttonState = pressionado; };

E também adicione a fase var para o estado atual da roleta. A fase é configurada como uma dessas.

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

Por exemplo, quando a fase é PHASE_WAIT_FOR_START e você deseja a próxima fase.

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

Para acelerar a régua, altere a velocidade var.

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

Para diminuir a velocidade da régua, altere a velocidade var.

:

if (fase == PHASE_STOPPING) {velocidade = velocidade-0,2; }

Esses são componentes da roleta. Vamos fazer isso!

Etapa 5: Programa

Consulte aqui o programa