Lägga till knappar till din HTML5 spel för mobil åtkomst

August 2

Den simpleGame Biblioteket har en praktisk funktion som kallas GameButton för att lägga till en knapp till skärmen på en mobil enhet för din HTML5 spel. Tangentbordet är ett av de enklaste sätten att få input i en vanlig webbläsare, men de flesta mobila enheter saknar tangentbord. Det första problemet är att räkna ut hur man får användarens input när det inte finns något tangentbord.

Lägga till knappar till din HTML5 spel för mobil åtkomst

Den GameButton anpassade knappobjekt börjar med funktionerna i en vanlig HTML-knappen men sedan lägger till några knep för att göra den lämplig för spel. Du kan aktivera knappen med en vanlig mus eller med touch-kontroller, vilket gör den idealisk för spel som kan spelas på båda typer av enheter. Den button.html sidan illustrerar knappen i aktion:

<! 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 spelet;
var bollen;

Funktionen init () {
spel = ny scen ();
game.setSize (200, 200);
ball = new Sprite (spel, "redBall.png", 25, 25);
ball.setSpeed ​​(0);
ball.setPosition (100100);

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

uppdateringsfunktionen () {
game.clear ();
checkButtons ();
ball.update ();
} // End uppdatering

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

Som vanligt är de nya och intressanta inslag som anges i fetstil. Här är hur du lägger ett spel-knappen för att ett spel:

  1. Skapa en variabel för knappen.

    Precis som alla andra spel inslag, börjar du med att skapa en variabel som refererar till knappen.
  2. Bygg GameButton objektet.

    Bygg GameButton objektet i init () metoden. Den enda parameter anger knappens bildtext.
  3. Ställ knappen storlek och placering.

    Du vill tänka lite om hur ditt spelande kommer att arbeta på mobila enheter. Placera dina knappar där de lätt kan nås av spelaren utan att blockera för mycket av utsikten. Observera att du också kommer att vilja göra knapparna stora nog att pressas under värmen av spelet. (Skärmen knappar är mycket bättre för tablettbaserade spel.)
  4. Kontrollera statusknappen under uppdatering ().

    Precis som du kontrollerar normalt tangentbord status under uppdateringen () funktionen kan du även ringa en funktion för att kontrollera din statusknappen. Naturligtvis måste du skriva den här funktionen.
  5. Läs knappens isClicked () metoden.

    Om knappen för närvarande trycks, är värdet av isClicked () sant. Om knappen är för närvarande inte trycks, isClicked () returnerar false. Använd denna metod för att bestämma det aktuella läget för varje knapp och agera därefter.
  6. Behandla en knapp ungefär som tangentbordet.

    Eftersom testa knapparna slutligen återgår Boolean (sant eller falskt) värden, kontroll av knappar oftast känns en hel del som att kontroll av tangentbordet.
  7. Överväg att lägga knappar endast när det behövs.

    Om du vill kan du designa ett spel att visa (och test) knapparna endast när en pekskärm är tillgänglig. Scenobjektet har en speciell variabel kallad touchable. Denna variabel är sant om biblioteket känner av en pekskärm, och annars false. Du kan använda denna variabel för att generera ett anpassat gränssnitt som anpassar sig till spelmiljön.

Normalt kommer du lägga till flera knappar för att ditt gränssnitt, en för att ersätta varje knapp du förväntar användaren att använda (t.ex. pilar och mellanslagstangenten). På så sätt kan du skapa ett virtuellt tangentbord på skärmen. Du kan behöva testa storlek och position på varje tangent för att få en behaglig spelupplevelse.

Observera att bildtexten på knappen är vanliga HTML, så om du vill göra dina knappar baserade på bilder, kan du helt enkelt lägga till lämpliga <img> taggen som en knapp bildtext.