Grafisches Roulette mit Obniz - Gunook
Grafisches Roulette mit Obniz - Gunook

Inhaltsverzeichnis:

Anonim
Image
Image

Ich habe ein grafisches Roulette gemacht. Wenn Sie die Taste drücken, beginnt sich das Roulette zu drehen. Wenn Sie erneut drücken, hört das Roulette auf zu drehen und piept!

Schritt 1: Schaltung

Rulette-Bild drehen
Rulette-Bild drehen

Wir verwenden nur einen kabelgebundenen Lautsprecher und eine Taste.

Die Pin-Nummern der verdrahteten werden in das Programm geschrieben.

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

Schritt 2: Rulette-Bild drehen

In HTML können Sie "CSS-Transformation" verwenden. Dies ist beispielsweise der Code zum Drehen des Bildes um 90 Grad.

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

Um die Drehung langsam zu starten und zu stoppen, fügen Sie eine var speed für Drehungsgrad pro Frame hinzu.

lass Geschwindigkeit = 0; sei deg = 0; Funktion rotieren () { Grad + = Geschwindigkeit; document.getElementById("roulette").style = "transform:rotate("+deg+"deg);";

}

setInterval (drehen, 10);

Schritt 3: Signalton

Willst du beim Roulette keine Veränderung piepsen? Damit können Sie auf 440Hz 10ms piepen.

Lautsprecher.play(440); warten obniz.wait(10); Lautsprecher.stop();

So erkennen Sie die Änderung der Roulette-Nr.

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

Dies ist also der Code für Rotieren und Beep.

lass geschwindigkeit = 0; sei deg = 0; Funktion rotieren () {//bei Wertänderung if (Math.floor ((Grad + Geschwindigkeit) / (360/7.0))) - Math.floor (Grad / (360/7.0)) >= 1){ onRouletteChange (); } Grad += Geschwindigkeit; document.getElementById("roulette").style = "transform:rotate("+deg+"deg);";

}

setInterval (drehen, 10);

asynchrone Funktion onRouletteChange(){

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

Schritt 4: Starten Sie bei gedrückter Taste

Um den Schaltflächenstatus zu kennen, fügen Sie var buttonState hinzu und setzen Sie den Wert des aktuellen Schaltflächenstatus.

button.onchange = Funktion (gedrückt) { buttonState = gedrückt; };

Und füge auch var phase für den aktuellen Status von Roulette hinzu.phase wird so eingestellt.

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

Zum Beispiel, wenn Phase PHASE_WAIT_FOR_START ist und Sie zur nächsten Phase möchten.

if (Phase == PHASE_WAIT_FOR_START) { Geschwindigkeit = 0; if (buttonState) { phase = PHASE_ROTATE; } }

Um Rulette zu beschleunigen, ändern Sie var speed.

if (Phase == PHASE_ROTATE) { Geschwindigkeit = Geschwindigkeit + 0,5; }

Um Rulette zu beschleunigen, ändern Sie var speed.

:

if (Phase == PHASE_STOPPING) {Geschwindigkeit = Geschwindigkeit-0,2; }

Diese sind Bestandteil des Roulettes. Lass es uns machen!

Schritt 5: Programm

Das Programm finden Sie hier