Obniz ilə Qrafik Rulet: 5 addım

2024 Müəllif: John Day | [email protected]. Son dəyişdirildi: 2024-01-30 07:47

Qrafik rulet hazırladım. Düyməni basarsanız rulet fırlanmağa başlayır. Yenidən basarsanız, rulet fırlanmağı dayandırır və səs siqnalı verir!

Addım 1: Dövrə

Yalnız simli dinamikdən və düymədən istifadə edirik.

Proqramda kabellərin pin nömrələri yazılmışdır.

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

Addım 2: Rulet Şəklini Döndərin

HTML -də "CSS çevrilməsindən" istifadə edə bilərsiniz. Məsələn, bu, görüntünü 90 dərəcə döndərmə kodudur.

document.getElementById ("rulet"). style = "çevir: döndür (90 dərəcə);";

Yavaş -yavaş fırlanmağa başlamaq və dayandırmaq üçün kadr başına dərəcə dərəcəsi üçün var sürəti əlavə edin.

sürət = 0 olsun; edək deg = 0; funksiya rotate () {deg += sürət; document.getElementById ("rulet"). style = "çevir: döndür ("+deg+"deg);";

}

setInterval (döndür, 10);

Addım 3: Bip

Ruletdə heç bir dəyişiklik etməmək istəyirsən? Bununla 440Hz 10ms səs siqnalı verə bilərsiniz.

natiq.play (440); gözləyin obniz. gözləyin (10); natiq.stop ();

No ruletin dəyişdirilməsini necə bilmək olar.

if (Math.floor ((deg + sürət) / (360 / 7.0)) - Math.floor (deg / (360 / 7.0))> = 1) {onRouletteChange (); }

Beləliklə, bu, dönmə və bip kodudur.

sürət = 0 olsun; edək deg = 0; funksiyası rotate () {// əgər dəyər dəyişikliyində (Math.floor ((deg + sürət) /(360 /7.0)) - Math.floor (deg /(360 /7.0))> = 1) {onRouletteChange (); } deg += sürət; document.getElementById ("rulet"). style = "çevir: döndür ("+deg+"deg);";

}

setInterval (döndür, 10);

onRouletteChange () {async funksiyası

if (! spiker) {qayıt;} spiker.play (440); gözləyin obniz. gözləyin (10); natiq.stop (); }

Addım 4: Pushhed Düyməsinə Başlayın

Düymə vəziyyətini bilmək üçün var buttonState əlavə edin və cari düymə vəziyyətinin dəyərini təyin edin.

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

Həm də ruletin hazırkı vəziyyəti üçün var fazası əlavə edin. Bunlardan biri təyin olunur.

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

Məsələn, faza PHASE_WAIT_FOR_START olduqda və növbəti mərhələyə keçmək istəyirsən.

əgər (mərhələ == PHASE_WAIT_FOR_START) {sürət = 0; əgər (buttonState) {mərhələ = PHASE_ROTATE; }}

Ruleti sürətləndirmək üçün var sürətini dəyişin.

if (faz == PHASE_ROTATE) {sürət = sürət+0,5; }

Ruleti aşağı salmaq üçün var sürətini dəyişin.

:

if (faz == PHASE_STOPPING) {sürət = sürət-0.2; }

Bunlar ruletin tərkib hissəsidir. Gəlin nail olaq!

Addım 5: Proqram

Zəhmət olmasa proqram üçün bura baxın