Ingyenes játékok Androidra. html5-ben készült, így telefonján és táblagépén is lejátszhatja őket. Az Android rendszeren kívül Windows, Linux, Mac és Apple mobileszközök is támogatottak. A lényeg az, hogy a böngésző modern és a rendszer új. Vezérlés egérrel vagy érintőképernyővel.

Az Android játékok ideális választást jelentenek. Számítógépen és telefonon is játszhatók. A gyors hozzáférés érdekében letölthetők (telepíthetők).

Hogyan lehet letölteni egy HTML5 játékot a telefonra

Nyissa meg a játék oldalát weboldalunkon. Nyissa meg a játékot teljes képernyőn egy modern böngészőben, például a Chrome-ban. A böngészőben kattintson a hárompontos gombra, amely elrejti az oldallal való munkavégzéshez szükséges menüparancsokat. Görgessen le a listában, és válassza ki a „Játék hozzáadása ehhez fő képernyő” (Hozzáadás a főképernyőhöz – ha nincs oroszosított Chrome-ja). Ezt követően a játék megjelenik a telefon képernyőjén, és közvetlenül, a böngésző elindítása nélkül indíthatja el.

Ez a művelet telefonokhoz és Android táblagépekés az Apple, de az utóbbinál a parancs más helyen található - a Safari alsó menüjében.

Előfordulhat, hogy a játék működéséhez internetre van szükség (vagy nem, az adott játék jellemzőitől függően – számos játék elérhető offline módban, de ezt egyelőre ellenőrizni kell.) A játék automatikusan letöltődik és mentésre kerül. telefonján, de kapcsolatra lehet szükség az online rekordtáblázat vagy egyéb funkciók letöltéséhez.

Telepítse normál játékként Androidra

Szinte minden HTML5-játéknak van verziója az operációs rendszerhez. Android rendszer vagy iOS. Ha egy HTML5-játék telepítése a főképernyőre nem felel meg Önnek – mondjuk állandóan szeretne játszani, és nem csak akkor, ha van internet –, akkor keresse meg az ikont a játék képernyővédőiben A Google Playés AppStore. Bár a játékokat ritkábban adják ki az Apple eszközökre, és gyakrabban csak Android gombokat láthat, például:

Telepítés gomb – keresd a játékokban

Magukban a játékokban a gomb sokkal kisebb, itt ki van növelve, így emlékezni kell rá. Ügyeljen az alábbi játék képernyőképére – próbálja meg ott megtalálni ezt a gombot. A hivatalos Google Playhez vezetnek, ahonnan letöltheti ingyenes verzió fejlett funkciókkal rendelkező játékok – például az internet nélküli játék lehetősége.

Az Android játékok rajongóinak ajánlva...

Amikor először mondták, hogy létezik ilyen, én és speciális figyelem Nem figyeltem, mert általában nem vagyok nagy rajongója ezeknek az újszerű trendeknek. Ekkor azonban rájöttem, hogy az Android játékok olyanok, mint a „konzolos” játékok – azonnal ki akartam próbálni, mik is azok. Még mindig emlékszem, milyen izgalmasnak tartottam a Dandy vagy a Sega „nyolcbites” konzoljaira szánt játékokat. És íme, hová jutott a civilizáció – gondoljunk csak bele, egy telefon gombok nélkül és olyan funkcióval, amely lehetővé teszi a játékot. Enyhén szólva csábító!

Lényegében egy játék telepítve van a telefonra (vagy játék folyamata kizárólag böngészőn keresztül hajtják végre - ezt a lehetőséget is mérlegelik), figyelve, amellyel nemcsak versenyezhet mesterséges intelligencia(értsd Személyi számítógép), hanem más résztvevőkkel is (az egész folyamat online zajlik).

A HTML5 nyilvánvaló előnyei

Nem titok, hogy a HTML5 váltja fel a Flasht, és a modern web alapvető eszköze. Ez az oka annak, hogy az ennek alapján készített játékok elkezdtek működni az interneten belül – ráadásul manapság egyre jobban érdeklik a vásárlókat a más felhasználókkal való versenyzést biztosító játékok (főleg, ha nem szükséges letölteni és telepíteni a számítógépre ). Ez a funkció viszont sokaktól segít megszabadulni rosszindulatú, amelyek nem teszik lehetővé a számítógépen való munkát.

Mindezek az Android- és PC-játékok modern böngészőkhöz készültek, és sikeres működésükhöz csak JavaScript, Canvas és HTML5 szükséges. Attól függően, hogy milyen feladatokat kell végrehajtani a játék során, szokás megkülönböztetni néhány fajtát:

• Árkád
• összerakós játékaik
• Stratégiák
• Repülő autók
• Kalandok
• Verseny
• Letölthető
• Böngésző

Példák online játékokra Androidon

Korábban egyáltalán nem érdekeltek a telefonos játékok, de minden megváltozott, miután az oldalra kerültem. Ott megismerkedtem azzal, hogy milyen online játékok vannak Androidon, és rengeteg különféle „játékot” próbáltam ki. Ami engem illet, legjobb játékok Androidon, ezen az oldalon (és nem csak ezen) bemutatva - mahjong és.

Miért mondom ezt? Minden nagyon egyszerű. Egész életemben előnyben részesítettem a stratégiai beállítottságú játékokat, amelyekben világos a középkori témák, valamint a fantasy. Szóval elmondhatom, hogy tényleg megtaláltam azt, ami tetszett. De nem ez a lényeg.

Az tetszett a legjobban ezen az oldalon, hogy ez mutatja be a legjobban különböző típusok online játékok, és emellett – valóban, ezek mind nagyon keveset igényelnek szoftver(a valóságban a JavaScripten, a Canvason és a HTML5-ön kívül semmi sem szükséges a működésükhöz).

Ingyenes játékok Androidra

A Free2Play modellnek köszönhetően az ezen az oldalon bemutatott összes Android-játék ingyenes. Teljes képernyőn játszhatók számítógépen és táblagépen is. De a legfontosabb, ami megkülönbözteti őket a flash játékoktól, hogy végre lejátszhatod őket a telefonodon.

