Ruletë grafike me Obniz: 5 hapa
Ruletë grafike me Obniz: 5 hapa

Përmbajtje:

Anonim
Image
Image

Unë kam bërë një ruletë grafike. Nëse shtypni butonin, ruleta fillon të rrotullohet. Nëse shtypni përsëri, ruleta ndalon të rrotullohet dhe bip!

Hapi 1: Qarku

Rrotulloni imazhin e Ruletës
Rrotulloni imazhin e Ruletës

Ne përdorim vetëm një altoparlant me tela dhe një buton.

Numrat pin të kabllove shkruhen në program.

butoni = obniz.wired ("Button", {sinjali: 6, gnd: 7}); altoparlanti = obniz.wired ("Altoparlanti", {sinjali: 0, gnd: 1});

Hapi 2: Rrotulloni imazhin e Ruletës

Në HTML, mund të përdorni "CSS transform". Për shembull, ky është kodi i imazhit të rrotulluar 90 gradë.

document.getElementById ("ruletë"). style = "transformo: rrotullo (90 gradë);";

Për të filluar dhe ndaluar rrotullimin ngadalë, shtoni një shpejtësi var për shkallën e rrotullimit për kuadër.

le shpejtësi = 0; le deg = 0; funksioni rrotullohet () {deg += shpejtësia; document.getElementById ("ruletë"). style = "transformo: rrotullo ("+deg+"deg);";

}

setInterval (rrotullohet, 10);

Hapi 3: Beip

Dëshironi të bini në ruletë pa ndryshim? Me këtë, ju mund të bini në 440Hz 10ms.

folës.luani (440); pres obniz.prit (10); altoparlanti.stop ();

Kjo është se si të dini për ndryshimin e ruletës nr.

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

Pra, ky është kodi i rrotullimit dhe sinjalit.

le shpejtësi = 0; le deg = 0; funksioni rrotullohet () {// në ndryshimin e vlerës nëse (Math.floor ((deg + shpejtësia) /(360 /7.0)) - Math.floor (deg /(360 /7.0))> = 1) {onRouletteChange (); } deg += shpejtësia; document.getElementById ("ruletë"). style = "transformo: rrotullo ("+deg+"deg);";

}

setInterval (rrotullohet, 10);

funksion async onRouletteChange () {

nëse (! altoparlanti) {kthehuni}} altoparlanti.luani (440); pres obniz.prit (10); altoparlanti.stop (); }

Hapi 4: Filloni me butonin e shtyrë

Për të ditur gjendjen e butonit, shtoni butonin varState dhe vendosni vlerën e gjendjes aktuale të butonit.

button.onchange = funksion (i shtypur) {buttonState = i shtypur; };

Dhe gjithashtu shtoni fazën var për gjendjen aktuale të ruletës. Faza është vendosur një nga këto.

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

Për shembull, kur faza është PHASE_WAIT_FOR_START dhe dëshironi të kaloni në fazën tjetër.

nëse (faza == PHASE_WAIT_FOR_START) {shpejtësia = 0; nëse (buttonState) {faza = PHASE_ROTATE; }}

Për të shpejtuar ruletën, ndryshoni shpejtësinë var.

nëse (faza == PHASE_ROTATE) {shpejtësia = shpejtësia+0.5; }

Për të shpejtuar ruletën, ndryshoni shpejtësinë var.

:

nëse (faza == PHASE_STOPPING) {shpejtësia = shpejtësia-0.2; }

Ato janë përbërëse të ruletës. Ja dalim mbanë!

Hapi 5: Programi

Ju lutemi referojuni këtu për programin