Slik legger du til knapper i HTML5-spillet ditt for mobiltilgang - dummier

SimpleGame-biblioteket har en praktisk funksjon kalt spillknappen for å legge til en knapp på skjermen til en mobil enhet for HTML5-spillet ditt. Tastaturet er en av de enkleste måtene å få innspill i en standard nettleser, men de fleste mobile enheter har ikke tastaturer. Det første problemet er å finne ut hvordan du får brukerinngang når det ikke er tastatur.

Den tilpassede knappobjektobjektet for GameButton begynner med funksjonene i en standard HTML-knapp, men legger til noen triks for å gjøre den egnet til spill. Du kan aktivere knappen med en vanlig mus eller med berøringskontrollene, noe som gjør den ideell for spill som kan spilles på begge typer enheter. Knappen. HTML-siden illustrerer knappen i aksjon:

-knappen. html var btnMove; var spill; var ball; funksjon init () {game = new Scene (); spill. setSize (200, 200); ball = ny Sprite (spill, "redBall. png", 25, 25); ball. setSpeed ​​(0); ball. settposisjon (100, 100); btnMove = ny GameButton ("Move"); btnMove. setPos (70, 150); btnMove. settSize (60, 30); spill. start ();} // end init funksjon oppdatering () {spill. klar(); checkButtons (); ball. oppdatering ();} // end oppdatering funksjonskontrollknapper () { hvis (btnMove. isClicked ()) { ball. setSpeed ​​(3); } annet { ball. setSpeed ​​(0); } // avslutte hvis } // sluttcheckButtons

Som vanlig er de nye og interessante elementene angitt med fet skrift. Slik legger du til en spillknapp til et spill:

1. Opprett en variabel for knappen.

   Som alle andre spillelementer, begynner du med å opprette en variabel som refererer til knappen.

2. Bygg GameButton-objektet.

   Bygg GameButton-objektet i init () -metoden. Den enkelte parameteren angir knappens bildetekst.

3. Still inn knappens størrelse og posisjon.

   Du vil tenke litt om hvordan spillingen din vil fungere på mobile enheter. Plasser knappene dine der de lett kan nås av spilleren uten å blokkere for mye av visningen. Merk at du også vil gjøre knappene store nok til å bli presset under varmen i spillet. (Knappene på skjermen er mye bedre for nettbaserte spill.)

4. Kontroller knappestatus under oppdatering ().

   På samme måte som du vanligvis kontrollerer tastaturstatus under oppdateringen () -funksjonen, kan du også ringe en funksjon for å sjekke knappens status. Selvfølgelig må du skrive denne funksjonen.

5. Les knappens isClicked () -metode.

   Hvis knappen for øyeblikket trykkes, er verdien av isClicked () sant. Hvis knappen ikke trykkes for øyeblikket, returneres isClicked () false.Bruk denne metoden for å bestemme gjeldende tilstand for hver knapp og opptre tilsvarende.

6. Behandle en knapp mye som tastaturet.

   Fordi å teste knappene til slutt, returneres boolske (ekte eller falske) verdier, vil kontroll av knapper vanligvis føles mye som å sjekke tastaturet.

7. Vurder bare å legge til knapper når det er nødvendig.

   Hvis du vil, kan du designe et spill som bare skal vises (og test) når en berøringsskjerm er tilgjengelig. Scene-objektet har en spesiell variabel kalt berørbar. Denne variabelen er sant hvis biblioteket registrerer en berøringsskjerm, og falsk på annen måte. Du kan bruke denne variabelen til å generere et tilpasset grensesnitt som tilpasser seg spillemiljøet.

Normalt legger du til flere knapper i grensesnittet ditt, en som erstatter hver nøkkel du forventer at brukeren skal bruke (for eksempel piler og mellomromstasten). På denne måten kan du opprette et virtuelt tastatur på skjermen. Du må kanskje teste størrelsen og plasseringen til hver tast for å få en komfortabel spillopplevelse.

Vær oppmerksom på at bildeteksten på knappen er vanlig HTML, så hvis du vil lage knappene dine basert på bilder, kan du bare legge til riktig

tag som en knapptekst.