Графическая рулетка с Обнизом: 5 шагов

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

Я сделал графическую рулетку. Если вы нажмете кнопку, рулетка начнет вращаться. При повторном нажатии рулетка перестает вращаться и издает звуковой сигнал!

Шаг 1: Схема

Используем только проводной динамик и кнопку.

Номера пинов проводной прописаны в программе.

button = obniz.wired ("Кнопка", {сигнал: 6, gnd: 7}); динамик = obniz.wired ("Динамик", {сигнал: 0, gnd: 1});

Шаг 2: повернуть изображение рулетки

В HTML вы можете использовать «преобразование CSS». Например, это код поворота изображения на 90 градусов.

document.getElementById ("рулетка"). style = "transform: rotate (90deg);";

Чтобы начать и остановить медленное вращение, добавьте скорость вращения для градуса поворота на кадр.

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

}

setInterval (поворот, 10);

Шаг 3: звуковой сигнал

Хотите, чтобы гудок в рулетке был без сдачи? При этом вы можете подавать звуковой сигнал на частоте 440 Гц 10 мс.

динамик.плей (440); await obniz.wait (10); динамик.стоп ();

Вот как узнать при смене номера рулетки.

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

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

пусть скорость = 0; пусть deg = 0; function rotate () {// при изменении значения if (Math.floor ((deg + speed) / (360 / 7.0)) - Math.floor (deg / (360 / 7.0))> = 1) {onRouletteChange (); } град + = скорость; document.getElementById ("рулетка"). style = "transform: rotate (" + deg + "deg);";

}

setInterval (поворот, 10);

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

если (! динамик) {возврат;} динамик.play (440); await obniz.wait (10); динамик.стоп (); }

Шаг 4: Запуск по нажатой кнопке

Чтобы узнать состояние кнопки, добавьте var buttonState и установите значение текущего состояния кнопки.

button.onchange = функция (нажата) {buttonState = нажата; };

А также добавьте фазу var для текущего состояния рулетки. Фаза устанавливается одним из них.

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

Например, если этап PHASE_WAIT_FOR_START и вы хотите перейти к следующему этапу.

если (фаза == PHASE_WAIT_FOR_START) {скорость = 0; если (buttonState) {фаза = PHASE_ROTATE; }}

Чтобы ускорить рулетку, измените скорость вар.

if (phase == PHASE_ROTATE) {скорость = скорость + 0,5; }

Чтобы уменьшить скорость рулетки, измените скорость вар.

:

если (фаза == PHASE_STOPPING) {скорость = скорость-0,2; }

Это составляющая рулетки. Давайте сделаем это!

Шаг 5: программа

Пожалуйста, обратитесь сюда для программы