Cum se adaugă butoane în jocul HTML5 pentru accesul mobil - dummies

Biblioteca SimpleGame are o funcție utilă numită GameButton pentru adăugarea unui buton pe ecranul unui dispozitiv mobil pentru jocul dvs. HTML5. Tastatura este una dintre cele mai ușoare căi de acces la un browser standard, dar majoritatea dispozitivelor mobile nu au tastaturi. Prima problemă este să dai seama cum să ajungi utilizatorul atunci când nu există tastatură.

Obiectul butonului CustomButton începe cu caracteristicile unui buton HTML standard, dar apoi adaugă câteva trucuri pentru al face potrivit pentru jocuri. Puteți activa butonul cu un mouse obișnuit sau cu comenzile tactile, ceea ce îl face ideal pentru jocuri care pot fi redate pe ambele tipuri de dispozitive. Butonul. Pagina html ilustrează butonul în acțiune: butonul

. html var btnMove; var joc; var ball; funcția init () {game = new Scene (); joc. setSize (200, 200); minge = Sprite nou (joc, "redBall. png", 25, 25); minge. setSpeed ​​(0); minge. setPoziție (100, 100); btnMove = nou jocButton ("Mutare"); btnMove. setPos (70, 150); btnMove. setSize (60, 30); joc. start ();} // end init function update () {joc. clar(); checkButtons (); mingea. actualizare ();} // end update funcția checkButtons () { dacă (btnMove.isClicked ()) { minge. setSpeed ​​(3); } altceva { minge. setSpeed ​​(0); } // se termină dacă } // verifică sfârșitul butoanelor

Ca de obicei, elementele noi și interesante sunt indicate cu caractere aldine. Iată cum adăugați un buton de joc la un joc:

1. Creați o variabilă pentru buton.

   Ca orice alt element de joc, începeți prin crearea unei variabile care să se refere la buton.

2. Construiți obiectul GameButton.

   Construiți obiectul GameButton în metoda init (). Parametrul unic indică legenda butonului.

3. Setați dimensiunea și poziția butonului.

   Veți dori să vă gândiți puțin la modul în care jocul dvs. va funcționa pe dispozitivele mobile. Plasați butoanele unde pot fi ușor accesate de către player fără a bloca prea mult vederea. Rețineți că veți dori, de asemenea, să faceți butoanele suficient de mari pentru a fi apăsate în timpul căderii jocului. (Butoanele de pe ecran sunt mult mai bune pentru jocurile bazate pe tablete.)

4. Starea butonului de verificare în timpul actualizării ().

   La fel cum verificați în mod normal starea tastaturii în timpul funcției de actualizare (), puteți apela și o funcție pentru a verifica starea butoanelor. Desigur, va trebui să scrieți această funcție.

5. Citiți metoda isClicked () a butonului.

   Dacă butonul este în prezent apăsat, valoarea isClicked () este adevărată. Dacă butonul nu este în prezent apăsat, isClicked () revine false.Utilizați această metodă pentru a determina starea curentă a fiecărui buton și pentru a acționa corespunzător.

6. Bucurați-vă de un buton asemănător cu tastatura.

   Deoarece testarea butoanelor întoarce în cele din urmă valorile booleene (adevărate sau false), verificarea butoanelor simte, de obicei, o mulțime de verificare a tastaturii.

7. Luați în considerare adăugarea butoanelor numai atunci când este necesar.

   Dacă doriți, puteți proiecta un joc pentru a afișa (și a testa) butoanele numai atunci când un ecran tactil este disponibil. Obiectul Scene are o variabilă specială numită touchable. Această variabilă este adevărată dacă biblioteca simte un ecran tactil și altfel fals. Puteți utiliza această variabilă pentru a genera o interfață personalizată care se adaptează mediului de redare.

În mod normal, veți adăuga mai multe butoane la interfața dvs., unul pentru a înlocui fiecare cheie pe care doriți să o utilizați (de exemplu, săgețile și bara de spațiu). În acest fel, puteți crea o tastatură virtuală pe ecran. Este posibil să fie necesar să testați dimensiunea și poziția fiecărei taste pentru a obține o experiență de joc confortabilă.

Rețineți că subtitlul butonului este obișnuit în HTML, deci dacă doriți să faceți butoanele bazate pe imagini, puteți să adăugați pur și simplu eticheta

adecvată sub forma unei butoane de buton.