EP.10 โรตีสายไหม หยอดเหรียญ

noMerzy | 2016-06-07 13:45:57

วันนี้เราจะมาสร้าง "โรตีสายไหม หยอดเหรียญ" ที่เราคุ้นเคยสมัยเป็นเด็กๆกันครับ
 

หน้าตาวงล้อเสี่ยงโชค
วงล้อจะมีโอกาสได้โรตีจำนวนต่างๆ ดังนี้ 
1 ชิ้น 4 ใน 8 
2 ชิ้น 2 ใน 8 
3 ชิ้น 1 ใน 8 
4 ชิ้น 1 ใน 8

index.html
<html> <head> <meta charset="utf-8"> <script> //องศา var degree = 0; //ตรวจสอบการหมุน
var toogles = 0; //ฟังก์ชั่นหมุนวงล้อ function spin() { var img = document.getElementById('img'); //หมุนวงล้อ degree องศา img.style.transform = "rotate(" + degree + "deg)";
 //หมุนทีละ 10 องศา อยากให้หมุนเร็วก็บวกเยอะๆ
 degree += 10; //ถ้าหมุนครบรอบ if (degree > 359) { degree = 1;
 }
 //ป้องกันการกดหมุนซ้ำ if (toogles === 0) { //กดครั้งแรกหมุนปกติ
 loop = setTimeout(spin);
 toogles = 1; } else {
 //ถ้าหมุนอยู่แล้วให้ลบ loop เก่า clearTimeout(loop); loop = setTimeout(spin, 1);
 } } //ฟังก์ชั่นหยุดหมุนวงล้อ
 function stop() { //ยกเลิก loop clearTimeout(loop);
 toogles = 0; } </script> </head> <body> <center> <p style="font-size: 50px;position: relative;top:50px;">↓</p> <img src="circle.png" width="200" id="img"> <br><br> <button onclick="spin()" id="spin">SPIN</button>&nbsp;&nbsp;<button onclick="stop()" id="stop">STOP</button> </center> </body> </html>