رولت گرافیکی با Obniz: 5 مرحله

2024 نویسنده: John Day | [email protected]. آخرین اصلاح شده: 2024-01-30 08:56

من رولت گرافیکی درست کرده ام. اگر دکمه را فشار دهید ، رولت شروع به چرخش می کند. اگر دوباره فشار دهید ، چرخش رولت متوقف می شود و بوق می زند!

مرحله 1: مدار

ما فقط از بلندگوی سیمی و دکمه استفاده می کنیم.

شماره پین های سیم دار روی برنامه نوشته شده است.

دکمه = obniz.wired ("دکمه"، {سیگنال: 6، GND: 7})؛ سخنران = obniz.wired ("بلندگو"، {سیگنال: 0، GND: 1})؛

مرحله 2: چرخش تصویر رولت

در HTML می توانید از "CSS transform" استفاده کنید. به عنوان مثال ، این کد چرخش تصویر 90 درجه است.

document.getElementById ("رولت"). style = "transform: rotate (90deg)؛"؛

برای شروع و توقف آهسته چرخش ، یک سرعت var برای درجه چرخش در هر فریم اضافه کنید.

اجازه دهید سرعت = 0 ؛ اجازه دهید deg = 0؛ تابع rotate () {deg += speed؛ document.getElementById ("رولت"). style = "transform: rotate ("+deg+"deg)؛"؛

}

setInterval (چرخش ، 10) ؛

مرحله 3: بوق بزنید

آیا می خواهید بدون تغییر روی رولت بوق بزنید؟ با این کار می توانید روی 440 هرتز 10 میلی ثانیه بوق بزنید.

بلندگو. بازی (440) ؛ منتظر obniz.wait (10)؛ speaker.stop ()؛

این است که چگونه در مورد تغییر رولت شماره بدانید.

if (Math.floor ((درجه + سرعت) / (360 / 7.0)) - Math.floor (درجه / (360 / 7.0))> = 1) {onRouletteChange ()؛ }

بنابراین ، این کد چرخش و بیپ است.

اجازه دهید سرعت = 0 ؛ اجازه دهید deg = 0؛ تابع rotate () {// در تغییر مقدار if (Math.floor ((درجه + سرعت) /(360 /7.0)) - Math.floor (درجه /(360 /7.0))> = 1) {onRouletteChange ()؛ } درجه += سرعت ؛ document.getElementById ("رولت"). style = "transform: rotate ("+deg+"deg)؛"؛

}

setInterval (چرخش ، 10) ؛

تابع async onRouletteChange () {

if (! speaker) {return؛} speaker.play (440) ؛ منتظر obniz.wait (10)؛ speaker.stop ()؛ }

مرحله 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 است و می خواهید به مرحله بعدی بروید.

if (فاز == PHASE_WAIT_FOR_START) {سرعت = 0 ؛ if (buttonState) {مرحله = PHASE_ROTATE؛ }}

برای افزایش سرعت رولت ، سرعت var را تغییر دهید.

if (فاز == PHASE_ROTATE) {سرعت = سرعت+0.5 ؛ }

برای سرعت بخشیدن به رولت ، سرعت var را تغییر دهید.

:

if (فاز == PHASE_STOPPING) {سرعت = سرعت -0.2 ؛ }

اینها جزء رولت هستند. بیایید آن را بسازیم!

مرحله 5: برنامه

لطفاً برای اطلاع از برنامه به اینجا مراجعه کنید