Hvordan legge til knapper i HTML5 spill for Mobile Access

December 15  by Eliza

Den simpleGame Biblioteket har en hendig funksjon kalt GameButton for å legge til en knapp på skjermen på en mobil enhet for HTML5 spillet. Tastaturet er en av de enkleste måtene å få innspill i en standard nettleser, men de fleste mobile enheter ikke har tastatur. Det første problemet er å finne ut hvordan du får brukerundersøkelser når det er ingen tastatur.

Hvordan legge til knapper i HTML5 spill for Mobile Access


Den GameButton definert knapp objekt begynner med egenskapene til en standard HTML-knappen, men så legger til noen triks for å gjøre det egnet for gaming. Du kan aktivere knappen med en vanlig mus eller med berøringskontroller, noe som gjør den ideell for spill som kan spilles på begge typer enheter. Den button.html side illustrerer knappen i aksjon:

<! DOCTYPE HTML>
<Html lang = "en-US">
<Head>
<Meta charset = "UTF-8">
<Title> button.html </ title>
<Script type = "text / javascript"
src = "simpleGame.js"> </ script>
<Script type = "text / javascript">
Var btnMove;
Var spillet;
Var ball;

funksjon init () {
Spillet = ny Scene ();
game.setSize (200, 200);
ball = ny Sprite (spill, "redBall.png", 25, 25);
ball.setSpeed ​​(0);
ball.setPosition (100 100);

btnMove = ny GameButton ("Move");
btnMove.setPos (70, 150);
btnMove.setSize (60, 30);
game.start ();
} // End init

funksjon oppdatering () {
game.clear ();
checkButtons ();
ball.update ();
} // End oppdatering

funksjons checkButtons () {
if (btnMove.isClicked ()) {
ball.setSpeed ​​(3);
} Else {
ball.setSpeed ​​(0);
} // End if
} // end checkButtons
</ Script>
</ Head>
<Body onload = "init ()">
</ Body>
</ Html>

Som vanlig er de nye og interessante elementer uthevet. Her er hvordan du legger til et spill-knappen for å et spill:

  1. Lag en variabel for knappen.

    Som alle andre spill element, begynner du ved å opprette en variabel for å referere til knappen.

  2. Bygge GameButton objekt.

    Bygge GameButton objektet i init () -metoden. Den eneste parameteren indikerer knappens bildetekst.

  3. Sette knappen størrelse og plassering.

    Det er lurt å tenke litt om hvordan spillingen vil fungere på mobile enheter. Plassere knappene der de lett kan nås av spilleren uten å blokkere for mye av utsikten. Merk at du også ønsker å få knappene stor nok til å bli trykket i varmen av spillet. (Skjermelementene er mye bedre for tablet-baserte spill.)

  4. Sjekk knapp status under oppdatering ().

    Akkurat som du normalt sjekke tastatur status under oppdateringen () -funksjonen, kan du også ringe en funksjon for å sjekke knappen status. Selvfølgelig må du skrive denne funksjonen.

  5. Les knappens isClicked () -metoden.

    Hvis knappen blir nå trykket, er verdien av isClicked () sant. Hvis knappen ikke er i ferd med å bli presset, isClicked () returnerer false. Bruk denne metoden for å fastslå den nåværende tilstanden i hver knapp og handle deretter.

  6. Behandle en knapp mye som tastaturet.

    Fordi teste knappene til slutt returnerer Boolsk (sann eller usann) verdier, sjekker for knapper vanligvis føler en hel masse som sjekker for tastaturet.

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

    Hvis du vil, kan du lage et spill for å vise (og test) knappene når en berøringsskjerm er tilgjengelig. Scene objekt har en spesiell variabel kalt touchable. Denne variabelen er sant hvis biblioteket sanser en berøringsskjerm, og falsk ellers. Du kan bruke denne variabelen for å generere en tilpasset grensesnitt som tilpasser seg spillemiljøet.

Normalt vil du legge til flere knapper til grensesnittet, for å erstatte hver tast du forventer at brukeren kan bruke (for eksempel piler og space). På denne måten kan du lage et virtuelt tastatur på skjermen. Du må kanskje teste størrelsen og plasseringen av hver tast for å få en behagelig spillopplevelse.

Merk at bildeteksten til knappen er vanlig HTML, så hvis du ønsker å gjøre knappene basert på bilder, kan du bare legge til det aktuelle <img> tag som en knapp bildetekst.