Brian McHarg stratégiája a böngészők közötti, többplatformos játékok sikeres fejlesztésére HTML5-ben.

HTML5: a flash játékok trónjának jogos örököse. A valóban többplatformos fejlesztés lehetővé teszi, hogy a program megírva futhasson PC-n, táblagépen vagy okostelefonon; Smart TV-n, asztali számítógépen és mobileszközökön is működni fog, beleértve a játékkonzolokat, például az Xbox360-at vagy a PlayStation 3-at beépített böngészőjükön keresztül. . Nyilvánvaló, hogy ez nagyon vonzó azok számára, akik minél több eszközre és platformra szeretnének játékokat fejleszteni.

Maga a HTML5 kifejezés, valamint az általa képviselt specifikációk eltérő jelentéssel bírnak attól függően, hogy ki írja le. Az ügyfelek számára ez egy olyan fejlesztési technológia, amely a költséghatékony platformok közötti fejlesztés igazi Szent Grálját ígéri.

A fejlesztők számára ez számos különféle technológia gyűjtőneve: a JavaScript, a WebSockets, a WebAudio, a Canvas, a CSS3 és a WebGL csak néhány, mindegyik saját szabványokkal, erős és gyenge korlátozásokkal platformról platformra.

És végül, ami a legfontosabbnak tűnik: a felhasználóknak! Itt csak az számít, hogy a felhasználók ugyanazokat a benyomásokat és élményeket akarják, amelyeket megszoktak. A fejlesztőknek pedig ez a fő feladata, főleg, ha az a céljuk, hogy minél több platformon megismertessék a játékot.

PC vs mobil cross-platform

Most már mindannyian ismerünk fantasztikus példákat a PC-böngészőkben futó HTML5-játékokra. Ezeket gyakran a böngészők készítői hozták létre, hogy bemutassák saját szoftvereik erősségeit, vagy olyan konkrét API-k számára, amelyeket szeretnének ratifikálni a HTML5 specifikációjában.

Olyan játékok, mint a Cutthe Rope és a Contre Jour internet böngésző vagy néhány kiváló kísérlet ahhoz Chrome böngésző, mint a Jam vagy a Racer, remek példák erre. Ha érdekli a jövőbeni lehetőségek, nézzen meg olyan könyvtárakat, mint a three.js, a nemrégiben kiadott nyílt forráskódú Turbulenz vagy az Unreal Engine által hajtott Epic HTML5.

Azonban próbáljon meg egy ilyen példát megnézni az OS2.3 (Gingerbread) operációs rendszert futtató Androidon, és teljesen más képet fog látni, bizonyos esetekben pedig semmit. Igen, ez az operációs rendszer majdnem három éves, de még mindig az összes eszköz egyharmadára telepítve van Android alapú, és ez a szám a célközönségtől függően még magasabb is lehet. És ez nem csak így történik régi verzió Android. Ugyanezt láthatod rajta Apple eszközök, dolgozni vele iOS rendszer 5, vagy kevésbé erős eszközökön, mint például a Kindle Fire. Valójában most egyetlen olyan mobileszközt sem fog találni, amely megfelelően megjeleníti a fent említett programokat.

Amint korábban említettük, a legtöbb ügyfél a HTML 5-öt választja, hogy böngészőjátékát valóban többplatformossá tegye. Ha csak PC-re fejleszt játékokat, akkor a Unity és a Flash remek választás. Mindkettő kiváló böngészőtámogatással és az eszközökre való exportálás lehetőségével rendelkezik egyedi alkalmazások, aminek köszönhetően átvihetők okostelefonra vagy táblagépre ugyanazzal a kóddal, mint amilyenre szükséged van.

A platformok közötti játék HTML5-ben való fejlesztése során két nyilvánvaló kihívás van. Az első a HTML5 specifikáció homályos természetének következménye, ami azt eredményezi, hogy a jövőbeni támogatást nem az eszköz típusa szerint osztják fel, hanem az egyes eszközök böngészőjének típusa szerint. A második, és a fejlesztők számára legnehezebb a mobileszközök képességeinek állandó változása, ami azt jelenti, hogy még azonos funkciókészlettel is az egyik eszközön lévő játék nagyon különbözik a másik kütyüre telepített játéktól.

Ahhoz, hogy képet kapjon arról, hány lehetőség van, egyszerűen futtassa az egyik JavaScript-tesztet az eszköz teljesítményének teszteléséhez. Például 100 képkocka áthaladása a Canvason viszonylag jól lejátszható 60 képkocka/másodperc sebességgel olyan eszközökön, mint az iPhone 4S vagy 5, Galaxy S3, Nexus 7 vagy Lumia 820. De próbálja meg ugyanazt a kódot más eszközökön, például HTC Desire(19 képkocka/mp), Galaxy Ace(7 képkocka) vagy iPad 1 (9 képkocka/mp), és nagyon keményen kell dolgoznod, hogy bármit, ami egy életképes játékhoz hasonlítson.

Ha a projektje egy okostelefonra vagy táblagépre irányult, és különösen, ha ezek régebbi vagy alacsony fogyasztású eszközöket tartalmaztak, akkor nagyon fontos, hogy korán tesztelje és döntse el a benchmarkokat. Erre azért van szükség, hogy megértsük az eszközválaszték korlátait, és döntsünk mind a technikai megközelítésről, mind a játék kialakításáról, amelyen dolgozni fogunk.

Ha a projektje nem az okostelefonokra vagy táblagépekre irányult, akkor valószínűleg újra kell gondolnia a céljait. Például az Egyesült Királyságban az oldalletöltések csaknem egyharmada okostelefonról és táblagépről származik, és ez a szám olyan mértékben növekszik, hogy 2014-ben megelőzi az asztali megtekintéseket. Bár munkaidőben még mindig dominálnak az asztali gépek, délelőtt még mindig ők vezetnek. mobil eszközök, esténként pedig - tabletek, és ez a két időszak ideális a webböngészésre és a játékra.

