ओबनिज़ के साथ ग्राफिकल रूले: 5 कदम

2024 लेखक: John Day | [email protected]. अंतिम बार संशोधित: 2024-01-30 09:22

मैंने एक ग्राफिकल रूले बनाया है। यदि आप बटन दबाते हैं, तो रूले घूमने लगता है। यदि आप फिर से दबाते हैं, तो रूले घूमना बंद कर देता है और बीप करता है!

चरण 1: सर्किट

हम केवल एक वायर्ड स्पीकर और एक बटन का उपयोग करते हैं।

वायर्ड के पिन नंबर प्रोग्राम पर लिखे होते हैं।

बटन = obniz.wired ("बटन", {सिग्नल: 6, जीएनडी: 7}); स्पीकर = obniz.wired ("स्पीकर", {सिग्नल: 0, जीएनडी: 1});

चरण 2: रूलेट छवि घुमाएँ

एचटीएमएल में, आप "सीएसएस ट्रांसफॉर्म" का उपयोग कर सकते हैं। उदाहरण के लिए, यह 90 डिग्री रोटेट इमेज का कोड है।

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

शुरू करने और रोकने के लिए धीरे-धीरे घुमाएं, प्रति फ्रेम घुमाने की डिग्री के लिए एक var गति जोड़ें।

चलो गति = 0; चलो डिग्री = 0; फंक्शन रोटेट () {डिग्री + = स्पीड; document.getElementById("roulette").style = "transform:rotate("+deg+"deg);";

}

सेटइंटरवल (घुमाएँ, 10);

चरण 3: बीप

क्या आप रूले पर बिना किसी बदलाव के बीप करना चाहते हैं? इससे आप 440Hz 10ms पर बीप कर सकते हैं।

स्पीकर.प्ले (440); प्रतीक्षा करें obniz.wait(10); स्पीकर.स्टॉप ();

रूले नंबर बदलने के बारे में ऐसे जानें।

if(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);";

}

सेटइंटरवल (घुमाएँ, 10);

रूलेचेंज () पर एसिंक फ़ंक्शन

अगर (! स्पीकर) {वापसी;} स्पीकर.प्ले (440); प्रतीक्षा करें obniz.wait(10); स्पीकर.स्टॉप (); }

चरण 4: बटन पुश पर प्रारंभ करें।

बटन स्थिति जानने के लिए, var buttonState और वर्तमान बटन स्थिति का सेट मान जोड़ें।

बटन.ऑनचेंज = फ़ंक्शन (दबाया गया) {बटनस्टेट = दबाया गया; };

और रूले की वर्तमान स्थिति के लिए var चरण भी जोड़ें। इसमें से एक चरण निर्धारित किया गया है।

स्थिरांक PHASE_WAIT_FOR_START = 0; स्थिरांक PHASE_ROTATE = 1; स्थिरांक PHASE_STOPPING = 2; स्थिरांक PHASE_STOPPED = 3;

उदाहरण के लिए, जब चरण PHASE_WAIT_FOR_START है और आप अगले चरण में जाना चाहते हैं।

अगर (चरण == PHASE_WAIT_FOR_START) {गति = 0; अगर (बटनस्टेट) {चरण = PHASE_ROTATE; } }

रूलेट को गति देने के लिए, var speed बदलें।

अगर (चरण == PHASE_ROTATE) {गति = गति + 0.5; }

रूलेट को गति देने के लिए, var speed बदलें।

:

अगर (चरण == PHASE_STOPPING) {गति = गति-0.2; }

वे रूले के घटक हैं। चलो यह करते हैं!

चरण 5: कार्यक्रम

कृपया कार्यक्रम के लिए यहां देखें