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

Sadržaj:

Anonim
Image
Image

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

Korak 1: Krug

Okreni sliku rulete
Okreni sliku rulete

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

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

button = obniz.wired ("Button", {signal: 6, gnd: 7}); speaker = 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 zakretanja slike za 90 stupnjeva.

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

Za pokretanje i zaustavljanje rotirajte polako, dodajte promjenjivu brzinu za stupanj rotiranja po kadru.

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

}

setInterval (zakretanje, 10);

Korak 3: Zvučni signal

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

zvučnik.igra (440); čekati obniz.čekati (10); spiker.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 je 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 ("rulet"). style = "transformirati: rotirati ("+deg+"deg);";

}

setInterval (zakretanje, 10);

funkcija async onRouletteChange () {

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

Korak 4: Počnite s pritiskom na gumb

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

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

Također dodajte varijabilnu fazu za trenutno stanje ruleta. Faza je postavljena kao 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 prijeć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 promjenu brzine.

:

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

Oni su sastavni dio ruleta. Uspjet ćemo!

Korak 5: Program

Ovdje pogledajte program