Válassza ki a csatáit

A Chunk két éve fejleszt többplatformos HTML5-játékokat műsorszolgáltatók és márkák számára, és olyan böngészőalapú mobiljátékokat készített olyan ügyfelek számára, mint a BBC és a Disney, amelyek a HTC Desire-től az iPad4-ig, a Nexus 7-től az Xbox 360-ig mindenhol futnak.


Fejlesztőként jó lenne, ha eldöntenék, milyen mélyen menjenek bele ebbe a folyamatba, de ez rajtuk múlik. célközönségés az általuk használt eszközök. A gyermekmárkákon dolgozva gyakran a régi telefonok, vagy az olcsó, kis fogyasztású készülékek korlátai között találták magukat, de sok más szempontot is gondosan megterveztek és optimalizáltak, ezért továbbra is úgy gondolják, hogy lehet lenyűgözőt fejleszteni. játékok mobil internethez.

És mit vittek el ebből az élményből? Nos, ha 10-es listát kellene készítenem legjobb tanács A HTML5 játékfejlesztők számára ez így fog kinézni:

1. Döntse el a közönségét

Tekintse meg a demográfiai adatokat, és azt, hogy a megcélzott személyek milyen eszközöket használnak. Ha rendelkezik az adatokkal, használja azokat arra, hogy meghatározza a látogatói által használt eszközök alapvető körét, és döntéseit ezekre az eszközökre célozza.

2. Határozza meg tervezését technológiai szempontból.

Igen, ennek mindig így kell lennie, de a HTML5 korlátai és töredezettsége még relevánsabbá teszi. A WebGL lehetővé teszi, hogy kiváló 3D-s első személyű lövöldözős játékot készítsen, de valószínűtlen (értsd: egyáltalán nem) működik táblagépeken, ha azok szerepelnek a célplatformok listáján.

3. Barátkozz a caniuse.com oldallal

Ez egy nagyszerű módja annak, hogy gyorsan tesztelje a fejlesztés során használni kívánt HTML5-funkciók támogatását – gyakorlatilag minden böngészőn és eszközön.

4. Használjon eszközöket, ne csak szimulátorokat

Vegye át az irányítást, amennyire csak lehetséges különféle eszközök, futtasson minél többféle verziót operációs rendszer. A szimulátorok segíthetnek a fejlesztés során, de pontos képet csak arról kaphatsz, hogy valódi eszközön hogyan fog működni a kódod. Rengeteg laboratórium van tesztelő eszközökkel, mint például az Open Device Lab, amely hatalmas számú eszközhöz biztosít hozzáférést. Ellenkező esetben keressen olyan helyeket, mint például az eBay, ahol régi telefonokat találhat, és hozzáadhatja őket a tesztkörnyezethez.

5. Legyen naprakész a változásokkal

A HTML5 specifikációja folyamatosan változik, csakúgy, mint az eszköztámogatás, ezért naprakésznek kell lennie az ezeken a területeken bekövetkezett változásokkal. Ez különösen igaz az olyan területekre, mint például a hang, ahol az olyan szolgáltatások, mint a WebAudio API, gyökeresen megváltoztathatják a képességeket.

6. Legyen rugalmas a fejlesztés során

Ami ma működik, lehet, hogy holnap nem. Ami ma nem elérhető, holnap elérhetővé válhat. Engedje meg magának, hogy rugalmas legyen, és alkalmazkodjon a munkája során bekövetkező változásokhoz.

7. Skála funkció

A mobil előtérbe helyezése nem csak a hagyományos webdesignban hasznos. Nézze meg, hogyan hozhat létre valami jót okostelefonokhoz, majd fontolja meg a funkcionalitást és a teljesítményt más platformokon, ha lehetővé teszik. Dolgozzon azokon az eszközökön, amelyek felhasználói ügynököket vagy médiaeszközöket használnak, és alkalmazza velük kapcsolatos tapasztalatait.

8. KISS (Keep It Simple, Stupid) – Ne bonyolítsd az életed, hülye

Mindenképpen próbáljon határokat meghatározni és bővíteni a képességeket, de ne feledje, hogy gyerekcipőben járó technológiával dolgozik, a megnövekedett komplexitás vagy a felfújt projektambiciók csak rontják helyzetét.

9. Döntse el a tervek élettartamát

A funkciók folyamatosan változnak, és a tartalmai túl gyorsan elavulhatnak az eszközökön elérhető új funkciók miatt. Ha a játék várhatóan elég sokáig fog tartani, szánjon időt a hibák kijavítására és a játék verziójának frissítésére.

Ó, igen. Ellenőrizze a játékait mindenkinél elérhető eszközök amilyen gyakran csak lehet!

Gladiátor, megy a második jelemre

Úgy tűnik, hogy a HTML5 a platformok közötti játékfejlesztés nem hivatalos alaptechnológiája különböző böngészők, a legcsekélyebb kétség sem fér hozzá. BAN BEN Ebben a pillanatban– nem ez a legmegbízhatóbb hely, de ez normális a még gyerekcipőben járó technológiáknál. A böngészők képességeinek ellenőrzéséhez érdemes felkeresni az olyan oldalakat, mint a caniuse.com. Tesztelje rendszeresen játékait a lehető legtöbb eszközön, és legyen gyakorlatias a játéktervezéssel. Ezzel nemcsak elkerülheti a problémákat, hanem jobb helyzetbe is kerülhet, amikor az eszköz támogatása javul, ami elkerülhetetlen.

Miután több napot egymás után (alvási szünet nélkül) tanulmányoztam az összes kedvenc Android kütyü HTML5 támogatását, úgy döntöttem, hogy érdemes erre a témára odafigyelni. Ebben a cikkben megpróbálom lépésről lépésre feltárni a HTML5 Gaming alkalmazás Androidra készítésének minden szakaszát (természetesen alap/kulcs/fő) az ötlettől a kiadásig. APK fájl. Talán nem árulok el semmi újat a tapasztalt fejlesztőknek, de a kezdőknek megpróbálok mindent a lehető legegyszerűbben leírni, képernyőképekkel és magyarázatokkal.

