Jeux gratuits pour Android. Fabriqué en HTML5, vous pouvez donc les lire sur votre téléphone et votre tablette. En plus du système Android, les appareils mobiles Windows, Linux, Mac et Apple sont pris en charge. L'essentiel est que le navigateur soit moderne et que le système soit nouveau. Contrôle par souris ou écran tactile.

Les jeux sur Android sont une option idéale. Ils peuvent être joués sur un ordinateur et un téléphone. Ils peuvent être téléchargés (installés) pour un accès rapide.

Comment télécharger un jeu HTML5 sur votre téléphone

Accédez à la page du jeu sur notre site Web. Ouvrez le jeu en plein écran dans un navigateur moderne comme Chrome. Dans votre navigateur, cliquez sur le bouton à trois points qui masque les commandes de menu permettant de travailler avec la page. Faites défiler la liste et sélectionnez « Ajouter un jeu à écran principal» (Ajouter à l'écran principal - si vous n'avez pas Chrome russifié). Après cela, le jeu apparaîtra sur l’écran de votre téléphone et vous pourrez le lancer directement, sans lancer le navigateur.

Cette opération est disponible pour les téléphones et Tablettes Android et Apple, mais pour ce dernier, la commande peut être située à un endroit différent - dans le menu inférieur de Safari.

