Ruletka graficzna z Obnizem: 5 kroków
Ruletka graficzna z Obnizem: 5 kroków

Spisu treści:

Anonim
Image
Image

Zrobiłem ruletkę graficzną. Jeśli naciśniesz przycisk, ruletka zacznie się obracać. Jeśli naciśniesz ponownie, ruletka przestanie się obracać i wyda sygnał dźwiękowy!

Krok 1: Obwód

Obróć obraz ruletki
Obróć obraz ruletki

Używamy tylko przewodowego głośnika i przycisku.

Numery pinów przewodowych są zapisywane w programie.

button = obniz.wired("Przycisk", {sygnał:6, gnd:7 });głośnik = obniz.wired("Głośnik", {sygnał:0, gnd: 1});

Krok 2: Obróć obraz Ruletki

W HTML możesz użyć "przekształcenia CSS". Na przykład jest to kod obracania obrazu o 90 stopni.

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

Aby rozpocząć i zatrzymać powolne obracanie, dodaj prędkość var dla stopnia obrotu na klatkę.

niech prędkość = 0; niech stopnie = 0; funkcja obracania(){ stopni += prędkość; document.getElementById("roulette").style = "transform:rotate("+deg+"deg);";

}

setInterval(obróć, 10);

Krok 3: Sygnał dźwiękowy

Czy chcesz wydać sygnał dźwiękowy na ruletce bez zmian? Dzięki temu możesz emitować sygnał dźwiękowy przy 440 Hz 10 ms.

głośnik.odtwórz(440); czekaj obniz.wait(10); głośnik.stop();

Oto jak poznać na zmianie ruletki nr.

if(Matem.podłoga((stopnie + prędkość) / (360/7,0)) - Matematyka.podłoga(stopnie / (360/7,0)) >= 1){ onRouletteChange(); }

To jest kod rotacji i sygnału dźwiękowego.

niech prędkość = 0; niech stopnie = 0; function rotate(){ //przy zmianie wartości if(Math.floor((stopnie + prędkość) / (360/7.0)) - Math.floor(stopnie / (360/7.0)) >= 1){ onRouletteChange(); } stopni += prędkość; document.getElementById("roulette").style = "transform:rotate("+deg+"deg);";

}

setInterval(obróć, 10);

funkcja asynchroniczna onRouletteChange(){

if(!speaker){return;} speaker.play(440); czekaj obniz.wait(10); głośnik.stop(); }

Krok 4: Rozpocznij po naciśnięciu przycisku

Aby poznać stan przycisku, dodaj var buttonStatei ustaw wartość bieżącego stanu przycisku.

button.onchange = funkcja(wciśnięty){ buttonState = wciśnięty; };

A także dodaj zmienną fazę dla bieżącego stanu ruletki. Faza jest ustawiona na jedną z nich.

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

Na przykład, gdy faza to PHASE_WAIT_FOR_START i chcesz przejść do następnej fazy.

if(faza == PHASE_WAIT_FOR_START){ prędkość = 0; if(buttonState){ faza = PHASE_ROTATE; } }

Aby przyspieszyć działanie reguły, zmień var speed.

if(faza == PHASE_ROTATE){ prędkość = prędkość+0,5; }

Aby przyspieszyć działanie reguły, zmień var speed.

:

if(faza == PHASE_STOPPING){ prędkość = prędkość-0,2; }

To są składniki ruletki. Zróbmy to!

Krok 5: Program

Proszę odnieść się tutaj do programu