Графична рулетка с Obniz: 5 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:53

Направих графична рулетка. Ако натиснете бутона, рулетката започва да се върти. Ако натиснете отново, рулетката спира да се върти и издава звуков сигнал!

Стъпка 1: Схема

Използваме само кабелен високоговорител и бутон.

Пиновите номера на кабелите са записани в програмата.

бутон = obniz.wired ("Бутон", {сигнал: 6, gnd: 7}); високоговорител = obniz.wired ("Високоговорител", {сигнал: 0, gnd: 1});

Стъпка 2: Завъртете изображението на рулетката

В HTML можете да използвате „CSS преобразуване“. Например, това е кодът за завъртане на изображението на 90 градуса.

document.getElementById ("рулетка"). style = "преобразуване: завъртане (90 градуса);";

За да стартирате и спирате бавно завъртане, добавете променлива скорост за степен на завъртане на кадър.

нека скорост = 0; нека deg = 0; функция rotate () {deg += скорост; document.getElementById ("рулетка"). style = "преобразуване: завъртане ("+deg+"deg);";

}

setInterval (завъртане, 10);

Стъпка 3: Звуков сигнал

Искате ли да издадете звуков сигнал на рулетката без промяна? С това можете да издадете звуков сигнал на 440Hz 10ms.

високоговорител.игра (440); изчакайте obniz.wait (10); speaker.stop ();

Ето как да разберете за смяна на рулетка не.

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

И така, това е кодът за завъртане и звуков сигнал.

нека скорост = 0; нека deg = 0; функция rotate () {// при промяна на стойността if (Math.floor ((deg + speed) /(360 /7.0)) - Math.floor (deg /(360 /7.0))> = 1) {onRouletteChange (); } deg += скорост; document.getElementById ("рулетка"). style = "преобразуване: завъртане ("+deg+"deg);";

}

setInterval (завъртане, 10);

асинхронна функция onRouletteChange () {

if (! говорител) {връщане;} високоговорител.play (440); изчакайте obniz.wait (10); speaker.stop (); }

Стъпка 4: Започнете с натиснат бутон

За да знаете състоянието на бутона, добавете var buttonState и задайте стойност на текущото състояние на бутона.

button.onchange = function (натиснат) {buttonState = натиснат; };

И също така добавете var фаза за текущото състояние на рулетката. Фазата е зададена една от тези.

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

Например, когато фазата е PHASE_WAIT_FOR_START и искате да преминете към следващата фаза.

if (фаза == PHASE_WAIT_FOR_START) {скорост = 0; if (buttonState) {фаза = PHASE_ROTATE; }}

За да ускорите рулетката, променете var скоростта.

if (фаза == PHASE_ROTATE) {скорост = скорост+0,5; }

За да ускорите рулетката, променете var скоростта.

:

if (фаза == PHASE_STOPPING) {скорост = скорост-0,2; }

Те са компонент на рулетката. Нека успеем!

Стъпка 5: Програма

Моля, вижте тук за програмата