A többet megtudni vágyókat a kat.

Ötlet Általánosságban sok mindent el lehet mondani az Androidban rejlő lehetőségekről, a HTML5 fejlesztéséről és ezek interakciójáról. Nem fogom ezt csinálni. Szóval, térjünk közvetlenül a lényegre.

Valószínűleg több tízszáz fejlesztő fejében van az ötlet, hogy Androidra készítsenek játékot, és azok, akik annak tartják magukat. Nem vagyok kivétel.

Az egész folyamat több lépésből áll, és a végső kérelem két részből áll:
- Burkolat (ebben az esetben Androidhoz)
- Játék

1. lépés: Maga a játék megírása A játék HTML5-ben való megírásának másik előnye, hogy a teszteléshez nincs szükség programok futtatása, IDE, emulátorok és így tovább. Csak egy böngészőre van szüksége (esetemben ez a Chromium) és szöveg szerkesztő(Kékhal)

A játék nem lesz nehéz: van egy kék téglalap és van egy zöld téglalap. A játékos feladata, hogy a kék téglalapot ráhúzza a zöldre, megkerülve a pirosat, amely a játéktéren bármely irányba mozog.

A játék fejlesztéséhez a J2ds-t (játékmotor) fogom használni.

Kész játék kódja:

index.html

Demo játék J2ds v.0-n
// A beviteli eszköz inicializálása initInput("gameBody"); // Jelenet létrehozása scene= createScene("iCanvas", "#aeeaae"); // Kezdd teljes képernyős mód scene.fullScreen(true); post= createPost(scene); pontszám= 5; // Téglalapok létrehozása blue= createRect(vec2di(100, 100), vec2di(30, 30), "blue"); green= createRect(vec2di(300, 200), vec2di(30, 30), "zöld"); zöld.dX= -1; zöld.dY= 1; red= createRect(vec2di(16, 200), vec2di(30, 30), "piros"); piros.dX= 1; piros.dY= -1; restart= createRect(vec2di(430, 10), vec2di(60, 60), "#ad21ad"); GameOver= function() ( // Az érintés / egérpozíció feldolgozása input.upd(scene); // Rajzolja meg a szöveget scene.drawText(vec2di(5,5), "Score: "+score); // Rajzolja meg a szöveget scene.drawTextOpt (vec2df(140, 100), "Elveszett!", "bold 40px Courier New", "#326598"); if (input.lClick && input.onNode(restart)) setActivEngine(Game); restart.draw (scene) ; ) Success= function() ( // Az érintés / egérpozíció feldolgozása input.upd(scene); // Rajzolja meg a szöveget scene.drawText(vec2di(5,5), "Score: "+score); // Rajzolja meg a szövegjelenetet .drawTextOpt(vec2df(140, 100), "Győzelem!", "bold 40px Courier New", "#326598"); if (input.lClick && input.onNode(restart)) setActivEngine(Game ); restart.draw( scene); ) // A játék állapotának leírása Game Game= function() ( // Az érintés / egér pozíció feldolgozása input.upd(scene); // Rajzolja meg a szöveget scene.drawText(vec2di(5) ,5), "Score: "+ score); blue.color= input.lClick?"yellow" : "blue"; if (input.lClick) ( red.move(vec2di(red.dX, red.dY)) green.move(vec2di(zöld. dX, zöld.dY)); blue.move(vec2df(blue.getPosition().x > input.pos.x ? -1*pont/2: 1*pont/2, blue.getPosition().y > input.poz.y ? -1* pontszám/2: 1*pont/2)) ; if (zöld.ütközésScene(scene).x != 0) zöld.dX= -zöld.dX; if (zöld.ütközésScene(scene).y != 0) zöld.dY= -zöld.dY; if (piros.ütközésScene(scene).x != 0) red.dX= -red.dX; if (piros.ütközésJelen(jelenet).y != 0) red.dY= -red.dY; ) if (kék.ütközés(piros)) ( input.cancel(); score-= 1; setActivEngine(GameOver); red.setPosition(vec2df(200, 100)); blue.setPosition(vec2df(50, 50)) ; ) if (kék.ütközés(zöld)) ( input.cancel(); pontszám+= 1; setActivEngine(siker); red.setPosition(vec2df(200, 100)); blue.setPosition(vec2df(50, 50)) blue.setPosition(vec2di(Random(0, 450), Random(0, 250))); ) // A téglalapok elforgatása blue.turn(1); green.turn(720/blue.getDistance(zöld)); red.turn(Véletlen(1, 5)); // Objektumok rajzolása green.draw(scene); kék.rajz(jelenet); piros.rajz(jelenet); //post.motionBlur(4); ) // Indítsa el a játékot a játék állapotával Game and FPS 25 startGame(Game, 25);

A játék kódjának minőségét figyelmen kívül hagyhatod, mert nem ez a cikk célja. Bár természetesen bármennyit optimalizálhat, ez a folyamat valószínűleg végtelen. 2. lépés: Android Studio. Burkoló készítés egy játékhoz Nem fogom senkivel összehasonlítani ennek vagy annak az IDE-nek az Android fejlesztéshez való menőségét, de bemutatom az Android Studio példáját. A munkához szükségünk lesz:
- Java gép (az OpenJDK alkalmas az én Linuxomra);
- Android Studio terjesztés.

Letöltés és telepítés.

Miután minden telepítve van (ez a két program elég), indítsa el az Android Studio-t.

Megnyílik a start ablak (ha ez az első indítás), ha nem az első, akkor maga az IDE nyílik meg, de a lényegen nem változtat, menjünk SDK-kezelő:

Itt be kell jelölnie a szükséges négyzeteket Android verziók, amivel dolgozni fogsz, esetemben Android 4.4.2, egyszerre választhatsz.

A lényeg az, hogy válassza ki az "Eszközök" és az "Extrák" elemet, és kattintson a "csomagok telepítése" gombra.

