รูเล็ตกราฟิกกับ Obniz: 5 ขั้นตอน
รูเล็ตกราฟิกกับ Obniz: 5 ขั้นตอน

สารบัญ:

Anonim
Image
Image

ฉันได้ทำรูเล็ตแบบกราฟิก หากคุณกดปุ่ม รูเล็ตจะเริ่มหมุน หากคุณกดอีกครั้ง รูเล็ตจะหยุดหมุนและส่งเสียงบี๊บ!

ขั้นตอนที่ 1: วงจร

หมุนภาพรูเล็ต
หมุนภาพรูเล็ต

เราใช้เฉพาะลำโพงแบบมีสายและปุ่ม

หมายเลขพินของสายจะเขียนอยู่ในโปรแกรม

ปุ่ม = obniz.wired ("ปุ่ม", {สัญญาณ:6, gnd:7 }); ลำโพง = obniz.wired ("ลำโพง" {สัญญาณ:0, gnd: 1});

ขั้นตอนที่ 2: หมุนภาพรูเล็ต

ใน HTML คุณสามารถใช้ "การแปลง CSS" ตัวอย่างเช่น นี่คือรหัสการหมุนภาพ 90 องศา

document.getElementById("รูเล็ต").style = "แปลง:หมุน(90deg);";

หากต้องการเริ่มและหยุดการหมุนช้าๆ ให้เพิ่มความเร็ว var สำหรับองศาการหมุนต่อเฟรม

ให้ความเร็ว = 0; ให้องศา = 0; ฟังก์ชั่นหมุน (){ องศา += ความเร็ว; document.getElementById("roulette").style = "transform:rotate("+deg+"deg);";

}

setInterval(หมุน, 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 ((องศา + ความเร็ว) / (360/7.0)) - Math.floor (องศา / (360/7.0)) >= 1){ onRouletteChange(); } องศา += ความเร็ว; document.getElementById("roulette").style = "transform:rotate("+deg+"deg);";

}

setInterval(หมุน, 10);

ฟังก์ชัน async onRouletteChange(){

if(!ลำโพง){return;} speaker.play(440); รอ obniz.wait(10); ลำโพง. หยุด (); }

ขั้นตอนที่ 4: เริ่มเมื่อกดปุ่ม

หากต้องการทราบสถานะของปุ่ม ให้เพิ่ม var buttonState และตั้งค่าสถานะปุ่มปัจจุบัน

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_ROTATE; } }

หากต้องการเร่งความเร็วของกฎ ให้เปลี่ยน var speed

ถ้า(เฟส == PHASE_ROTATE){ ความเร็ว = ความเร็ว+0.5; }

หากต้องการลดความเร็วของกฎ ให้เปลี่ยน var speed

:

ถ้า (เฟส == PHASE_STOPPING) { ความเร็ว = ความเร็ว-0.2; }

เหล่านี้เป็นส่วนประกอบของรูเล็ต มาทำกัน!

ขั้นตอนที่ 5: โปรแกรม

โปรดดูที่นี่สำหรับโปรแกรม