الروليت الرسومية مع Obniz: 5 خطوات

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:40

لقد صنعت لعبة روليت رسومية. إذا ضغطت على الزر ، تبدأ لعبة الروليت بالدوران. إذا ضغطت مرة أخرى ، ستتوقف لعبة الروليت عن الدوران وتصدر صوتًا!

الخطوة 1: الدائرة

نحن نستخدم فقط مكبر صوت سلكي وزر.

يتم كتابة أرقام دبوس السلكي على البرنامج.

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

الخطوة 2: تدوير صورة المسطرة

في HTML ، يمكنك استخدام "تحويل CSS". على سبيل المثال ، هذا هو رمز تدوير الصورة 90 درجة.

document.getElementById ("roulette"). style = "transform: rotate (90deg)؛"؛

لبدء التدوير وإيقافه ببطء ، أضف سرعة var لدرجة التدوير لكل إطار.

دع السرعة = 0 ؛ اسمحوا درجة = 0 ؛ استدارة الوظيفة () {deg + = speed ؛ document.getElementById ("roulette"). style = "transform: rotate (" + deg + "deg)؛"؛

}

setInterval (استدارة ، 10) ؛

الخطوة 3: صفير

هل تريد التنبيه على الروليت بلا تغيير؟ باستخدام هذا ، يمكنك إصدار صوت تنبيه على 440 هرتز 10 مللي ثانية.

Speaker.play (440) ؛ انتظار obniz.wait (10) ؛ Speaker.stop () ؛

هذه هي الطريقة التي تعرف بها على تغيير لعبة الروليت لا.

إذا (Math.floor ((deg + speed) / (360 / 7.0)) - Math.floor (deg / (360 / 7.0))> = 1) {onRouletteChange () ؛ }

إذن ، هذا هو رمز التدوير والصفير.

دع السرعة = 0 ؛ اسمحوا درجة = 0 ؛ دالة استدارة () {// عند تغيير القيمة إذا (Math.floor ((deg + speed) / (360 / 7.0)) - Math.floor (deg / (360 / 7.0))> = 1) {onRouletteChange () ؛ } درجة + = سرعة ؛ document.getElementById ("roulette"). style = "transform: rotate (" + deg + "deg)؛"؛

}

setInterval (استدارة ، 10) ؛

وظيفة غير متزامنة onRouletteChange () {

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

الخطوة 4: ابدأ عند الضغط على الزر

لمعرفة حالة الزر ، أضف زر varStat وقم بتعيين قيمة حالة الزر الحالية.

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 = PHASE_ROTATE ؛ }}

لتسريع المسطرة ، قم بتغيير سرعة var.

إذا (المرحلة == PHASE_ROTATE) {السرعة = السرعة + 0.5 ؛ }

لتسريع المسطرة ، قم بتغيير سرعة var.

:

إذا (المرحلة == PHASE_STOPPING) {السرعة = السرعة -0.2 ؛ }

هذه هي مكونات لعبة الروليت. هيا لنفعلها!

الخطوة 5: البرنامج

يرجى الرجوع هنا للبرنامج