Miután mindent letöltött, az IDE tompa szürke háttérrel és több gombbal elindul, kattintson az elsőre, és hozzon létre egy új projektet. Ha az IDE azonnal működőképes állapotban indult, akkor: „Fájl->Új->Új projekt”

Töltse ki a kötelező mezőket, majd kattintson a Tovább gombra

Válassza ki az Android kívánt verzióját, majd a Tovább

Itt kiválasztjuk az Üres tevékenységet (üres sablon a Hello, World! felirattal)

A következő ablakban töltse ki az adatokat az osztályok létrehozásához; az egyértelműség kedvéért nem módosítom:

Ünnepélyesen rákattintunk a Finich gombra, és megvárjuk, amíg az IDE mindent beállít, és felkészíti a munkára.

Megnyílik egy ablak az űrlaptervezővel. Nem ugyanaz, mint a Lazarusban vagy a Delphiben, de van valami hasonló:

Ne rohanjon semmit megváltoztatni vagy kattintson semmire, a beállítás még nem fejeződött be. Nyissa meg a „Tolls->Android->AVD Manager” elemet az emulátor konfigurálásához.

Itt, ha nincs semmi, kattintson a „Virtuális eszköz létrehozása” gombra; ha van, akkor nem kell újat létrehozni, nekem már volt, mert Én „megütögettem” miközben kitaláltam. Ha új emulátort kell létrehoznia, akkor minden egyszerű:
1. Válassza ki a képernyő méretét és a telefon modelljét
2. Válassza ki az Android verziót (4.4.2-es verzióm van)
3. Állítsa be a készüléket.

A harmadik lépésben további részletek:

T.K. A játékunk vízszintesen feszített, tájkép módot kell választani.

Ha az összes beállítást megadta, kattintson a zöld háromszögre, és indítsa el az emulátort. Az indítás után várja meg, amíg az eszköz teljesen elindul, és az operációs rendszer elindul:

Ne zárja be ezt az ablakot, emuláció fog megtörténni benne. Most visszatérhet a szerkesztőbe, és megváltoztathatja a tájolást az űrlaptervezőben:

Indíthatod! Most már határozottan lehetséges.

Ha emulátor kiválasztását kéri, jelölje be az alábbi négyzetet:

Gratulálunk! Minden működik, tesztelve!

Minimalizáljuk az emulátorunkat (de ne zárjuk be!), és menjünk a szerkesztőbe. Ott minden egy kicsit bonyolultabb (kicsit).
Át kell váltania "Szöveg" módba. Az activity_main az űrlapon található összes elemet leírja. Magát az űrlapot is beleértve. És ez egyáltalán nem forma.

Mert HTML5-ben készítünk egy játékot, de itt csak a játékhoz van egy wrapper, eltávolítjuk az összes szöveget és beillesztjük a következőket:

Most, ha ismét a tervezésre vált, másképp fog kinézni:

Amint láthatja, a „Hello, World” helyett most egy WebView jelenik meg a teljes képernyőn. Ez a tárgy a mi „ablakunk” a játék világába.

Akár elindíthatja is, és megnézheti, van-e fehér képernyő. Menj tovább.

Ez a lap mutatja a projekt szerkezetét, valamint az összes belső fájlt és erőforrást.

Magyarázat

Meg kell találnunk a „manifest” fájlt, és hozzá kell adnunk a következő sort az „alkalmazás” definíciójához:
android:hardwareAccelerated="true"

Itt az ideje, hogy dolgozzunk „böngészőnk” funkcióin, mert ez az! Nyissa meg a „MainActivity.java” osztályt, és távolítson el mindent, ami felesleges, és csak a legfontosabbat hagyja meg:

Magyarázat

csomag com.soft.scanner.demogamehtml5; android.support.v7.app.AppCompatActivity importálása; import android.os.Bundle; public class MainActivity kiterjeszti az AppCompatActivity-t ( @Override védett void onCreate(Bundle savedInstanceState) ( super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ) )

Ha nem felejtette el, hozzáadtunk egy WebView-t az activity_main fájlhoz, ügyeljen a vastagon szedett sorra:

Deklarálnunk kell a WebView osztály egy objektumát.

Ehhez adja hozzá az importált listához:

android.webkit.WebView importálása;
Ezután deklaráljuk a myWeb objektumunkat a MainActivity osztályon belül:

Védett WebView myWeb;
Most a setContentView(R.layout.activity_main) sor után; illessze be a következő kódot:

/* Keresse meg böngészőnket */ myWeb= (WebView) findViewById(R.id.webView); /* A böngésző konfigurálása */ myWeb.getSettings().setUseWideViewPort(true); myWeb.setInitialScale(1); myWeb.getSettings().setJavaScriptEnabled(true); /* Az oldal betöltése */ myWeb.loadUrl("file:///android_asset/index.html");

Ezt találtam a szerkesztőben:

És íme, mi van az emulátorban:

Ha ez Önre is igaz, jó úton járunk!

Már csak egy apróság van hátra:
Ahol betöltjük az oldalt a böngészőnkbe, a fájl elérési útja így néz ki: „file:///android_asset/index.html”
Meg kell jegyezni, hogy a játékunkon belül bármilyen fájlt tárolhatunk, és hozzáférhetünk hozzájuk.

Esetünkben a kulcsmappa: „android_asset”, hozzuk létre (igen, alapértelmezés szerint nincs benne a projektben):
„Fájl -> Új -> Mappa -> Eszközök mappa”, megnyílik egy ablak, ahol csak meg kell állapodnia az IDE-vel.
Észrevetted? Egy új mappa jelent meg a projektben:

Kattintson rá jobb gombbal -> „Megjelenítés a fájlokban”, megnyílik a rendszerböngésző (esetemben a Nautilus), figyeljen a mappa elérési útjára. Ne feledje, hogy a mappát „eszközöknek” nevezik, de az „android_asset” segítségével érhető el.

Az index.html fájl ugyanaz az index, mint a cikk elejétől. Nos, próbáljuk meg elindítani!

