ከ Obniz ጋር ግራፊክ ሩሌት 5 ደረጃዎች

2024 ደራሲ ደራሲ: John Day | [email protected]. ለመጨረሻ ጊዜ የተሻሻለው: 2024-01-30 07:32

እኔ በግራፊክ ሩሌት አድርገዋል. አዝራሩን ከተጫኑ ሩሌት ማሽከርከር ይጀምራል። እንደገና ከተጫኑ ሩሌት ማሽከርከርን ያቆማል እና ይጮኻል!

ደረጃ 1 ወረዳ

እኛ የምንጠቀምበት ባለገመድ ድምጽ ማጉያ እና አንድ ቁልፍ ብቻ ነው።

የገመድ ፒን ቁጥሮች በፕሮግራሙ ላይ ተጽፈዋል።

አዝራር = obniz.wired ("አዝራር" ፣ {ምልክት: 6 ፣ gnd: 7}) ፤ ተናጋሪ = obniz.wired (“ድምጽ ማጉያ” ፣ {ምልክት 0 ፣ gnd: 1});

ደረጃ 2: የ Rulette ምስል አሽከርክር

በኤችቲኤምኤል ውስጥ “CSS transform” ን መጠቀም ይችላሉ። ለምሳሌ ፣ ይህ የሚሽከረከር ምስል 90 ዲግሪ ኮድ ነው።

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

በዝግታ ማሽከርከር ለመጀመር እና ለማቆም ፣ በአንድ ክፈፍ ለማሽከርከር ዲግሪ የ var ፍጥነት ይጨምሩ።

ፍቀድ = 0; deg = 0; ተግባር ማሽከርከር () {deg += ፍጥነት; document.getElementById ("roulette"). style = "transform: rotate ("+deg+"deg);";

}

setInterval (አሽከርክር ፣ 10);

ደረጃ 3 - ቢፕ

በሩሌት ላይ ምንም ለውጥ የለም ብለው ማልቀስ ይፈልጋሉ? በዚህ አማካኝነት በ 440Hz 10ms ላይ ድምጽ ማሰማት ይችላሉ።

ተናጋሪ። ጨዋታ (440); ይጠብቁ obniz.wait (10); ተናጋሪ.ቆመ ();

ይህ ሩሌት ቁ ላይ ለውጥ ላይ ማወቅ እንዴት ነው.

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

ስለዚህ ፣ ይህ የማሽከርከር እና የጩኸት ኮድ ነው።

ፍቀድ = 0; deg = 0; ተግባር ይሽከረከራል () {// በለውጥ እሴት ላይ ከሆነ (Math.floor ((deg + speed) /(360 /7.0)) - Math.floor (deg /(360 /7.0))> = 1) {onRouletteChange (); } deg += ፍጥነት; document.getElementById ("roulette"). style = "transform: rotate ("+deg+"deg);";

}

setInterval (አሽከርክር ፣ 10);

async ተግባር onRouletteChange () {

ከሆነ (! ተናጋሪ) {ተመለስ ፤} ተናጋሪ። ጨዋታ (440) ፤ ይጠብቁ obniz.wait (10); ተናጋሪ.ቆመ (); }

ደረጃ 4: በተገፋ አዝራር ላይ ይጀምሩ።

የአዝራር ሁኔታን ለማወቅ ፣ የ var አዝራርን ግዛት እና የአሁኑን የአዝራር ሁኔታ እሴት ያክሉ።

button.onchange = ተግባር (ተጭኗል) {buttonState = ተጭኗል; };

እና ደግሞ የአሁኑን የ roulette.phase ሁኔታ የ 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; }

Rulette ን ለማፋጠን ፣ የ var ፍጥነትን ይለውጡ።

:

ከሆነ (ደረጃ == PHASE_STOPPING) {speed = speed-0.2; }

እነዚህ ሩሌት አካል ናቸው። እናድርገው!

ደረጃ 5 - ፕሮግራም

እባክዎን ለፕሮግራሙ እዚህ ይመልከቱ