Grafinė ruletė su „Obniz“: 5 žingsniai
Grafinė ruletė su „Obniz“: 5 žingsniai

Turinys:

Anonim
Image
Image

Aš sukūriau grafinę ruletę. Jei paspausite mygtuką, ruletė pradės suktis. Jei paspausite dar kartą, ruletė nustoja suktis ir pypteli!

1 žingsnis: grandinė

Pasukti Rulette vaizdą
Pasukti Rulette vaizdą

Mes naudojame tik laidinį garsiakalbį ir mygtuką.

Laidų PIN kodai užrašyti programoje.

mygtukas = obniz.wired („Mygtukas“, {signalas: 6, gnd: 7}); garsiakalbis = obniz.wired („Pranešėjas“, {signalas: 0, gnd: 1});

2 žingsnis: pasukite „Rulette“vaizdą

HTML galite naudoti „CSS transformavimą“. Pavyzdžiui, tai yra vaizdo pasukimo 90 laipsnių kampu kodas.

document.getElementById ("ruletė"). style = "transformuoti: pasukti (90 laipsnių);";

Jei norite pradėti ir sustabdyti sukimąsi lėtai, pridėkite skirtingą sukimosi greitį, kad būtų galima pasukti vieną kadrą.

tegul greitis = 0; tegul deg = 0; funkcija rotate () {deg += greitis; document.getElementById ("ruletė"). style = "transform: rotate ("+deg+"deg);";

}

setInterval (pasukti, 10);

3 žingsnis: pyptelėkite

Ar norite pyptelėti ruletėje nesikeičiant? Tokiu būdu galite pypsėti 440 Hz 10ms.

garsiakalbis.žaidimas (440); laukti obniz.laukti (10); garsiakalbis.stop ();

Štai kaip sužinoti apie ruletės Nr.

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

Taigi, tai yra sukimosi ir pyptelėjimo kodas.

tegul greitis = 0; tegul deg = 0; function rotate () {// on change value if (Math.floor ((deg + speed) /(360 /7.0)) - Math.floor (deg /(360 /7.0))> = 1) {onRouletteChange (); } deg += greitis; document.getElementById ("ruletė"). style = "transform: rotate ("+deg+"deg);";

}

setInterval (pasukti, 10);

async funkcija onRouletteChange () {

if (! garsiakalbis) {return;} speaker.play (440); laukti obniz.laukti (10); garsiakalbis.stop (); }

4 žingsnis: Pradėkite paspausdami mygtuką

Norėdami sužinoti mygtuko būseną, pridėkite var buttonState ir nustatykite dabartinės mygtuko būsenos vertę.

button.onchange = funkcija (paspausta) {buttonState = paspaustas; };

Taip pat pridėkite var fazę dabartinei ruletės būsenai. Fazė yra nustatyta viena iš šių.

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

Pavyzdžiui, kai fazė yra PHASE_WAIT_FOR_START ir norite pereiti į kitą etapą.

if (fazė == PHASE_WAIT_FOR_START) {greitis = 0; if (buttonState) {fazė = PHASE_ROTATE; }}

Norėdami pagreitinti ruletę, pakeiskite greitį.

if (fazė == PHASE_ROTATE) {greitis = greitis+0,5; }

Norėdami pagreitinti ruletę, pakeiskite greitį.

:

if (fazė == PHASE_STOPPING) {greitis = greitis-0,2; }

Tai yra ruletės dalis. Padarykime!

5 žingsnis: programa

Programą rasite čia