გრაფიკული რულეტი ობნიზთან ერთად: 5 ნაბიჯი

2024 ავტორი: John Day | [email protected]. ბოლოს შეცვლილი: 2024-01-30 10:19

მე გავაკეთე გრაფიკული რულეტი. თუ დააჭირეთ ღილაკს, რულეტი იწყებს ბრუნვას. თუ ხელახლა დააჭერთ, რულეტი წყვეტს ბრუნვას და იძახის!

ნაბიჯი 1: წრე

ჩვენ ვიყენებთ მხოლოდ სადენიანი დინამიკს და ღილაკს.

სადენიანი პინის ნომრები იწერება პროგრამაზე.

ღილაკი = obniz.wired ("ღილაკი", {სიგნალი: 6, gnd: 7}); სპიკერი = obniz.wired ("სპიკერი", {სიგნალი: 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. დაელოდეთ (10); სპიკერი. გაჩერება ();

ეს არის როგორ იცოდეთ რულეტის შეცვლის შესახებ No.

თუ (მათემატიკური სართული ((დეგ + სიჩქარე) / / 360 / 7.0)) - მათემატიკური სართული (დეგ / (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 () {

თუ (! სპიკერი) {დაბრუნება;} სპიკერი. თამაში (440); დაელოდეთ obniz.wait (10); სპიკერი. გაჩერება (); }

ნაბიჯი 4: დაიწყეთ ღილაკზე დაჭერით

ღილაკის მდგომარეობის გასაგებად, დაამატეთ var ღილაკი სახელმწიფო და დააყენეთ ღილაკის ამჟამინდელი მდგომარეობის მნიშვნელობა.

button.onchange = ფუნქცია (დაჭერილი) {buttonState = დაჭერილი; };

ასევე დაამატეთ ვარ ფაზა რულეტის ამჟამინდელ მდგომარეობაზე. ფაზა განლაგებულია ერთ -ერთში.

კონსტანტი 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; if (buttonState) {ფაზა = PHASE_ROTATE; }}

რულეტის დასაჩქარებლად შეცვალეთ var სიჩქარე.

თუ (ფაზა == PHASE_ROTATE) {სიჩქარე = სიჩქარე+0.5; }

რულეტის დაჩქარების მიზნით, შეცვალეთ var სიჩქარე.

:

თუ (ფაზა == PHASE_STOPPING) {სიჩქარე = სიჩქარე -0.2; }

ეს არის რულეტის კომპონენტი. მოდი გავაკეთოთ!

ნაბიჯი 5: პროგრამა

გთხოვთ იხილოთ აქ პროგრამისთვის