Roulette graphique avec Obniz : 5 étapes
Roulette graphique avec Obniz : 5 étapes

Table des matières:

Anonim
Image
Image

J'ai fait une roulette graphique. Si vous appuyez sur le bouton, la roulette commence à tourner. Si vous appuyez à nouveau, la roulette arrête de tourner et émet un bip !

Étape 1: Circuit

Faire pivoter l'image de la règle
Faire pivoter l'image de la règle

Nous utilisons uniquement un haut-parleur filaire et un bouton.

Les numéros de broches du filaire sont écrits sur le programme.

button = obniz.wired("Bouton", {signal:6, gnd:7 });haut-parleur = obniz.wired("Haut-parleur", {signal:0, gnd: 1});

Étape 2: Faire pivoter l'image de la règle

En HTML, vous pouvez utiliser la "transformation CSS". Par exemple, il s'agit du code de rotation de l'image à 90 degrés.

document.getElementById("roulette").style = "transform:rotate(90deg);";

Pour démarrer et arrêter la rotation lentement, ajoutez une vitesse var pour le degré de rotation par image.

laissez vitesse = 0; laissez deg = 0; fonction rotation (){ deg += vitesse; document.getElementById("roulette").style = "transform:rotate("+deg+"deg);";

}

setInterval(rotation, 10);

Étape 3: bip

Voulez-vous émettre un bip sur la roulette sans changement ? Avec cela, vous pouvez émettre un bip sur 440 Hz 10 ms.

haut-parleur.play(440); attendre obniz.wait(10); haut-parleur.stop();

C'est comment savoir sur le changement de roulette no.

if(Math.floor((deg + speed) / (360/7.0)) - Math.floor(deg / (360/7.0)) >= 1){ onRouletteChange(); }

Donc, c'est le code de rotation et de bip.

laissez vitesse = 0; laissez deg = 0; function rotate(){ //on change la valeur if(Math.floor((deg + speed) / (360/7.0)) - Math.floor(deg / (360/7.0)) >= 1){ onRouletteChange(); } deg += vitesse; document.getElementById("roulette").style = "transform:rotate("+deg+"deg);";

}

setInterval(rotation, 10);

fonction asynchrone onRouletteChange(){

if(!speaker){return;} speaker.play(440); attendre obniz.wait(10); haut-parleur.stop(); }

Étape 4: Démarrez sur le bouton enfoncé

Pour connaître l'état du bouton, ajoutez var buttonStateet définissez la valeur de l'état actuel du bouton.

button.onchange = function(pressed){ buttonState = pressed; };

Et ajoutez également var phase pour l'état actuel de la roulette.phase est défini sur l'un de ceux-ci.

const PHASE_WAIT_FOR_START = 0; const PHASE_ROTATE = 1; const PHASE_STOPPING = 2; const PHASE_STOPPED = 3;

Par exemple, lorsque la phase est PHASE_WAIT_FOR_START et que vous souhaitez passer à la phase suivante.

if(phase == PHASE_WAIT_FOR_START){ vitesse = 0; if(buttonState){ phase = PHASE_ROTATE; } }

Pour accélérer la règle, changez var speed.

if(phase == PHASE_ROTATE){ vitesse = vitesse+0,5; }

Pour accélérer la règle, changez var speed.

:

if(phase == PHASE_STOPPING){ vitesse = vitesse-0,2; }

Ceux-ci font partie de la roulette. Faisons-le!

Étape 5: programmer

Veuillez vous référer ici pour le programme