תוכן עניינים:
2025 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2025-01-13 06:57
הכנתי רולטה גרפית. אם תלחץ על הכפתור, הרולטה מתחילה להסתובב. אם תלחץ שוב, הרולטה מפסיקה להסתובב ומצפצפת!
שלב 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: תכנית
אנא עיין כאן לתכנית