
Spisu treści:
2025 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2025-01-23 15:03


Zrobiłem ruletkę graficzną. Jeśli naciśniesz przycisk, ruletka zacznie się obracać. Jeśli naciśniesz ponownie, ruletka przestanie się obracać i wyda sygnał dźwiękowy!
Krok 1: Obwód

Używamy tylko przewodowego głośnika i przycisku.
Numery pinów przewodowych są zapisywane w programie.
button = obniz.wired("Przycisk", {sygnał:6, gnd:7 });głośnik = obniz.wired("Głośnik", {sygnał:0, gnd: 1});
Krok 2: Obróć obraz Ruletki
W HTML możesz użyć "przekształcenia CSS". Na przykład jest to kod obracania obrazu o 90 stopni.
document.getElementById("roulette").style = "transform:rotate(90deg);";
Aby rozpocząć i zatrzymać powolne obracanie, dodaj prędkość var dla stopnia obrotu na klatkę.
niech prędkość = 0; niech stopnie = 0; funkcja obracania(){ stopni += prędkość; document.getElementById("roulette").style = "transform:rotate("+deg+"deg);";
}
setInterval(obróć, 10);
Krok 3: Sygnał dźwiękowy
Czy chcesz wydać sygnał dźwiękowy na ruletce bez zmian? Dzięki temu możesz emitować sygnał dźwiękowy przy 440 Hz 10 ms.
głośnik.odtwórz(440); czekaj obniz.wait(10); głośnik.stop();
Oto jak poznać na zmianie ruletki nr.
if(Matem.podłoga((stopnie + prędkość) / (360/7,0)) - Matematyka.podłoga(stopnie / (360/7,0)) >= 1){ onRouletteChange(); }
To jest kod rotacji i sygnału dźwiękowego.
niech prędkość = 0; niech stopnie = 0; function rotate(){ //przy zmianie wartości if(Math.floor((stopnie + prędkość) / (360/7.0)) - Math.floor(stopnie / (360/7.0)) >= 1){ onRouletteChange(); } stopni += prędkość; document.getElementById("roulette").style = "transform:rotate("+deg+"deg);";
}
setInterval(obróć, 10);
funkcja asynchroniczna onRouletteChange(){
if(!speaker){return;} speaker.play(440); czekaj obniz.wait(10); głośnik.stop(); }
Krok 4: Rozpocznij po naciśnięciu przycisku
Aby poznać stan przycisku, dodaj var buttonStatei ustaw wartość bieżącego stanu przycisku.
button.onchange = funkcja(wciśnięty){ buttonState = wciśnięty; };
A także dodaj zmienną fazę dla bieżącego stanu ruletki. Faza jest ustawiona na jedną z nich.
const PHASE_WAIT_FOR_START = 0; const PHASE_ROTATE = 1; const PHASE_STOPPING = 2; const PHASE_STOPPED = 3;
Na przykład, gdy faza to PHASE_WAIT_FOR_START i chcesz przejść do następnej fazy.
if(faza == PHASE_WAIT_FOR_START){ prędkość = 0; if(buttonState){ faza = PHASE_ROTATE; } }
Aby przyspieszyć działanie reguły, zmień var speed.
if(faza == PHASE_ROTATE){ prędkość = prędkość+0,5; }
Aby przyspieszyć działanie reguły, zmień var speed.
:
if(faza == PHASE_STOPPING){ prędkość = prędkość-0,2; }
To są składniki ruletki. Zróbmy to!
Krok 5: Program
Proszę odnieść się tutaj do programu
Zalecana:
Licznik kroków - Micro:Bit: 12 kroków (ze zdjęciami)

Licznik kroków - Micro:Bit: Ten projekt będzie licznikiem kroków. Do pomiaru kroków użyjemy czujnika przyspieszenia wbudowanego w Micro:Bit. Za każdym razem, gdy Micro:Bit się trzęsie, dodamy 2 do licznika i wyświetlimy go na ekranie
Graficzna stacja pogodowa: 7 kroków (ze zdjęciami)

Graficzna stacja pogodowa: Zawsze chciałeś mieć graficzną stację pogodową? A z dokładnymi czujnikami? Może ten projekt jest dla Ciebie. Dzięki tej stacji pogodowej możesz zobaczyć, co „robi” pogoda. Na przykład temperatury mogą wzrosnąć lub spaść. Z
Edukacja graficzna LCD5110: 4 kroki

Edukacja LCD5110 Graphics: Cześć wszystkim W tej edukacji zamierzam przedstawić bibliotekę LCD5110_GRAPH i funkcje związane z grafiką bitmapową. Zdecydowałem się na to, ponieważ jeśli widzisz na mojej stronie projekt Space Race Game, nie pokazałem Ci, jak zrobić grafikę bitmapową. Chodźmy b
Jak wymienić kartę graficzną w prawie każdym komputerze: 8 kroków

Jak wymienić kartę graficzną w prawie każdym komputerze: Cześć, nazywam się Joseph. Jestem entuzjastą komputerów, który lubi uczyć ludzi o komputerach. Pokażę Ci, jak wymienić kartę graficzną w komputerze, abyś mógł uaktualnić swój komputer, kiedy tylko masz na to ochotę. Zastępowanie grafiki
Ruletka Techno-geek (albo kto robi kawę?): 6 kroków (ze zdjęciami)

Techno-geek Roulette (albo kto robi kawę?): To gadżet wykonany z przetworzonych części komputerowych, aby dać absolutną, jednoznaczną i niepodważalną odpowiedź na odwieczne biurowe pytanie – „Czyja kolej na zrobienie kawy?” Za każdym razem, gdy włącza się zasilanie, to cudowne urządzenie