Cò quay đồ họa với Obniz: 5 bước
Cò quay đồ họa với Obniz: 5 bước

Mục lục:

Anonim
Image
Image

Tôi đã thực hiện một trò roulette đồ họa. Nếu bạn nhấn nút, cò quay bắt đầu quay. Nếu bạn nhấn lại, cò quay ngừng quay và phát ra tiếng bíp!

Bước 1: Mạch

Xoay hình ảnh Rulette
Xoay hình ảnh Rulette

Chúng tôi chỉ sử dụng một loa có dây và một nút bấm.

Các số pin của có dây được ghi trên chương trình.

button = obniz.wired ("Nút", {signal: 6, gnd: 7}); speaker = obniz.wired ("Loa", {signal: 0, gnd: 1});

Bước 2: Xoay hình ảnh Rulette

Trong HTML, bạn có thể sử dụng "CSS chuyển đổi". Ví dụ, đây là mã của hình ảnh xoay 90 độ.

document.getElementById ("cò quay"). style = "biến đổi: xoay (90deg);";

Để bắt đầu và dừng xoay chậm, hãy thêm tốc độ var cho mức độ xoay trên mỗi khung hình.

để tốc độ = 0; cho deg = 0; hàm xoay () {deg + = speed; document.getElementById ("cò quay"). style = "biến đổi: xoay (" + deg + "deg);";

}

setInterval (xoay, 10);

Bước 3: Bíp

Bạn có muốn phát ra tiếng bíp trên roulette không có thay đổi? Với điều này, bạn có thể phát ra tiếng bíp trên 440Hz 10ms.

loa.chơi (440); chờ đợi obniz.wait (10); loa.stop ();

Đây là cách để biết về sự thay đổi của roulette số.

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

Vì vậy, đây là mã của xoay và bíp.

để tốc độ = 0; cho deg = 0; function xoay () {// thay đổi giá trị if (Math.floor ((deg + speed) / (360 / 7.0)) - Math.floor (deg / (360 / 7.0))> = 1) {onRouletteChange (); } deg + = tốc độ; document.getElementById ("cò quay"). style = "biến đổi: xoay (" + deg + "deg);";

}

setInterval (xoay, 10);

hàm async onRouletteChange () {

if (! speaker) {return;} speaker.play (440); chờ đợi obniz.wait (10); loa.stop (); }

Bước 4: Bắt đầu trên Nút được đẩy

Để biết trạng thái nút, hãy thêm var buttonStateavà đặt giá trị của trạng thái nút hiện tại.

button.onchange = function (nhấn) {buttonState = nhấn; };

Và cũng thêm pha var cho trạng thái hiện tại của roulette.phase được thiết lập một trong những điều này.

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

Ví dụ: khi giai đoạn là PHASE_WAIT_FOR_START và bạn muốn giai đoạn tiếp theo.

if (phase == PHASE_WAIT_FOR_START) {speed = 0; if (buttonState) {phase = PHASE_ROTATE; }}

Để tăng tốc rulette, hãy thay đổi tốc độ var.

if (phase == PHASE_ROTATE) {speed = speed + 0.5; }

Để giảm tốc độ rulette, hãy thay đổi tốc độ var.

:

if (phase == PHASE_STOPPING) {speed = speed-0,2; }

Đó là những thành phần của roulette. Hãy làm cho nó!

Bước 5: Chương trình

Vui lòng tham khảo chương trình tại đây