Grafická ruleta s rozpoznaním: 5 krokov
Grafická ruleta s rozpoznaním: 5 krokov

Obsah:

Anonim
Image
Image

Vytvoril som grafickú ruletu. Ak stlačíte tlačidlo, ruleta sa začne otáčať. Ak znova stlačíte, ruleta sa prestane otáčať a pípne!

Krok 1: Okruh

Otočiť obrázok rulety
Otočiť obrázok rulety

Používame iba káblový reproduktor a tlačidlo.

V programe sú zapísané čísla pinov káblových rozvodov.

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

Krok 2: Otočte obrázok rulety

V HTML môžete použiť „transformáciu CSS“. Toto je napríklad kód otočenia obrázku o 90 stupňov.

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

Ak chcete otáčanie začať a zastaviť pomaly, pridajte rýchlosť varu pre stupeň otáčania na snímku.

nech rýchlosť = 0; nech deg = 0; funkcia rotácia () {deg += rýchlosť; document.getElementById ("ruleta"). style = "transformácia: rotácia ("+deg+"deg);";

}

setInterval (otočenie, 10);

Krok 3: Pípnutie

Chcete pípnuť na rulete bez zmeny? Vďaka tomu môžete pípať pri 440 Hz 10 ms.

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

Takto sa dozviete pri zmene rulety č.

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

Toto je kód otočenia a pípnutia.

nech rýchlosť = 0; nech deg = 0; funkcia rotate () {// pri zmene hodnoty if (Math.floor ((deg + speed) /(360 /7.0)) - Math.floor (deg /(360 /7.0))> = 1) {onRouletteChange (); } deg += rýchlosť; document.getElementById ("ruleta"). style = "transformácia: rotácia ("+deg+"deg);";

}

setInterval (otočenie, 10);

asynchrónna funkcia onRouletteChange () {

if (! reproduktor) {návrat;} reproduktor.play (440); čakať obniz.wait (10); reproduktor.stop (); }

Krok 4: Začnite stlačením tlačidla

Ak chcete poznať stav tlačidla, pridajte var buttonStatea nastavte požadovanú hodnotu aktuálneho stavu tlačidla.

button.onchange = funkcia (stlačené) {buttonState = stlačené; };

A tiež pridať var fázu pre aktuálny stav rulety.phase je nastavený jeden z toho.

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

Keď je napríklad fáza PHASE_WAIT_FOR_START a chcete prejsť do ďalšej fázy.

if (fáza == PHASE_WAIT_FOR_START) {rýchlosť = 0; if (buttonState) {phase = PHASE_ROTATE; }}

Ak chcete urýchliť pravítko, zmeňte rýchlosť varu.

if (fáza == PHASE_ROTATE) {rýchlosť = rýchlosť+0,5; }

Ak chcete skrátiť pravidlo, zmeňte rýchlosť varu.

:

if (fáza == PHASE_STOPPING) {rýchlosť = rýchlosť-0,2; }

Sú súčasťou rulety. Poďme na to!

Krok 5: Program

Program nájdete tu