Grafisch roulette met Obniz - Ajarnpa

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:18

Ik heb een grafische roulette gemaakt. Als je op de knop drukt, begint de roulette te draaien. Als u nogmaals op drukt, stopt de roulette met draaien en piept!

Stap 1: Circuit

We gebruiken alleen een bedrade luidspreker en een knop.

De pinnummers van bedraad staan op het programma.

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

Stap 2: Rulette-afbeelding roteren

In HTML kunt u "CSS-transformatie" gebruiken. Dit is bijvoorbeeld de code om de afbeelding 90 graden te draaien.

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

Om langzaam roteren te starten en te stoppen, voegt u een var-snelheid toe voor rotatiegraad per frame.

laat snelheid = 0; laat graden = 0; functie roteren(){ deg += snelheid; document.getElementById("roulette").style = "transform:rotate("+deg+"deg);";

}

setInterval(roteren, 10);

Stap 3: Piep

Wil je bij de roulette geen verandering piepen? Hiermee kun je piepen op 440Hz 10ms.

luidspreker.afspelen(440); wacht obniz.wait(10); spreker.stop();

Dit is hoe u te weten komt bij het veranderen van roulette nr.

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

Dit is dus de code van draaien en piepen.

laat snelheid = 0; laat graden = 0; functie roteren(){ //bij wijzigingswaarde if(Math.floor((deg + snelheid) / (360/7.0)) - Math.floor(deg / (360/7.0)) >= 1){ onRouletteChange(); } graden += snelheid; document.getElementById("roulette").style = "transform:rotate("+deg+"deg);";

}

setInterval(roteren, 10);

asynchrone functie onRouletteChange(){

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

Stap 4: Start op knop ingedrukt

Om de knopstatus te kennen, voegt u var buttonState toe en stelt u de waarde van de huidige knopstatus in.

button.onchange = functie (ingedrukt){ buttonState = ingedrukt; };

En voeg ook var-fase toe voor de huidige staat van roulette. Phase is een van deze.

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

Als fase bijvoorbeeld PHASE_WAIT_FOR_START is en u naar de volgende fase wilt gaan.

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

Wijzig var speed om de rulette te versnellen.

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

Wijzig var speed om de rulette te versnellen.

:

if (fase == FASE_STOPPING){ snelheid = snelheid-0,2; }

Die zijn onderdeel van roulette. Laten we het maken!

Stap 5: Programma

Kijk hier voor het programma