Rolet Grafik Dengan Obniz: 5 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:11

Saya telah membuat rolet grafik. Sekiranya anda menekan butang, rolet akan berputar. Sekiranya anda menekan lagi, rolet berhenti berputar dan berbunyi bip!

Langkah 1: Litar

Kami hanya menggunakan pembesar suara berwayar dan butang.

Nombor pin berwayar ditulis pada program.

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

Langkah 2: Putar Gambar Rolet

Dalam HTML, anda boleh menggunakan "CSS transform". Contohnya, ini adalah kod gambar putar 90 darjah.

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

Untuk memulakan dan menghentikan putaran perlahan, tambahkan kelajuan var untuk darjah putaran setiap bingkai.

biarkan laju = 0; biarkan deg = 0; fungsi putar () {deg + = kelajuan; document.getElementById ("roulette"). style = "transform: rotate (" + deg + "deg);";

}

setInterval (putar, 10);

Langkah 3: Bip

Adakah anda mahu berbunyi di rolet tidak ada perubahan? Dengan ini, anda boleh berbunyi 440Hz 10ms.

pembesar suara.play (440); tunggu obniz.wait (10); pembesar suara.stop ();

Ini adalah bagaimana mengetahui perubahan rolet no.

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

Jadi, ini adalah kod putar dan bip.

biarkan laju = 0; biarkan deg = 0; fungsi putar () {// pada nilai perubahan jika (Math.floor ((deg + speed) / (360 / 7.0)) - Math.floor (deg / (360 / 7.0))> = 1) {onRouletteChange (); } deg + = kelajuan; document.getElementById ("roulette"). style = "transform: rotate (" + deg + "deg);";

}

setInterval (putar, 10);

fungsi async onRouletteChange () {

jika (! speaker) {return;} speaker.play (440); tunggu obniz.wait (10); pembesar suara.stop (); }

Langkah 4: Mulakan dengan Butang Ditolak

Untuk mengetahui keadaan butang, tambahkan var buttonState dan tetapkan nilai keadaan butang semasa.

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

Dan juga menambahkan fasa var untuk keadaan semasa roulette.phase ditetapkan salah satunya.

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

Contohnya, ketika fasa PHASE_WAIT_FOR_START dan anda mahu ke fasa seterusnya.

jika (fasa == PHASE_WAIT_FOR_START) {kelajuan = 0; jika (buttonState) {phase = PHASE_ROTATE; }}

Untuk mempercepat peraturan, ubah kelajuan var.

jika (fasa == PHASE_ROTATE) {speed = speed + 0.5; }

Untuk mempercepat peraturan, ubah kelajuan var.

:

jika (fasa == PHASE_STOPPING) {speed = speed-0.2; }

Itu adalah komponen rolet. Mari buat!

Langkah 5: Program

Sila rujuk di sini untuk program ini