Grafiese roulette met obniz: 5 stappe
Grafiese roulette met obniz: 5 stappe

INHOUDSOPGAWE:

Anonim
Image
Image

Ek het 'n grafiese roulette gemaak. As u op die knoppie druk, begin die roulette draai. As u weer druk, stop die roulette met draai en piep!

Stap 1: Kringloop

Draai Rulette -prentjie
Draai Rulette -prentjie

Ons gebruik slegs 'n bedrade luidspreker en 'n knoppie.

Die pennommers van bedrade word op die program geskryf.

knoppie = obniz.wired ("Button", {signal: 6, gnd: 7}); speaker = obniz.wired ("Speaker", {signal: 0, gnd: 1});

Stap 2: Draai Rulette -prentjie om

In HTML kan u 'CSS -transform' gebruik. Dit is byvoorbeeld die kode vir die draai van die beeld 90 grade.

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

Om stadig te begin en ophou draai, voeg 'n var spoed by vir rotasiegraad per raam.

laat spoed = 0; laat deg = 0; funksie draai () {deg += spoed; document.getElementById ("roulette"). style = "transform: rotate ("+deg+"deg);";

}

setInterval (draai, 10);

Stap 3: Piep

Wil u op die roulette piep sonder om dit te verander? Hiermee kan u op 440Hz 10ms piep.

spreker.speel (440); wag obniz.wait (10); speaker.stop ();

Dit is hoe om te weet oor die verandering van roulette no.

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

Dit is dus die kode vir draai en piep.

laat spoed = 0; laat deg = 0; funksie draai () {// oor veranderingswaarde as (Math.floor ((deg + speed) /(360 /7.0)) - Math.floor (deg /(360 /7.0))> = 1) {onRouletteChange (); } deg += spoed; document.getElementById ("roulette"). style = "transform: rotate ("+deg+"deg);";

}

setInterval (draai, 10);

asynchroniseer funksie onRouletteChange () {

if (! speaker) {return;} speaker.play (440); wag obniz.wait (10); speaker.stop (); }

Stap 4: Begin met die knoppie ingedruk

Om die knoppie se toestand te ken, voeg var buttonStat by en stel die waarde van die huidige knoppie in.

button.onchange = funksie (ingedruk) {buttonState = ingedruk; };

En voeg ook var fase by vir die huidige toestand van roulette.phase is een van hierdie.

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

Byvoorbeeld, as fase PHASE_WAIT_FOR_START is en u na die volgende fase wil gaan.

as (fase == PHASE_WAIT_FOR_START) {spoed = 0; as (buttonState) {fase = PHASE_ROTATE; }}

Verander var spoed om die rolette te bespoedig.

as (fase == PHASE_ROTATE) {spoed = spoed+0,5; }

Verander var spoed om die rulette te bespoedig.

:

as (fase == PHASE_STOPPING) {spoed = spoed-0.2; }

Dit is 'n komponent van roulette. Kom ons maak dit!

Stap 5: Programmeer

Verwys asseblief hier na die program