Grafická ruleta s Obniz: 5 kroků
Grafická ruleta s Obniz: 5 kroků

Obsah:

Anonim
Image
Image

Vytvořil jsem grafickou ruletu. Pokud stisknete tlačítko, ruleta se začne otáčet. Pokud znovu stisknete, ruleta se přestane otáčet a pípne!

Krok 1: Okruh

Otočit obrázek rulety
Otočit obrázek rulety

Používáme pouze kabelový reproduktor a tlačítko.

Čísla pinů kabelových jsou zapsána v programu.

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

Krok 2: Otočení obrázku rulety

V HTML můžete použít „transformaci CSS“. Jedná se například o kód otočení obrázku o 90 stupňů.

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

Chcete -li pomalu otáčet a zastavovat, přidejte var rychlost pro stupeň otáčení na snímek.

nechť rychlost = 0; nechť deg = 0; funkce rotate () {deg += rychlost; document.getElementById ("ruleta"). style = "transform: rotate ("+deg+"deg);";

}

setInterval (rotace, 10);

Krok 3: Pípnutí

Chcete pípnout na ruletě beze změny? Díky tomu můžete pípat na 440Hz 10ms.

reproduktor.play (440); čekejte obniz.wait (10); reproduktor.stop ();

Takto poznáte změnu rulety č.

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

Toto je tedy kód otočení a pípnutí.

nechť rychlost = 0; nechť deg = 0; funkce rotate () {// při změně hodnoty if (Math.floor ((deg + speed) /(360 /7.0)) - Math.floor (deg /(360 /7.0))> = 1) {onRouletteChange (); } deg += rychlost; document.getElementById ("ruleta"). style = "transform: rotate ("+deg+"deg);";

}

setInterval (rotace, 10);

asynchronní funkce onRouletteChange () {

if (! reproduktor) {return;} reproduktor.play (440); čekejte obniz.wait (10); reproduktor.stop (); }

Krok 4: Začněte stisknutím tlačítka

Chcete -li zjistit stav tlačítka, přidejte var buttonStatea nastavte požadovanou hodnotu aktuálního stavu tlačítka.

button.onchange = funkce (stisknuto) {buttonState = stisknuto; };

A také přidat var fázi pro aktuální stav rulety. Phase je nastaven jeden z toho.

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

Když je například fáze PHASE_WAIT_FOR_START a chcete přejít do další fáze.

if (fáze == PHASE_WAIT_FOR_START) {rychlost = 0; if (buttonState) {phase = PHASE_ROTATE; }}

Chcete -li ruletu urychlit, změňte rychlost varu.

if (fáze == PHASE_ROTATE) {rychlost = rychlost+0,5; }

Chcete -li snížit pravítko, změňte rychlost varu.

:

if (phase == PHASE_STOPPING) {speed = speed-0.2; }

Ty jsou součástí rulety. Pojďme to zvládnout!

Krok 5: Program

Program naleznete zde