Egy kis tanács: a legjobb, ha valódi eszközön tesztelünk USB-n keresztül, így tisztábbak lesznek a teszteredmények, és az egér vezérlése sem a legkényelmesebb megoldás, nem beszélve a többszöri kattintásról.

3. lépés: Android Studio. Alkalmazás felépítése és aláírása A játék teljes hibakeresése után (böngészőben vagy emulátoron) a wrapper teljesen készen áll, és a fejlesztés minden szakasza mögötted van, összeállíthatod az alkalmazást. Az Android Studio lehetővé teszi alkalmazások összegyűjtését és aláírását a kulcsaival.

Kulcsok létrehozásához ebben az IDE-ben van speciális segédprogram"KeyTool".

Folytassuk a végrehajtható alkalmazásfájl létrehozásával („Build -> Generate Signed APK”):

Ha még nem hozott létre kulcsokat és álneveket, kattintson az „Új létrehozása” gombra. A mezőket saját belátása szerint töltheti ki, az adatok pontossága teljes mértékben Önt terheli.

Az első mező a kulcs mentési mappájának elérési útja. Az OK gombra kattintás után az űrlap automatikusan kitöltésre kerül:

A következő alkalmazásokhoz nem szükséges új kulcsokat létrehozni, más alkalmazásokat is aláírhat a kulcsával, pontosan erre szolgál a „Válasszon meglévőt” gomb.

A következő lépésben az IDE újra megkéri a jelszó megadására, majd adjon meg egy mappát az APK fájl mentéséhez.

Most már pihenhet és ihat például kávét A rendszer elkezdte a fordítást, az eredmény az állapotsorban:

Az összeállítás befejezése után a rendszer értesíti Önt erről.

Most már csak át kell helyeznie a fájlt a telefonjára/táblagépére, és telepítenie kell, mint egy szokásos alkalmazást.

Eredmény:

Példaként PM, ha szükséges.

A HTML5-játékokat lehetővé tevő mögöttes technológia a HTML és a JavaScript kombinációja. A Hypertext Markup Language (HTML) része volt a korai internetes szupersztrádának, ahogy akkoriban nevezték, és ma is használják minden webhely kiszolgálására. A JavaScript kódot 1995-ben adták hozzá a második verziójú böngészőkhöz, például a Netscape 2.0-hoz, és az évek során egyre kellemesebbé vált az olvasás és az írás. A kezdeti időkben DHTML-nek vagy dinamikus HTML-nek nevezték, mert engedélyezték az interaktív tartalmak számára az oldal frissítése nélkül. A korai webkorszakban azonban nehéz volt megtanulni és használni. Idővel a Javascript segítségével a Google Chrome A fejlesztők az egyik leggyorsabb szkriptnyelvvé váltak. Ezenkívül több szabadon elérhető modullal, könyvtárral és szkripttel rendelkezik, mint bármely más kódolási nyelv.

A korai DHTML játékok nagyon egyszerűek voltak. Néhány példa az akkori játékokra a Tic-Tac-Toe és a . Mivel az ezzel a technológiával készült játékok a HTML5 nyílt szabványát használják, ezek a viszonylag ősi játékok még ma is játszhatóak modern környezetben. böngésző. Ezek a technológiák a böngészős játékok élvonalába kerültek, mivel nem igényelnek beépülő modulokat, és játékuk biztonságosabb, mint a régebbi technológiák. A HTML5-játékok is támogatják, és a képességük tovább fejlődött az összetett 2D és

Bevezető helyett.
Miután több napot egymás után (alvási szünet nélkül) tanulmányoztam az összes kedvenc Android kütyü HTML5 támogatását, úgy döntöttem, hogy érdemes erre a témára odafigyelni. Ebben a cikkben megpróbálom lépésről lépésre feltárni a HTML5 játék alkalmazás Androidra készítésének minden szakaszát (természetesen alap/kulcs/fő) az ötlettől egészen az APK fájl kiadásáig.
Talán nem árulok el semmi újat a tapasztalt fejlesztőknek, de a kezdőknek megpróbálok mindent a lehető legegyszerűbben leírni, képernyőképekkel és magyarázatokkal.

A többet megtudni vágyókat a kat.

Ötlet
Általánosságban sok mindent el lehet mondani az Androidban rejlő lehetőségekről, a HTML5 fejlesztéséről és ezek interakciójáról. Nem fogom ezt csinálni. Szóval, térjünk közvetlenül a lényegre.

Valószínűleg több tízszáz fejlesztő fejében van az ötlet, hogy Androidra készítsenek játékot, és azok, akik annak tartják magukat. Nem vagyok kivétel.

Miért HTML5? - A bennszülöttség. JS-ben írsz egy játékot, majd minden operációs rendszerhez létrehozol egy csomagolóanyagot kényelmes formában és bármilyen nyelven.

Az egész folyamat több lépésből áll, és a végső kérelem két részből áll:
- Burkolat (ebben az esetben Androidhoz)
- Játék

1. lépés Magának a játéknak a megírása
A HTML5-ben történő játékírás másik előnye, hogy a teszteléshez nincs szükség egy csomó futó programra, IDE-re, emulátorra stb. Csak egy böngészőre (esetemben Chromiumra) és egy szövegszerkesztőre (BlueFish) van szüksége.

A játék egyszerű lesz: ha a kék téglalap zöld téglalap. A játékos feladata, hogy a kék téglalapot ráhúzza a zöldre, megkerülve a pirosat, amely a játéktéren bármely irányba mozog.

A játék fejlesztéséhez a J2ds-t (játékmotor) fogom használni.

Kész játék kódja:

index.html