Le jeu peut nécessiter Internet pour fonctionner (ou non, selon les fonctionnalités du jeu en question - un certain nombre de jeux sont disponibles hors ligne, mais cela doit être vérifié pour l'instant.) Le jeu est automatiquement téléchargé et enregistré. sur votre téléphone, mais une connexion peut être nécessaire pour télécharger le tableau des enregistrements en ligne ou d'autres fonctions.

Installer comme un jeu normal sur Android

Presque tous les jeux HTML5 ont une version pour le système d'exploitation. Système Android ou iOS. Si installer un jeu HTML5 sur l'écran principal ne vous convient pas (par exemple, vous voulez jouer tout le temps, et pas seulement lorsqu'il y a Internet), recherchez l'icône dans les écrans de veille du jeu. jeu de Google et l'AppStore. Bien que les jeux soient publiés moins fréquemment pour les appareils Apple, et le plus souvent, vous ne pouvez voir que les boutons Android, comme ceci :

Bouton Installer - recherchez-le dans les jeux

Dans les jeux eux-mêmes, le bouton est beaucoup plus petit, ici il est agrandi pour que vous vous en souveniez. Faites attention à la capture d'écran du jeu ci-dessous - essayez d'y trouver ce bouton. Ils mènent au Google Play officiel, où vous pouvez télécharger version gratuite des jeux dotés de fonctionnalités avancées, telles que la possibilité de jouer sans Internet.

Dédié aux fans de jeux Android...

Quand ils m'ont dit pour la première fois qu'une telle chose existait, moi et attention particulière Je n’y ai pas prêté attention, car je ne suis généralement pas une grande fan de toutes ces nouvelles tendances. Cependant, j'ai ensuite réalisé que les jeux Android sont quelque chose comme des jouets « console » - j'ai immédiatement voulu essayer ce qu'ils étaient. Je me souviens encore à quel point je trouvais passionnants les jeux pour les consoles « huit bits » de Dandy ou Sega. Et voici à quoi en est arrivée la civilisation : pensez simplement à un téléphone sans boutons et doté d’une fonction qui vous permet de jouer à des jeux. Pour le moins tentant !

Essentiellement, un jeu est installé sur votre téléphone (ou processus de jeu effectué exclusivement via un navigateur - cette option est également à l'étude), en faisant attention à laquelle vous pouvez rivaliser non seulement avec intelligence artificielle(signification Ordinateur personnel), mais aussi avec d'autres participants (l'ensemble du processus se déroule en ligne).

Avantages évidents du HTML5

Ce n'est un secret pour personne que HTML5 remplace Flash et constitue l'outil de base du Web moderne. C'est pour cette raison que les jeux créés sur cette base ont commencé à fonctionner sur Internet. De plus, aujourd'hui, les jeux qui offrent la possibilité de rivaliser avec d'autres utilisateurs intéressent de plus en plus les clients (surtout s'il n'est pas nécessaire de les télécharger et de les installer sur votre ordinateur. ). Cette fonctionnalité, à son tour, permet de se débarrasser de nombreux malware, qui ne vous permettent pas de travailler sur votre PC.

Tous ces jeux pour Android et PC sont créés pour les navigateurs modernes et pour leur bon fonctionnement, ils ne nécessitent que JavaScript, Canvas et HTML5. En fonction des tâches à accomplir au cours de ce jeu, il est d'usage d'en distinguer quelques variétés :

• Arcade
• casse-tête
• Stratégies
• Voitures volantes
• Aventures
• Course
• Téléchargeable
• Navigateur

Exemples de jeux en ligne sur Android

Auparavant, je n'étais pas du tout intéressé par les jeux sur téléphone, mais tout a changé après mon arrivée sur le site. Là, je me suis familiarisé avec ce que sont les jeux en ligne sur Android et j'ai essayé un grand nombre de « jouets » différents. Comme pour moi, meilleurs jeux sur Android, présenté sur ce site (et pas seulement sur celui-ci) - mahjong et.

Pourquoi je dis ça ? Tout est très simple. Toute ma vie, j'ai privilégié les jeux à caractère stratégique, avec une nette touche de thèmes médiévaux, ainsi que fantastiques. Je peux donc dire que j’ai vraiment trouvé ce qui me plaisait. Mais ce n'est pas le sujet.

Ce que j'ai le plus apprécié sur ce site, c'est qu'il présente le plus différents types jeux en ligne, et d'ailleurs - en effet, ils nécessitent tous très peu en termes de logiciel(en réalité, hormis JavaScript, Canvas et HTML5, rien n'est requis pour leur fonctionnement).

Jeux gratuits pour Android

Grâce au modèle Free2Play, tous les jeux Android présentés sur ce site sont gratuits. Ils peuvent être joués en plein écran sur un ordinateur et une tablette. Mais la principale chose qui les distingue des jeux flash est que vous pouvez enfin y jouer sur votre téléphone.

La stratégie de Brian McHarg pour développer avec succès des jeux multi-navigateurs et multiplateformes en HTML5.

HTML5 : l'héritier légitime du trône des jeux flash. Le développement véritablement multiplateforme permet à un programme, une fois écrit, de s'exécuter sur un PC, une tablette ou un smartphone ; il fonctionnera également sur les Smart TV, les ordinateurs de bureau et les appareils mobiles, y compris les consoles de jeux telles que la Xbox360 ou la PlayStation 3 via leurs navigateurs intégrés. . Il est clair que cela est très attractif pour ceux qui souhaitent développer des jeux pour autant d’appareils et de plateformes que possible.

Le terme HTML5 lui-même, ainsi que les spécifications qu'il représente, ont des significations différentes selon celui qui le décrit. Pour les clients, il s’agit d’une technologie de développement qui promet le véritable Saint Graal d’un développement multiplateforme rentable.

Pour les développeurs, il s'agit d'un nom collectif désignant de nombreuses technologies différentes : JavaScript, WebSockets, WebAudio, Canvas, CSS3 et WebGL n'en sont que quelques-unes, chacune avec ses propres normes, ainsi que des restrictions fortes et faibles d'une plateforme à l'autre.

Et enfin, ce qui semble être le plus important : pour les utilisateurs ! Tout ce qui compte ici, c'est que les utilisateurs souhaitent les mêmes impressions et expériences auxquelles ils sont habitués. Et c'est la tâche principale des développeurs, surtout si leur objectif est d'introduire le jeu sur autant de plateformes que possible.

Multiplateforme PC vs mobile

Nous connaissons tous des exemples fantastiques de jeux HTML5 exécutés dans les navigateurs PC. Ils sont souvent créés par les auteurs de navigateurs pour mettre en valeur les atouts particuliers de leur propre logiciel ou pour des API spécifiques qu'ils aimeraient voir ratifiées dans la spécification HTML5.

Des jeux comme Cutthe Rope et Contre Jour pour Internet Explorer ou quelques-unes des excellentes expériences pour Navigateur Chrome, comme Jam ou Racer, en sont de bons exemples. Si vous êtes intéressé par le potentiel futur, consultez des bibliothèques comme three.js, Turbulenz open source récemment publié ou Epic HTML5 propulsé par Unreal Engine.

Cependant, essayez de regarder l'un de ces exemples sur Android exécutant OS2.3 (Gingerbread) et vous verrez une image complètement différente, et dans certains cas, rien du tout. Oui, ce système d'exploitation a presque trois ans, mais il est toujours installé sur un tiers de tous les appareils du monde. Basé sur Android, et ce chiffre pourrait être encore plus élevé en fonction de votre public cible. Et cela n'arrive pas seulement ancienne version Android. On peut voir la même chose sur Appareils Apple, travailler avec Système iOS 5, ou sur des appareils moins puissants comme le Kindle Fire. En fait, vous ne trouverez désormais aucun appareil mobile capable d’afficher correctement l’un des programmes mentionnés ci-dessus.

Comme mentionné précédemment, la plupart des clients choisissent HTML 5 pour rendre leur jeu par navigateur véritablement multiplateforme. Si vous développez uniquement des jeux pour PC, Unity et Flash sont d'excellentes options à considérer. Les deux disposent d'une excellente prise en charge du navigateur et de la possibilité d'exporter vers des appareils comme candidatures individuelles, grâce à quoi ils peuvent être transférés sur un smartphone ou une tablette avec le même code dont vous avez besoin.

Le développement d'un jeu multiplateforme en HTML5 présente deux défis évidents. La première est une conséquence de la nature vague de la spécification HTML5, qui fait que le support futur sera divisé non pas par type d'appareil, mais par type de navigateur sur chacun de ces appareils. Le deuxième, et le plus difficile pour les développeurs, est le changement constant des capacités des appareils mobiles, ce qui signifie que même avec le même ensemble de fonctions, un jeu sur un appareil sera très différent du même jeu installé sur un autre gadget.

Pour avoir une idée du nombre d'options disponibles, exécutez simplement l'un des nombreux tests JavaScript pour tester les performances de l'appareil. Par exemple, passer 100 images via Canvas fonctionnera relativement bien à 60 images par seconde sur des appareils comme l'iPhone 4S ou 5, le Galaxy S3, le Nexus 7 ou le Lumia 820. Mais essayez le même code sur d'autres appareils comme HTC Désir(19 ips), As de la Galaxie(7 images) ou iPad 1 (9 ips), et vous devrez travailler très dur pour obtenir quelque chose qui ressemble à un jeu viable.

Si votre projet visait un smartphone ou une tablette, et surtout s'il s'agissait d'appareils plus anciens ou à faible consommation, il est alors très important de tester et de décider des points de référence dès le début. Cela est nécessaire pour comprendre les limites de la gamme d'appareils et décider à la fois de l'approche technique et de la conception du jeu sur lequel vous travaillerez.

Si votre projet n'était pas destiné aux smartphones ou aux tablettes, vous devriez probablement reconsidérer vos objectifs. Par exemple, près d’un tiers des pages vues au Royaume-Uni proviennent de smartphones et de tablettes, et ce chiffre augmente à un rythme tel qu’il dépassera les vues sur ordinateur en 2014. Même si les appareils de bureau dominent encore pendant les heures de travail, ils ouvrent toujours la voie le matin. appareils mobiles, et le soir - les tablettes, et ces deux périodes sont idéales pour naviguer sur le Web et jouer à des jeux.

Choisis tes combats

Chunk développe des jeux HTML5 multiplateformes pour les diffuseurs et les marques depuis deux ans et a créé des jeux mobiles sur navigateur pour des clients comme la BBC et Disney qui fonctionnent sur tout, du HTC Desire à l'iPad4, du Nexus 7 à la Xbox 360.


En tant que développeurs, ce serait bien qu’ils décident jusqu’où approfondir ce processus, mais cela dépend d’eux. public cible et les appareils qu'ils utilisent. En travaillant sur des marques pour enfants, ils se sont souvent retrouvés dans les limites des vieux téléphones ou des appareils bon marché et à faible consommation, mais aussi de nombreux autres aspects soigneusement conçus et optimisés, c'est pourquoi ils croient toujours qu'il est possible de développer des produits impressionnants. jeux pour Internet mobile.

Et qu’ont-ils retenu de cette expérience ? Eh bien, si je devais faire une liste de 10 meilleur conseil Pour les développeurs de jeux HTML5, cela ressemblerait à ceci :

1. Décidez de votre public

Examinez les données démographiques et les appareils utilisés par ceux que vous ciblez. Si vous disposez des données, utilisez-les pour déterminer la gamme principale d'appareils que vos visiteurs utilisent et ciblez vos décisions sur ces appareils.

2. Définissez votre conception en termes de technologie.

Oui, cela devrait toujours être le cas, mais les limitations et la fragmentation du HTML5 le rendent encore plus pertinent. WebGL vous permettra de réaliser un excellent jeu de tir à la première personne 3D, mais il est peu probable (lire : pas du tout) de fonctionner sur des tablettes si elles figurent sur votre liste de plateformes cibles.

3. Faites-vous des amis avec caniuse.com

Il s'agit d'un excellent moyen de tester rapidement la prise en charge de toute fonctionnalité HTML5 que vous souhaitez utiliser dans votre développement, sur pratiquement tous les navigateurs et appareils.

4. Utilisez des appareils, pas seulement des simulateurs

Prenez le contrôle autant que possible divers appareils, exécutez autant de versions différentes que possible systèmes d'exploitation. Les simulateurs peuvent vous aider pendant le développement, mais vous ne pouvez obtenir une image précise de la façon dont votre code fonctionnera que sur un appareil réel. Il existe un grand nombre de laboratoires dotés d'appareils de test tels que Open Device Lab, qui vous donnera accès à un grand nombre d'appareils. Sinon, recherchez des endroits comme eBay où vous pouvez trouver d'anciens téléphones et ajoutez-les à votre environnement de test.

5. Restez au courant des changements

La spécification HTML5 évolue constamment, tout comme la prise en charge des appareils, vous devez donc vous tenir au courant des changements dans ces domaines. Cela est particulièrement vrai dans des domaines tels que l'audio, où des fonctionnalités telles que l'API WebAudio peuvent radicalement modifier les capacités.

6. Soyez flexible tout au long du développement

Ce qui fonctionne aujourd’hui ne fonctionnera peut-être pas demain. Ce qui n'est pas disponible pour vous aujourd'hui peut devenir disponible demain. Permettez-vous d'être flexible et de vous adapter aux changements qui surviennent au cours de votre travail.

7. Fonctionnalité d'échelle

Donner la priorité au mobile n’est pas seulement utile dans la conception Web traditionnelle. Regardez comment vous pouvez créer quelque chose de bien pour les smartphones, puis envisagez les fonctionnalités et les performances sur d'autres plates-formes si elles le permettent. Travaillez pour les appareils qui utilisent des agents utilisateurs ou des appareils multimédias et appliquez votre expérience à leur sujet.

8. KISS (Keep It Simple, Stupid) – Ne te complique pas la vie, stupide

Bien sûr, essayez de définir des limites et d'étendre vos capacités, mais n'oubliez pas que vous travaillez avec une technologie qui en est à ses balbutiements, une complexité accrue ou des ambitions de projet exagérées ne feront qu'aggraver votre situation.

9. Décidez de la durée de vie de vos créations

Les fonctionnalités changent constamment et votre contenu peut devenir obsolète trop rapidement avec les nouvelles fonctionnalités disponibles sur les appareils. Si votre jeu devrait durer suffisamment longtemps, prenez le temps de corriger les bugs et de mettre à jour la version du jeu.

Oh oui. Vérifiez vos jeux sur tout le monde appareils disponibles aussi souvent que possible!

Gladiateur, tu iras à mon deuxième signal

HTML5 semble être la technologie de base non officielle pour le développement de jeux multiplateformes pour différents navigateurs, il n'y a pas le moindre doute là-dessus. DANS ce moment– ce n’est pas l’espace le plus fiable, mais c’est normal pour les technologies à leurs balbutiements. Pour vérifier les capacités des navigateurs, il vaut la peine de consulter des sites comme caniuse.com. Testez régulièrement vos jeux sur autant d’appareils que possible et soyez pragmatique dans la conception des jeux. Cela vous aidera non seulement à éviter les problèmes maintenant, mais vous mettra également dans une meilleure position lorsque la prise en charge des appareils s'améliorera, ce qui est inévitable.

Après avoir passé plusieurs jours d'affilée (sans pause pour dormir) à étudier le support HTML5 de tous les gadgets Android préférés, j'ai décidé que ce sujet méritait d'être pris en compte. Dans cet article je vais essayer de vous dévoiler étape par étape toutes les étapes (bien sûr basique/clé/principale) de la création d'une application HTML5 Gaming pour Android depuis l'idée jusqu'à la sortie elle-même Fichier APK. Peut-être que je ne révélerai rien de nouveau aux développeurs chevronnés, mais pour les débutants, j'essaierai de tout décrire le plus simplement possible, avec des captures d'écran et des explications.

Ceux qui souhaitent en savoir plus sont invités à chat.

Idée De manière générale, on peut en dire beaucoup sur le potentiel d'Android, le développement de HTML5 et leur interaction. Je ne ferai pas ça. Alors, allons droit au but.

L'idée de créer un jeu pour Android est probablement dans l'esprit de dizaines de centaines de développeurs, et de ceux qui se considèrent comme tels. Je ne fais pas exception.

L'ensemble du processus sera divisé en plusieurs étapes et la candidature finale comprendra deux parties :
- Wrapper (dans ce cas pour Android)
- Un jeu

Étape 1. Écrire le jeu lui-même Un autre avantage de l'écriture d'un jeu en HTML5 est le fait que les tests ne nécessitent pas beaucoup d'efforts. programmes en cours d'exécution, IDE, émulateurs, etc. Tout ce dont vous avez besoin est un navigateur (dans mon cas, c'est Chromium) et éditeur de texte(Poisson bleu)

Le jeu ne sera pas difficile : il y a un rectangle bleu et il y a un rectangle vert. La tâche du joueur est de faire glisser le rectangle bleu sur le vert, en contournant le rouge, qui se déplace le long du terrain de jeu dans n'importe quelle direction.

Pour développer le jeu j'utiliserai J2ds (moteur de jeu).

Code du jeu terminé :

index.html

Jeu de démonstration sur J2ds v.0
// Initialise le périphérique d'entrée initInput("gameBody"); // Créer une scène scene= createScene("iCanvas", "#aeeaae"); // Commencer à mode plein écran scène.fullScreen(true); post= createPost(scène); note = 5 ; // Créer des rectangles bleu= createRect(vec2di(100, 100), vec2di(30, 30), "blue"); vert= createRect(vec2di(300, 200), vec2di(30, 30), "vert"); vert.dX= -1 ; vert.dY= 1 ; rouge= createRect(vec2di(16, 200), vec2di(30, 30), "rouge"); rouge.dX= 1 ; rouge.dY= -1 ; restart= createRect(vec2di(430, 10), vec2di(60, 60), "#ad21ad"); GameOver= function() ( // Traite la position tactile/souris input.upd(scene); // Dessine le texte scene.drawText(vec2di(5,5), "Score: "+score); // Dessine le texte scene.drawTextOpt (vec2df(140, 100), "Lost!", "bold 40px Courier New", "#326598"); if (input.lClick && input.onNode(restart)) setActivEngine(Game); restart.draw (scene) ; ) Success= function() ( // Traite la position tactile/souris input.upd(scene); // Dessine le texte scene.drawText(vec2di(5,5), "Score: "+score); // Dessine la scène de texte .drawTextOpt(vec2df(140, 100), "Victory!", "bold 40px Courier New", "#326598"); if (input.lClick && input.onNode(restart)) setActivEngine(Game ); restart.draw( scene); ) // Décrire l'état du jeu Game Game= function() ( // Traiter la position tactile/souris input.upd(scene); // Dessiner le texte scene.drawText(vec2di(5 ,5), "Score : "+ score); bleu.color= input.lClick?"jaune" : "bleu"; if (input.lClick) ( red.move(vec2di(red.dX, red.dY)) ; green.move(vec2di(green.dX, green.dY)); blue.move(vec2df(blue.getPosition().x > input.pos.x ? -1*score/2 : 1*score/2, blue.getPosition().y > input.pos.y ? -1* note/2 : 1*note/2)) ; if (green.collisionScene(scene).x != 0) green.dX= -green.dX; if (green.collisionScene(scene).y != 0) green.dY= -green.dY; if (red.collisionScene(scene).x != 0) red.dX= -red.dX; if (red.collisionScene(scene).y != 0) red.dY= -red.dY; ) if (blue.collision(red)) ( input.cancel(); score-= 1; setActivEngine(GameOver); red.setPosition(vec2df(200, 100)); blue.setPosition(vec2df(50, 50)) ; ) if (blue.collision(green)) ( input.cancel(); score+= 1; setActivEngine(Success); red.setPosition(vec2df(200, 100)); blue.setPosition(vec2df(50, 50)) ; blue.setPosition(vec2di(Random(0, 450), Random(0, 250))); ) // Rotation des rectangles blue.turn(1); vert.turn(720/bleu.getDistance(vert)); rouge.turn(Random(1, 5)); // Dessine des objets green.draw(scene); bleu.draw(scène); red.draw(scène); //post.motionBlur(4); ) // Démarrez le jeu avec l'état du jeu Game et FPS 25 startGame(Game, 25);

Vous pouvez ignorer la qualité du code du jeu, car ce n'est pas le but de l'article. Bien que vous puissiez bien sûr optimiser autant que vous le souhaitez, ce processus est probablement sans fin.Étape 2. Android Studio. Créer un wrapper pour un jeu Je ne vais pas comparer la fraîcheur de tel ou tel IDE pour le développement Android avec qui que ce soit, mais je vais vous montrer en utilisant Android Studio comme exemple. Pour travailler, nous aurons besoin de :
- Machine Java (OpenJDK convient à mon Linux) ;
-Distribution Android Studio.

Télécharger et installer.

Une fois tout installé (Ces deux programmes suffisent), lancez Android Studio.

La fenêtre de démarrage s'ouvrira (s'il s'agit du premier lancement), sinon le premier, alors l'IDE lui-même s'ouvrira, mais cela ne change pas l'essence, passons à Gestionnaire de SDK:

Ici, vous devez cocher les cases dont vous avez besoin Versions Android, avec lequel vous travaillerez, dans mon cas c'est Android 4.4.2, vous pouvez tout choisir d'un coup.

L'essentiel est de sélectionner « Outils » et « Extras » et de cliquer sur « Installer les packages ».

Une fois que vous avez tout téléchargé, l'IDE se lancera avec un fond gris terne et plusieurs boutons, cliquez sur le premier et créez un nouveau projet. Si l'EDI a démarré immédiatement en état de fonctionnement, alors : "Fichier->Nouveau->Nouveau projet"

Remplissez les champs obligatoires et cliquez sur Suivant

Sélectionnez la version souhaitée d'Android et Suivant

Ici, nous sélectionnons Activité vide (modèle vide avec Hello, World !)

Dans la fenêtre suivante, remplissez les données pour créer des classes ; je ne les modifierai pas pour plus de clarté :

Nous cliquons solennellement sur Finich et attendons que l'IDE configure tout et le prépare au travail.

Une fenêtre avec le concepteur de formulaire s'ouvrira. Ce n’est pas la même chose que dans Lazare ou Delphes, mais il y a quand même quelque chose de similaire :

Ne vous précipitez pas pour changer quoi que ce soit ou cliquer sur quoi que ce soit, la configuration n'est pas encore terminée. Ouvrez « Tolls->Android->AVD Manager » pour configurer l'émulateur.

Ici, s'il n'y a rien, cliquez sur "Créer un périphérique virtuel" ; s'il y en a un, vous n'êtes pas obligé d'en créer un nouveau, j'en avais déjà un, car Je l'ai "cogné" pendant que je le découvrais. Si vous devez créer un nouvel émulateur, alors tout est simple :
1. Sélectionnez la taille de l'écran et le modèle de téléphone
2. Sélectionnez la version Android (j'ai 4.4.2)
3. Configurez l'appareil.

Dans la troisième étape, plus de détails :

T.K. Notre jeu est étiré horizontalement, vous devez sélectionner le mode paysage.

Lorsque tous les paramètres ont été renseignés, cliquez sur le triangle vert et lancez l'émulateur. Après le démarrage, attendez que l'appareil démarre complètement et que le système d'exploitation démarre :

Ne fermez pas cette fenêtre, une émulation y aura lieu. Vous pouvez maintenant revenir à l'éditeur et modifier l'orientation dans le concepteur de formulaire :

Vous pouvez vous lancer ! Maintenant, c’est tout à fait possible.

Si vous êtes invité à sélectionner un émulateur, vous pouvez cocher la case ci-dessous :

Toutes nos félicitations! Tout fonctionne, testé !

On minimise notre émulateur (mais ne le fermez pas !) et on va dans l'éditeur, tout y est un peu plus compliqué (un peu).
Vous devez passer en mode « Texte ». Votre activité_main décrit tous les éléments présents sur le formulaire. Y compris le formulaire lui-même. Et ce n’est pas du tout une forme.

Parce que Nous créons un jeu en HTML5, mais ici nous n'avons qu'un wrapper pour le jeu, nous supprimons tout le texte et insérons ce qui suit :

Maintenant, si vous revenez au design, il sera différent :

Comme vous pouvez le voir, au lieu de « Hello, World », une WebView s'étend désormais sur tout l'écran. Cet objet est notre « fenêtre » sur le monde du jeu.

Vous pouvez même le lancer et voir s'il y a un écran blanc. Poursuivre.

Cet onglet affiche la structure du projet et tous ses fichiers et ressources internes.

Explication

Nous devons trouver le fichier « manifest » et ajouter la ligne suivante à la définition de « application » :
android:hardwareAccelerated="true"

Il est temps de travailler sur les fonctionnalités de notre « navigateur », car c'est de cela qu'il s'agit ! Ouvrez la classe « MainActivity.java » et supprimez tout ce qui est inutile, ne laissant que l'essentiel :

Explication

paquet com.soft.scanner.demogamehtml5 ; importer android.support.v7.app.AppCompatActivity ; importer android.os.Bundle ; la classe publique MainActivity étend AppCompatActivity ( @Override protected void onCreate(Bundle savingInstanceState) ( super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ) )

Si vous n'avez pas oublié, nous avons ajouté une WebView dans le fichier Activity_main, faites attention à la ligne en gras :

Nous devons déclarer un objet de la classe WebView.

Pour cela, ajoutez à la liste des importations :

Importez android.webkit.WebView ;
Et puis nous déclarons notre objet myWeb dans la classe MainActivity :

WebView myWeb protégé ;
Maintenant, après la ligne setContentView(R.layout.activity_main); insérez le code suivant :

/* Trouvez notre navigateur */ myWeb= (WebView) findViewById(R.id.webView); /* Configurer notre navigateur */ myWeb.getSettings().setUseWideViewPort(true); monWeb.setInitialScale(1); myWeb.getSettings().setJavaScriptEnabled(true); /* Charge la page */ myWeb.loadUrl("file:///android_asset/index.html");

Voilà ce que j'ai obtenu dans l'éditeur :

Et voici ce qu'il y a dans l'émulateur :

Si c’est la même chose pour vous, nous sommes sur la bonne voie !

Il ne reste plus qu'une petite affaire :
Lorsque nous chargeons la page dans notre navigateur, le chemin d'accès au fichier ressemble à ceci : « file:///android_asset/index.html »
Il convient de noter que nous pouvons stocker n’importe quel fichier dans notre jeu et y avoir accès.

Dans notre cas, le dossier clé est : « android_asset », créons-le (oui, il n'est pas dans le projet par défaut) :
« Fichier -> Nouveau -> Dossier -> Dossier Assets », une fenêtre s'ouvrira où il vous suffira d'être d'accord avec l'EDI.
As-tu remarqué? Un nouveau dossier est apparu dans le projet :

Faites un clic droit dessus -> « Afficher dans les fichiers », l'explorateur système s'ouvrira (dans mon cas Nautilus), faites attention au chemin d'accès au dossier. Gardez également à l’esprit que le dossier s’appelle « actifs », mais il est accessible via « android_asset ».

Le fichier index.html est le même index que celui du début de cet article. Eh bien, essayons de le lancer !

Un petit conseil : il est préférable de tester sur un vrai appareil via USB, ainsi les résultats du test seront plus clairs, et contrôler la souris n'est pas l'option la plus pratique, sans parler des clics multiples.

Étape 3. Android Studio. Construire l'application et la signer Lorsque vous avez entièrement débogué le jeu (dans le navigateur ou sur l'émulateur), le wrapper est complètement prêt et toutes les étapes de développement sont derrière vous, vous pouvez assembler l'application. Android Studio vous permet de collecter des applications et de les signer avec vos clés.

Pour créer des clés dans cet IDE, il y a utilitaire spécial"KeyTool".

Passons à la création du fichier exécutable de l'application (« Build -> Generate Signed APK ») :

Si vous n'avez jamais créé de clés et d'alias auparavant, cliquez sur « Créer un nouveau ». Vous pouvez remplir les champs à votre discrétion, l'exactitude des données dépend entièrement de vous.

Le premier champ est le chemin d'accès au dossier dans lequel la clé sera enregistrée. Après avoir cliqué sur Ok, le formulaire sera rempli automatiquement :

Il n'est pas nécessaire de créer de nouvelles clés pour les candidatures ultérieures ; vous pouvez signer d'autres candidatures avec votre clé ; c'est précisément à cela que sert le bouton « Choisir existant ».

À l'étape suivante, l'IDE vous demandera de saisir à nouveau votre mot de passe, puis de spécifier un dossier pour enregistrer le fichier APK.

Vous pouvez maintenant vous détendre et boire, par exemple, du café. Le système a commencé la compilation, le résultat est dans la barre d'état :

Une fois la compilation terminée, le système vous en informera.

Il ne vous reste plus qu'à déplacer le fichier sur votre téléphone/tablette et à l'installer comme une application classique.

Résultat:

MP pour un exemple, si nécessaire.

La technologie sous-jacente qui rend les jeux HTML5 possibles est une combinaison de HTML et de JavaScript. Le langage HTML (Hypertext Markup Language) faisait partie des premières autoroutes Internet, comme on l'appelait à l'époque, et continue d'être utilisé aujourd'hui pour servir tous les sites Web. Le code JavaScript a été ajouté aux navigateurs de deuxième version comme Netscape 2.0 en 1995 et a évolué au fil des années pour devenir plus agréable à lire et à écrire. Au début, on l'appelait DHTML ou HTML dynamique car il était autorisé pour le contenu interactif sans actualisation de page. Cependant, il était difficile à apprendre et à utiliser au début de l’ère du Web. Au fil du temps, Javascript avec l'aide du Google Chrome Les développeurs sont devenus l'un des langages de script les plus rapides. Il propose également plus de modules, de bibliothèques et de scripts disponibles gratuitement que tout autre langage de codage.

Les premiers jeux DHTML étaient très simples. Quelques exemples de jeux à l'époque étaient Tic-Tac-Toe et . Comme les jeux créés avec cette technologie utilisent le standard ouvert HTML5, ces jeux relativement anciens sont encore jouables aujourd'hui dans un environnement moderne. navigateur Internet. Ces technologies sont passées à l'avant-garde des jeux par navigateur car elles ne nécessitent pas de plugins et sont plus sûres à jouer que les technologies plus anciennes. Les jeux HTML5 prennent également en charge et la capacité s'est améliorée pour prendre en charge les jeux 2D et complexes.

Au lieu d'une introduction.
Après avoir passé plusieurs jours d'affilée (sans pause pour dormir) à étudier le support HTML5 de tous les gadgets Android préférés, j'ai décidé que ce sujet méritait d'être pris en compte. Dans cet article je vais essayer de vous dévoiler étape par étape toutes les étapes (bien sûr basique/clé/principale) de la création d'une application de jeu HTML5 pour Android depuis l'idée jusqu'à la sortie du fichier APK lui-même.
Peut-être que je ne révélerai rien de nouveau aux développeurs chevronnés, mais pour les débutants, j'essaierai de tout décrire le plus simplement possible, avec des captures d'écran et des explications.

Ceux qui souhaitent en savoir plus sont invités à chat.

Idée
De manière générale, on peut en dire beaucoup sur le potentiel d'Android, le développement de HTML5 et leur interaction. Je ne ferai pas ça. Alors, allons droit au but.

L'idée de créer un jeu pour Android est probablement dans l'esprit de dizaines de centaines de développeurs, et de ceux qui se considèrent comme tels. Je ne fais pas exception.

Pourquoi HTML5 ? - Nativeité. Vous écrivez un jeu en JS, puis pour absolument n'importe quel système d'exploitation, vous créez un wrapper sous une forme pratique et dans n'importe quel langage.

L'ensemble du processus sera divisé en plusieurs étapes et la candidature finale comprendra deux parties :
- Wrapper (dans ce cas pour Android)
- Un jeu

Étape 1. Écrire le jeu lui-même
Un autre avantage de l'écriture d'un jeu en HTML5 est le fait que les tests ne nécessitent pas de nombreux programmes en cours d'exécution, IDE, émulateurs, etc. Tout ce dont vous avez besoin est un navigateur (dans mon cas c'est Chromium) et un éditeur de texte (BlueFish)

Le jeu sera simple : si le rectangle bleu est un rectangle vert. La tâche du joueur est de faire glisser le rectangle bleu sur le vert, en contournant le rouge, qui se déplace le long du terrain de jeu dans n'importe quelle direction.

Pour développer le jeu j'utiliserai J2ds (moteur de jeu)

Code du jeu terminé :

index.html

Jeu de démonstration sur J2ds v.0
// Initialise le périphérique d'entrée initInput("gameBody"); // Créer une scène scene= createScene("iCanvas", "#aeeaae"); // Démarre en mode plein écran scene.fullScreen(true); post= createPost(scène); note = 5 ; // Créer des rectangles bleu= createRect(vec2di(100, 100), vec2di(30, 30), "blue"); vert= createRect(vec2di(300, 200), vec2di(30, 30), "vert"); vert.dX= -1 ; vert.dY= 1 ; rouge= createRect(vec2di(16, 200), vec2di(30, 30), "rouge"); rouge.dX= 1 ; rouge.dY= -1 ; restart= createRect(vec2di(430, 10), vec2di(60, 60), "#ad21ad"); GameOver= function() ( // Traite la position tactile/souris input.upd(scene); // Dessine le texte scene.drawText(vec2di(5,5), "Score: "+score); // Dessine le texte scene.drawTextOpt (vec2df(140, 100), "Lost!", "bold 40px Courier New", "#326598"); if (input.lClick && input.onNode(restart)) setActivEngine(Game); restart.draw (scene) ; ) Success= function() ( // Traite la position tactile/souris input.upd(scene); // Dessine le texte scene.drawText(vec2di(5,5), "Score: "+score); // Dessine la scène de texte .drawTextOpt(vec2df(140, 100), "Victory!", "bold 40px Courier New", "#326598"); if (input.lClick && input.onNode(restart)) setActivEngine(Game ); restart.draw( scene); ) // Décrire l'état du jeu Game Game= function() ( // Traiter la position tactile/souris input.upd(scene); // Dessiner le texte scene.drawText(vec2di(5 ,5), "Score : "+ score); bleu.color= input.lClick?"jaune" : "bleu"; if (input.lClick) ( red.move(vec2di(red.dX, red.dY)) ; green.move(vec2di(green. dX, green.dY)); blue.move(vec2df(blue.getPosition().x > input.pos.x ? -1*score/2 : 1*score/2, blue.getPosition().y > input.pos.y ? -1*score/2 : 1*score/2)) ; if (green.collisionScene(scene).x != 0) green.dX= -green.dX; if (green.collisionScene(scene).y != 0) green.dY= -green.dY; if (red.collisionScene(scene).x != 0) red.dX= -red.dX; if (red.collisionScene(scene).y != 0) red.dY= -red.dY; ) if (blue.collision(red)) ( input.cancel(); score-= 1; setActivEngine(GameOver); red.setPosition(vec2df(200, 100)); blue.setPosition(vec2df(50, 50)) ; ) if (blue.collision(green)) ( input.cancel(); score+= 1; setActivEngine(Success); red.setPosition(vec2df(200, 100)); blue.setPosition(vec2df(50, 50)) ; blue.setPosition(vec2di(Random(0, 450), Random(0, 250))); ) // Rotation des rectangles blue.turn(1); vert.turn(720/bleu.getDistance(vert)); rouge.turn(Random(1, 5)); // Dessine des objets green.draw(scene); bleu.draw(scène); red.draw(scène); //post.motionBlur(4); ) // Démarrez le jeu avec l'état du jeu Game et FPS 25 startGame(Game, 30);

Vous pouvez ignorer la qualité du code du jeu, car ce n'est pas le but de l'article. Bien que vous puissiez bien sûr optimiser autant que vous le souhaitez, ce processus est probablement sans fin.

Étape 2. Android Studio. Création d'un wrapper de jeu
Je ne vais pas comparer la fraîcheur de tel ou tel IDE pour le développement Android avec qui que ce soit, mais je vais vous montrer en utilisant Android Studio comme exemple. Pour travailler, nous aurons besoin de :
- Machine Java (OpenJDK convient à mon Linux)
-Distribution Android Studio.

Télécharger et installer.
Une fois tout installé (Ces deux programmes suffisent), lancez Android Studio.

La fenêtre de démarrage s'ouvrira (s'il s'agit du premier lancement), sinon le premier, alors l'IDE lui-même s'ouvrira, mais cela ne change pas l'essence, passons au SDK Manager :


Ici, vous devez cocher les versions requises d'Android avec lesquelles vous travaillerez, dans mon cas, il s'agit d'Android 4.4.2, vous pouvez toutes les sélectionner en même temps.

L'essentiel est de sélectionner « Outils » et « Extras » et de cliquer sur « Installer les packages ».

Une fois que vous avez tout téléchargé, l'IDE se lancera avec un fond gris terne et plusieurs boutons, cliquez sur le premier et créez un nouveau projet. Si l'EDI a démarré immédiatement en état de fonctionnement, alors : "Fichier->Nouveau->Nouveau projet"


Remplissez les champs obligatoires et cliquez sur Suivant

Sélectionnez la version souhaitée d'Android et Suivant

Ici, nous sélectionnons Activité vide (modèle vide avec Hello, World !)

Dans la fenêtre suivante, remplissez les données pour créer des classes ; je ne les modifierai pas pour plus de clarté :

Nous cliquons solennellement sur Finich et attendons que l'IDE configure tout et le prépare au travail.

Une fenêtre avec le concepteur de formulaire s'ouvrira. Ce n’est pas la même chose que dans Lazare ou Delphes, mais il y a quand même quelque chose de similaire :

Ne vous précipitez pas pour changer quoi que ce soit ou cliquer sur quoi que ce soit, la configuration n'est pas encore terminée.
Ouvrez « Tolls->Android->AVD Manager » pour configurer l'émulateur.

Ici, s'il n'y a rien, cliquez sur « Créer un périphérique virtuel » ; s'il y en a un, vous n'êtes pas obligé d'en créer un nouveau, j'en avais déjà un, car Je l'ai "cogné" pendant que je le découvrais. Si vous devez créer un nouvel émulateur, alors tout est simple :
1. Sélectionnez la taille de l'écran et le modèle de téléphone
2. Sélectionnez la version Android (j'ai 4.4.2)
3. Configurez l'appareil.

Dans la troisième étape, plus de détails :

T.K. Notre jeu est étiré horizontalement, vous devez sélectionner le mode paysage.

Lorsque tous les paramètres ont été renseignés, cliquez sur le triangle vert et lancez l'émulateur. Après le démarrage, attendez que l'appareil démarre complètement et que le système d'exploitation démarre :

Ne fermez pas cette fenêtre, une émulation y aura lieu. Vous pouvez maintenant revenir à l'éditeur et modifier l'orientation dans le concepteur de formulaire :

Vous pouvez vous lancer ! Maintenant, c’est tout à fait possible.
Si vous êtes invité à sélectionner un émulateur, vous pouvez cocher la case ci-dessous :

Toutes nos félicitations! Tout fonctionne, testé !

On minimise notre émulateur (mais ne le fermez pas !) et on va dans l'éditeur, tout y est un peu plus compliqué (un peu).
Vous devez passer en mode « Texte ». Votre activité_main décrit tous les éléments présents sur le formulaire. Y compris le formulaire lui-même. Et ce n’est pas du tout un formulaire =).

Parce que Nous créons un jeu en HTML5, mais ici nous n'avons qu'un wrapper pour le jeu, nous supprimons tout le texte et insérons ce qui suit :

Maintenant, si vous revenez au design, il sera différent :

Comme vous pouvez le voir, au lieu de « Hello, World », une WebView s'étend désormais sur tout l'écran. Cet objet est notre « fenêtre » sur le monde du jeu.

Vous pouvez même le lancer et voir s'il y a un écran blanc. Poursuivre.

Et puis nous devons nous rendre sur notre projet, pour cela, ouvrez le champ « Projet » à gauche et sélectionnez l'onglet « Android », s'il n'est pas sélectionné :

Cet onglet affiche la structure du projet et tous ses fichiers et ressources internes.

Titre du spoiler

Nous devons trouver le fichier « manifest » et ajouter la ligne suivante à la définition de « application » :
android:hardwareAccelerated="true"

Il est temps de travailler sur les fonctionnalités de notre « navigateur », car c'est de cela qu'il s'agit ! Ouvrez la classe « MainActivity.java » et supprimez tout ce qui est inutile, ne laissant que l'essentiel :

Titre du spoiler

Paquet com.soft.scanner.demogamehtml5 ; importer android.support.v7.app.AppCompatActivity ; importer android.os.Bundle ; la classe publique MainActivity étend AppCompatActivity ( @Override protected void onCreate(Bundle savingInstanceState) ( super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ) )

Si vous n'avez pas oublié, nous avons ajouté une WebView dans le fichier Activity_main, faites attention à la ligne en gras :

Nous devons déclarer un objet de la classe WebView.

Pour cela, ajoutez à la liste des importations :

Importez android.webkit.WebView ;

Et puis nous déclarons notre objet myWeb dans la classe MainActivity :

WebView myWeb protégé ;

Maintenant, après la ligne setContentView(R.layout.activity_main); insérez le code suivant :

/* Trouvez notre navigateur */ myWeb= (WebView) findViewById(R.id.webView); /* Configurer notre navigateur */ myWeb.getSettings().setUseWideViewPort(true); monWeb.setInitialScale(1); myWeb.getSettings().setJavaScriptEnabled(true); /* Charge la page */ myWeb.loadUrl("file:///android_asset/index.html");

Voilà ce que j'ai obtenu dans l'éditeur :

Et voici ce qu'il y a dans l'émulateur :

Si c’est la même chose pour vous, nous sommes sur la bonne voie !

Il ne reste plus qu'une petite affaire :
Lorsque nous chargeons la page dans notre navigateur, le chemin d'accès au fichier ressemble à ceci : « file:///android_asset/index.html »
Il convient de noter que nous pouvons stocker n’importe quel fichier dans notre jeu et y avoir accès.

Dans notre cas, le dossier clé est : « android_asset », créons-le (oui, il n'est pas dans le projet par défaut) :
« Fichier -> Nouveau -> Dossier -> Dossier Assets », une fenêtre s'ouvrira où il vous suffira d'être d'accord avec l'EDI.
As-tu remarqué? Un nouveau dossier est apparu dans le projet :

Faites un clic droit dessus -> « Afficher dans les fichiers », l'explorateur système s'ouvrira (dans mon cas Nautilus), faites attention au chemin d'accès au dossier. Gardez également à l’esprit que le dossier s’appelle « actifs », mais il est accessible via « android_asset ».

Ensuite, tout est assez simple - copiez notre jeu dans le dossier Assets :

Le fichier index.html est le même index que celui du début de cet article. Eh bien, essayons de le lancer !

Un petit conseil : il est préférable de tester sur un vrai appareil via USB, ainsi les résultats du test seront plus clairs, et contrôler la souris n'est pas l'option la plus pratique, sans parler des clics multiples.

Étape 3. Android Studio. Construire l'application et la signer

Lorsque vous avez entièrement débogué le jeu (dans le navigateur ou sur un émulateur), que le wrapper est complètement prêt et que toutes les étapes de développement sont derrière vous, vous pouvez assembler l'application. Android Studio vous permet de collecter des applications et de les signer avec vos clés.

Pour créer des clés, cet IDE dispose d'un utilitaire spécial « KeyTool ».

Passons à la création du fichier exécutable de l'application (« Build -> Generate Signed APK ») :

Si vous n'avez jamais créé de clés et d'alias auparavant, cliquez sur « Créer un nouveau »
Vous pouvez remplir les champs à votre discrétion, l'exactitude des données dépend entièrement de vous.

Le premier champ est le chemin d'accès au dossier dans lequel la clé sera enregistrée.
Après avoir cliqué sur Ok, le formulaire sera rempli automatiquement :

Il n'est pas nécessaire de créer de nouvelles clés pour les applications ultérieures ; vous pouvez signer d'autres applications avec votre clé, c'est pourquoi il y a un bouton « Choisir existant »
À l'étape suivante, l'IDE vous demandera de saisir à nouveau votre mot de passe, puis de spécifier un dossier pour enregistrer le fichier APK.
admin dans la catégorie Non classé. Ajouter aux favoris.