Obniz ile Grafik Rulet: 5 Adım
Obniz ile Grafik Rulet: 5 Adım

İçindekiler:

Anonim
Image
Image

Bir grafik rulet yaptım. Düğmeye basarsanız rulet dönmeye başlar. Tekrar basarsanız, rulet dönmeyi durdurur ve bip sesi çıkarır!

Adım 1: Devre

Rulet Resmini Döndür
Rulet Resmini Döndür

Yalnızca kablolu bir hoparlör ve bir düğme kullanıyoruz.

Kabloluların pin numaraları program üzerinde yazılıdır.

buton = obniz.wired("Düğme", {sinyal:6, gnd:7 });hoparlör = obniz.wired("Hoparlör", {sinyal:0, gnd: 1});

2. Adım: Rulet Resmini Döndür

HTML'de "CSS dönüşümü" kullanabilirsiniz. Örneğin, bu, görüntüyü 90 derece döndürmenin kodudur.

document.getElementById("rulet").style = "dönüştür:döndür(90deg);";

Yavaş döndürmeyi başlatmak ve durdurmak için kare başına döndürme derecesi için bir var hızı ekleyin.

hız = 0 olsun; derece = 0 olsun; fonksiyon döndürme(){ derece += hız; document.getElementById("rulet").style = "dönüştür:döndür("+derece+"derece);";

}

setInterval(döndür, 10);

3. Adım: Bip sesi

Rulette değişiklik olmaması için bip sesi çıkarmak ister misiniz? Bununla, 440Hz 10ms'de bip sesi verebilirsiniz.

hoparlör.oynat(440); bekle obniz.wait(10); hoparlör.durdur();

Bu, rulet no değişikliğini nasıl öğreneceğinizdir.

if(Math.floor((derece + hız) / (360/7.0)) - Math.floor(derece / (360/7.0)) >= 1){ onRouletteChange(); }

Yani, bu döndürme ve bip sesi kodudur.

hız = 0 olsun; derece = 0 olsun; fonksiyon döndürme(){ //değişken değer if(Math.floor((derece + hız) / (360/7.0)) - Math.floor(derece / (360/7.0)) >= 1){ onRouletteChange(); } derece += hız; document.getElementById("rulet").style = "dönüştür:döndür("+derece+"derece);";

}

setInterval(döndür, 10);

async işlevi onRouletteChange(){

if(!speaker){return;}speaker.play(440); bekle obniz.wait(10); hoparlör.durdur(); }

Adım 4: Düğmeye Basıldığında Başlatın

Düğme durumunu bilmek için var buttonState ekleyin ve mevcut düğme durumunun değerini ayarlayın.

button.onchange = fonksiyon(basıldı){ buttonState = basıldı; };

Ayrıca mevcut rulet durumu için var fazı ekleyin. Faz da bunlardan biri olarak ayarlanır.

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

Örneğin, aşama PHASE_WAIT_FOR_START olduğunda ve bir sonraki aşamaya geçmek istediğinizde.

if(faz == PHASE_WAIT_FOR_START){ hız = 0; if(buttonState){ faz = PHASE_ROTATE; } }

Kuralı hızlandırmak için var speed öğesini değiştirin.

if(faz == PHASE_ROTATE){ hız = hız+0.5; }

Kuralı hızlandırmak için var speed öğesini değiştirin.

:

if(faz == FAZ_DURDURMA){ hız = hız-0.2; }

Bunlar ruletin bileşenleridir. Hadi yapalım!

Adım 5: Program

Program için lütfen buraya bakın