Roulette Grafis Dengan Obniz: 5 Langkah
Roulette Grafis Dengan Obniz: 5 Langkah

Daftar Isi:

Anonim
Image
Image

Saya telah membuat rolet grafis. Jika Anda menekan tombol, roulette mulai berputar. Jika Anda menekan lagi, roulette berhenti berputar dan berbunyi bip!

Langkah 1: Sirkuit

Putar Gambar Aturan
Putar Gambar Aturan

Kami hanya menggunakan speaker kabel dan tombol.

Nomor pin kabel ditulis pada program.

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

Langkah 2: Putar Gambar Rulette

Dalam HTML, Anda dapat menggunakan "transformasi CSS". Sebagai contoh, ini adalah kode untuk memutar gambar 90 derajat.

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

Untuk memulai dan menghentikan putaran secara perlahan, tambahkan kecepatan var untuk derajat putaran per bingkai.

misalkan kecepatan = 0; biarkan derajat = 0; fungsi rotate(){ derajat += kecepatan; document.getElementById("roulette").style = "transform:rotate("+deg+"deg);";

}

setInterval(memutar, 10);

Langkah 3: Bip

Apakah Anda ingin berbunyi bip pada roulette tanpa perubahan? Dengan ini, Anda dapat berbunyi bip pada 440Hz 10ms.

speaker.play(440); menunggu obniz.tunggu(10); speaker.stop();

Ini adalah cara mengetahui perubahan pada roulette no.

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

Jadi, ini adalah kode putar dan bip.

misalkan kecepatan = 0; biarkan derajat = 0; function rotate(){ //pada perubahan nilai if(Math.floor((deg + speed) / (360/7,0)) - Math.floor(deg / (360/7,0)) >= 1){ onRouletteChange(); } derajat += kecepatan; document.getElementById("roulette").style = "transform:rotate("+deg+"deg);";

}

setInterval(memutar, 10);

fungsi asinkron onRouletteChange(){

if(!speaker){return;} speaker.play(440); menunggu obniz.tunggu(10); speaker.stop(); }

Langkah 4: Mulai dengan Tombol Ditekan

Untuk mengetahui status tombol, tambahkan var buttonState dan setel nilai status tombol saat ini.

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

Dan juga tambahkan fase var untuk keadaan roulette saat ini. Fase diatur salah satunya.

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

Misalnya, ketika fase adalah PHASE_WAIT_FOR_START dan Anda ingin fase berikutnya.

if(fase == PHASE_WAIT_FOR_START){ kecepatan = 0; if(buttonState){ fase = PHASE_ROTATE; } }

Untuk mempercepat rulette, ubah var speed.

if(fase == PHASE_ROTATE){ kecepatan = kecepatan+0,5; }

Untuk mempercepat rulette, ubah var speed.

:

if(fase == PHASE_STOPPING){ kecepatan = kecepatan-0,2; }

Itu adalah komponen roulette. Mari kita membuatnya!

Langkah 5: Program

Silakan lihat di sini untuk programnya