רולטה גרפית עם אובניז: 5 שלבים

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-01-30 09:16

הכנתי רולטה גרפית. אם תלחץ על הכפתור, הרולטה מתחילה להסתובב. אם תלחץ שוב, הרולטה מפסיקה להסתובב ומצפצפת!

שלב 1: מעגל

אנו משתמשים רק ברמקול קווי ולחצן.

מספרי הסיכה של קווים כתובים בתוכנית.

button = obniz.wired ("לחצן", {אות: 6, gnd: 7}); רמקול = obniz.wired ("רמקול", {signal: 0, gnd: 1});

שלב 2: סובב את תמונת הכלטה

ב- HTML, אתה יכול להשתמש ב- "CSS transform". לדוגמה, זהו הקוד של סיבוב תמונה 90 מעלות.

document.getElementById ("רולטה"). style = "transform: rotate (90deg);";

כדי להתחיל ולעצור את הסיבוב לאט, הוסף מהירות var עבור סיבוב תואר לכל מסגרת.

תנו למהירות = 0; תן deg = 0; פונקציה לסובב () {deg += מהירות; document.getElementById ("רולטה"). style = "transform: rotate ("+deg+"deg);";

}

setInterval (סיבוב, 10);

שלב 3: ביפ

האם אתה רוצה לצפצף על הרולטה ללא שינוי? עם זה, אתה יכול לצפצף על 440Hz 10ms.

רמקול.שחק (440); ממתינים obniz.wait (10); speaker.stop ();

כך ניתן לדעת על שינוי רולטה לא.

if (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 ("רולטה"). style = "transform: rotate ("+deg+"deg);";

}

setInterval (סיבוב, 10);

פונקציית async onRouletteChange () {

אם (! רמקול) {return;} speaker.play (440); ממתינים obniz.wait (10); speaker.stop (); }

שלב 4: התחל על כפתור דחוף

כדי לדעת את מצב הלחצן, הוסף var buttonStat וערך הגדר של מצב הלחצן הנוכחי.

button.onchange = פונקציה (לחצה) {buttonState = לחצה; };

וגם להוסיף שלב var עבור המצב הנוכחי של roulette.phase הוא התיישב אחד מזה.

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.

:

if (phase == PHASE_STOPPING) {speed = speed-0.2; }

אלה הם מרכיב של רולטה. בוא נעשה את זה!

שלב 5: תכנית

אנא עיין כאן לתכנית