Demo játék J2ds v.0-n
// A beviteli eszköz inicializálása initInput("gameBody"); // Jelenet létrehozása scene= createScene("iCanvas", "#aeeaae"); // Indítás teljes képernyős módban scene.fullScreen(true); post= createPost(scene); pontszám= 5; // Téglalapok létrehozása blue= createRect(vec2di(100, 100), vec2di(30, 30), "blue"); green= createRect(vec2di(300, 200), vec2di(30, 30), "zöld"); zöld.dX= -1; zöld.dY= 1; red= createRect(vec2di(16, 200), vec2di(30, 30), "piros"); piros.dX= 1; piros.dY= -1; restart= createRect(vec2di(430, 10), vec2di(60, 60), "#ad21ad"); GameOver= function() ( // Az érintés / egérpozíció feldolgozása input.upd(scene); // Rajzolja meg a szöveget scene.drawText(vec2di(5,5), "Score: "+score); // Rajzolja meg a szöveget scene.drawTextOpt (vec2df(140, 100), "Elveszett!", "bold 40px Courier New", "#326598"); if (input.lClick && input.onNode(restart)) setActivEngine(Game); restart.draw (scene) ; ) Success= function() ( // Az érintés / egérpozíció feldolgozása input.upd(scene); // Rajzolja meg a szöveget scene.drawText(vec2di(5,5), "Score: "+score); // Rajzolja meg a szövegjelenetet .drawTextOpt(vec2df(140, 100), "Győzelem!", "bold 40px Courier New", "#326598"); if (input.lClick && input.onNode(restart)) setActivEngine(Game ); restart.draw( scene); ) // A játék állapotának leírása Game Game= function() ( // Az érintés / egér pozíció feldolgozása input.upd(scene); // Rajzolja meg a szöveget scene.drawText(vec2di(5) ,5), "Score: "+ score); blue.color= input.lClick?"yellow" : "blue"; if (input.lClick) ( red.move(vec2di(red.dX, red.dY)) ; green.move(vec2di(zöld. dX, zöld.dY)); blue.move(vec2df(blue.getPosition().x > input.pos.x ? -1*pontszám/2: 1*pontszám/2, kék.getPosition().y > bemenet.poz.y ? -1*pontszám/2: 1*pontszám/2)) ; if (zöld.ütközésScene(scene).x != 0) zöld.dX= -zöld.dX; if (zöld.ütközésScene(scene).y != 0) zöld.dY= -zöld.dY; if (piros.ütközésScene(scene).x != 0) red.dX= -red.dX; if (piros.ütközésJelen(jelenet).y != 0) red.dY= -red.dY; ) if (kék.ütközés(piros)) ( input.cancel(); score-= 1; setActivEngine(GameOver); red.setPosition(vec2df(200, 100)); blue.setPosition(vec2df(50, 50)) ; ) if (kék.ütközés(zöld)) ( input.cancel(); pontszám+= 1; setActivEngine(siker); red.setPosition(vec2df(200, 100)); blue.setPosition(vec2df(50, 50)) blue.setPosition(vec2di(Random(0, 450), Random(0, 250))); ) // A téglalapok elforgatása blue.turn(1); green.turn(720/blue.getDistance(zöld)); red.turn(Véletlen(1, 5)); // Objektumok rajzolása green.draw(scene); kék.rajz(jelenet); piros.rajz(jelenet); //post.motionBlur(4); ) // Indítsa el a játékot a játék állapotával Game and FPS 25 startGame(Game, 30);

A játék kódjának minőségét figyelmen kívül hagyhatod, mert nem ez a cikk célja. Bár természetesen bármennyit optimalizálhat, ez a folyamat valószínűleg végtelen.

2. lépés: Android Studio. Játékcsomagoló készítés
Nem fogom senkivel összehasonlítani ennek vagy annak az IDE-nek az Android-fejlesztéshez való menőségét, de bemutatom az Android Studio példáját. A munkához szükségünk lesz:
- Java gép (az OpenJDK alkalmas az én Linuxomra)
- Android Studio terjesztés.

Letöltés és telepítés.
Miután minden telepítve van (ez a két program elég), indítsa el az Android Studio-t.

Megnyílik a start ablak (ha ez az első indítás), ha nem az első, akkor megnyílik maga az IDE, de a lényegen nem változtat, menjünk az SDK Managerbe:


Itt kell kipipálni az Android szükséges verzióit, amivel dolgozni fogsz, esetemben Android 4.4.2, egyszerre választhatod ki az összeset.

A lényeg az, hogy válassza ki az "Eszközök" és az "Extrák" elemet, és kattintson a "csomagok telepítése" gombra.

Miután mindent letöltött, az IDE tompa szürke háttérrel és több gombbal elindul, kattintson az elsőre, és hozzon létre egy új projektet. Ha az IDE azonnal működőképes állapotban indult, akkor: „Fájl->Új->Új projekt”


Töltse ki a kötelező mezőket, majd kattintson a Tovább gombra

Válassza ki az Android kívánt verzióját, majd a Tovább

Itt kiválasztjuk az Üres tevékenységet (üres sablon a Hello, World! felirattal)

A következő ablakban töltse ki az adatokat az osztályok létrehozásához; az egyértelműség kedvéért nem módosítom:

Ünnepélyesen rákattintunk a Finich gombra, és megvárjuk, amíg az IDE mindent beállít, és felkészíti a munkára.

Megnyílik egy ablak az űrlaptervezővel. Nem ugyanaz, mint a Lazarusban vagy a Delphiben, de van valami hasonló:

Ne rohanjon semmit megváltoztatni vagy kattintson semmire, a beállítás még nem fejeződött be.
Nyissa meg a „Tolls->Android->AVD Manager” elemet az emulátor konfigurálásához.

Itt, ha nincs semmi, kattintson a „Virtuális eszköz létrehozása” gombra; ha van, akkor nem kell újat létrehozni, nekem már volt, mert Én „megütögettem” miközben kitaláltam. Ha új emulátort kell létrehoznia, akkor minden egyszerű:
1. Válassza ki a képernyő méretét és a telefon modelljét
2. Válassza ki az Android verziót (4.4.2-es verzióm van)
3. Állítsa be a készüléket.

A harmadik lépésben további részletek:

T.K. A játékunk vízszintesen feszített, tájkép módot kell választani.

Ha az összes beállítást megadta, kattintson a zöld háromszögre, és indítsa el az emulátort. Az indítás után várja meg, amíg az eszköz teljesen elindul, és az operációs rendszer elindul:

