Grafički rulet sa Obnizom: 5 koraka
Grafički rulet sa Obnizom: 5 koraka

Sadržaj:

Anonim
Image
Image

Napravio sam grafički rulet. Ako pritisnete gumb, rulet se počinje okretati. Ako ponovo pritisnete, rulet se prestaje okretati i oglašava se zvučni signal!

Korak 1: Krug

Rotirajte sliku rulete
Rotirajte sliku rulete

Koristimo samo žičani zvučnik i dugme.

PIN brojevi ožičenih su zapisani u programu.

button = obniz.wired ("Dugme", {signal: 6, gnd: 7}); zvučnik = obniz.wired ("Zvučnik", {signal: 0, gnd: 1});

Korak 2: Rotirajte sliku rulete

U HTML -u možete koristiti "CSS transformaciju". Na primjer, ovo je kod za rotiranje slike za 90 stepeni.

document.getElementById ("rulet"). style = "transformacija: rotacija (90 stepeni);";

Da biste pokrenuli i zaustavili rotiranje polako, dodajte promjenjivu brzinu za stepen rotiranja po kadru.

neka brzina = 0; neka je deg = 0; funkcija rotate () {deg += brzina; document.getElementById ("roulette"). style = "transform: rotate ("+deg+"deg);";

}

setInterval (rotiranje, 10);

Korak 3: Zvučni signal

Želite li piskati na ruletu bez promjene? Ovim možete pisati na 440Hz 10ms.

spiker.play (440); await obniz.wait (10); speaker.stop ();

Ovako znate o promjeni ruleta br.

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

Dakle, ovo je kod rotacije i zvučnog signala.

neka brzina = 0; neka je deg = 0; funkcija rotate () {// na promjenu vrijednosti if (Math.floor ((deg + speed) /(360 /7.0)) - Math.floor (deg /(360 /7.0))> = 1) {onRouletteChange (); } deg += brzina; document.getElementById ("roulette"). style = "transform: rotate ("+deg+"deg);";

}

setInterval (rotiranje, 10);

async funkcija onRouletteChange () {

if (! zvučnik) {return;} speaker.play (440); await obniz.wait (10); speaker.stop (); }

Korak 4: Počnite pritiskom na dugme

Da biste saznali stanje dugmeta, dodajte var buttonState i postavite vrijednost trenutnog stanja dugmeta.

button.onchange = function (pritisnuto) {buttonState = pritisnuto; };

I takođe dodajte var fazu za trenutno stanje roulette.phase je postavljeno jedno od ovoga.

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

Na primjer, kada je faza PHASE_WAIT_FOR_START i želite preći na sljedeću fazu.

if (faza == PHASE_WAIT_FOR_START) {brzina = 0; if (buttonState) {faza = PHASE_ROTATE; }}

Da biste ubrzali rulet, promijenite brzinu var.

if (faza == PHASE_ROTATE) {brzina = brzina+0,5; }

Da biste ubrzali rulet, promijenite brzinu var.

:

if (faza == PHASE_STOPPING) {brzina = brzina-0,2; }

To su komponente ruleta. Uspjet ćemo!

Korak 5: Program

Ovdje pogledajte program