Ne zárja be ezt az ablakot, emuláció fog megtörténni benne. Most visszatérhet a szerkesztőbe, és megváltoztathatja a tájolást az űrlaptervezőben:

Indíthatod! Most már határozottan lehetséges.
Ha emulátor kiválasztását kéri, jelölje be az alábbi négyzetet:

Gratulálunk! Minden működik, tesztelve!

Minimalizáljuk az emulátorunkat (de ne zárjuk be!), és menjünk a szerkesztőbe. Ott minden egy kicsit bonyolultabb (kicsit).
Át kell váltania "Szöveg" módba. Az activity_main az űrlapon található összes elemet leírja. Magát az űrlapot is beleértve. És ez egyáltalán nem forma =).

Mert HTML5-ben készítünk egy játékot, de itt csak a játékhoz van egy wrapper, eltávolítjuk az összes szöveget és beillesztjük a következőket:

Most, ha ismét a tervezésre vált, másképp fog kinézni:

Amint láthatja, a „Hello, World” helyett most egy WebView jelenik meg a teljes képernyőn. Ez a tárgy a mi „ablakunk” a játék világába.

Akár elindíthatja is, és megnézheti, van-e fehér képernyő. Menj tovább.

Ezután el kell mennünk a projektünkhöz, ehhez nyissa meg a „Projekt” mezőt a bal oldalon, és válassza az „Android” lapot, ha nincs kiválasztva:

Ez a lap mutatja a projekt szerkezetét, valamint az összes belső fájlt és erőforrást.

Spoiler cím

Meg kell találnunk a „manifest” fájlt, és hozzá kell adnunk a következő sort az „alkalmazás” definíciójához:
android:hardwareAccelerated="true"

Itt az ideje, hogy dolgozzunk „böngészőnk” funkcióin, mert ez az! Nyissa meg a „MainActivity.java” osztályt, és távolítson el mindent, ami felesleges, és csak a legfontosabbat hagyja meg:

Spoiler cím

com.soft.scanner.demogamehtml5 csomag; android.support.v7.app.AppCompatActivity importálása; import android.os.Bundle; public class MainActivity kiterjeszti az AppCompatActivity-t ( @Override védett void onCreate(Bundle savedInstanceState) ( super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ) )

Ha nem felejtette el, hozzáadtunk egy WebView-t az activity_main fájlhoz, ügyeljen a vastagon szedett sorra:

Deklarálnunk kell a WebView osztály egy objektumát.

Ehhez adja hozzá az importált listához:

android.webkit.WebView importálása;

Ezután deklaráljuk a myWeb objektumunkat a MainActivity osztályon belül:

Védett WebView myWeb;

Most a setContentView(R.layout.activity_main) sor után; illessze be a következő kódot:

/* Keresse meg böngészőnket */ myWeb= (WebView) findViewById(R.id.webView); /* A böngésző konfigurálása */ myWeb.getSettings().setUseWideViewPort(true); myWeb.setInitialScale(1); myWeb.getSettings().setJavaScriptEnabled(true); /* Az oldal betöltése */ myWeb.loadUrl("file:///android_asset/index.html");

Ezt találtam a szerkesztőben:

És íme, mi van az emulátorban:

Ha ez Önre is igaz, jó úton járunk!

Már csak egy apróság van hátra:
Ahol betöltjük az oldalt a böngészőnkbe, a fájl elérési útja így néz ki: „file:///android_asset/index.html”
Meg kell jegyezni, hogy a játékunkon belül bármilyen fájlt tárolhatunk, és hozzáférhetünk hozzájuk.

Esetünkben a kulcsmappa: „android_asset”, hozzuk létre (igen, alapértelmezés szerint nincs benne a projektben):
„Fájl -> Új -> Mappa -> Eszközök mappa”, megnyílik egy ablak, ahol csak meg kell állapodnia az IDE-vel.
Észrevetted? Egy új mappa jelent meg a projektben:

Kattintson rá jobb gombbal -> „Megjelenítés a fájlokban”, megnyílik a rendszerböngésző (esetemben a Nautilus), figyeljen a mappa elérési útjára. Ne feledje, hogy a mappát „eszközöknek” nevezik, de az „android_asset” segítségével érhető el.

Ezután minden nagyon egyszerű - másolja a játékunkat az eszközök mappájába:

Az index.html fájl ugyanaz az index, mint a cikk elejétől. Nos, próbáljuk meg elindítani!

Egy kis tanács: a legjobb, ha valódi eszközön tesztelünk USB-n keresztül, így tisztábbak lesznek a teszteredmények, és az egér vezérlése sem a legkényelmesebb megoldás, nem beszélve a többszöri kattintásról.

3. lépés: Android Studio. A pályázat elkészítése és aláírása

Amikor a játék teljes hibakeresését elvégezte (böngészőben vagy emulátoron), a wrapper teljesen készen áll, és a fejlesztés minden szakasza mögöttetek van, összeállíthatja az alkalmazást. Az Android Studio lehetővé teszi alkalmazások összegyűjtését és aláírását a kulcsaival.

A kulcsok létrehozásához ez az IDE rendelkezik egy speciális „KeyTool” segédprogrammal.

Folytassuk a végrehajtható alkalmazásfájl létrehozásával („Build -> Generate Signed APK”):

Ha még nem hozott létre kulcsokat és álneveket, kattintson az „Új létrehozása” gombra.
A mezőket saját belátása szerint töltheti ki, az adatok pontossága teljes mértékben Önt terheli.

Az első mező a kulcs mentési mappájának elérési útja.
Az OK gombra kattintás után az űrlap automatikusan kitöltésre kerül:

A következő alkalmazásokhoz nem szükséges új kulcsokat létrehozni, más alkalmazásokat is aláírhat a kulcsával, ezért van egy „Válasszon meglévőt” gomb.
A következő lépésben az IDE újra megkéri a jelszó megadására, majd adjon meg egy mappát az APK fájl mentéséhez.
admin a kategóriában: Nincs kategorizálva. Hozzáadás a könyvjelzőkhöz.