⛹🏻 🙆🏾 🙈 Las Vegas personnel, ou un jeu dans l'extension de navigateur 👇🏽 🐩 🕯️

Récemment, un ami et moi avons commencé à parler de jeux de cartes. Il a dit qu'il ne pouvait jouer au poker, mais il ne l'avait pas fait depuis longtemps, parce qu'il avait oublié toutes les combinaisons. Alors ils ont parlé ... Je me suis souvenu qu'il y a quelques années, j'ai écrit cinq jeux de cartes, y compris le poker Texas Hold'em, où à tout moment pendant le jeu, vous pouvez voir non seulement les combinaisons collectées, mais aussi toutes les options potentielles avec des cartes non encore ouvertes. Cela pourrait bien devenir un outil pédagogique et aider à rafraîchir les règles dans le processus de jeu avec les bots.

J'ai décidé de refactoriser mon ancien code, ainsi que de modifier les graphismes. Le design a toujours été difficile pour moi, ce n'est pas le mien. En comptant sur au moins un peu d'inspiration, j'ai allumé la bande originale de GTA San-Andreas, celle avec de la musique country, de la radio K-Rose. Il me semble qu'il transmet bien l'atmosphère de Las Vegas. Je n'y suis jamais allé, mais ça véhicule définitivement! Je jure devant mon étoile de shérif. (Si quoi que ce soit - c'est du plastique, donc ce n'est pas dommage ...) Et je n'étais pas trop paresseux pour entrer dans le jeu légendaire lui-même et faire le tour de Las Venturas, un prototype virtuel de la capitale mondiale du jeu.

Oui, je sais que Las Vegas est située au Nevada et non au Texas. Mais de tels jeux sont associés, après tout, tout d'abord à Vegas. Le Texas Hold'em y a été introduit et a ensuite gagné en popularité. Vegas est un producteur de jeux.

Il y a quelques années, pour une raison quelconque, j'ai publié mon jeu uniquement dans le Windows Store, qui n'utilise pas beaucoup de trafic. Bien que, peut-être bientôt, en raison de l'arrêt de Windows 7 et de la transition massive vers 10, ce magasin d'applications aura un second souffle. Nous lui souhaitons bonne chance et lui tenons les poings à Vegas. Mais l'article ne traite pas de cela, mais du second souffle de mon jeu. Il est écrit en pur Javascript, et j'ai décidé qu'aujourd'hui, il pourrait bien fonctionner comme une extension de navigateur pour Chrome et Firefox à partir des magasins de modules complémentaires correspondants, ainsi que sous la forme d'un assemblage pour Windows 7-10 basé sur Chrome.

Le jeu s’appelle «Poker 3 Bags» et comprend cinq jeux: «Texas Hold'em Poker», «Throwing Fool», «Czech Fool», «Three Sticks» et le jeu de mon auteur «3 Bags». Seuls les jeux avec des bots sur l'ordinateur local sont disponibles.

Pays

Donc, sur la musique country. Les mélodies de GTA San-Andreas suggéraient qu'il serait bien d'ajouter un peu de thèmes de cow-boy au jeu: après tout, Poker Texas Hold'em ici sera le jeu principal. J'ai placé le chapeau de cowboy et les pistolets sur le bandeau tout en étalant les cartes.

Firefox

Et aussi - une petite icône de chapeau à gauche du nom du jeu dans le menu principal.

Google Chrome

Et le chapeau sera affiché sur la photo de profil du gagnant. Le design global, une sorte de clown, j'ai décidé de ne pas changer fondamentalement.

Améliorations

En plus des éléments graphiques, le code a également changé dans le jeu. J'ai tout transféré vers une nouvelle version de mon moteur. Cependant, le moteur est trop fort par rapport à ce jeu. Le moteur prend en charge les graphiques 3D, mais ici - seuls les sprites de cartes à jouer dans un avion. Mais ensuite, j'ai optimisé l'animation et l'ai rendue multithread. (Bien sûr, en javascript, il n'y a pas de véritable multithreading, du moins lorsque vous travaillez avec une fenêtre de navigateur. Le parallélisme est obtenu en itérant séquentiellement toutes les animations pour chaque appel.)

Il y a plus d'options. Tout d'abord, un menu en jeu est apparu, à partir duquel vous pouvez désormais contrôler l'échelle de l'image. Par exemple:

var scaleValue=0.5;
var scale = 'scale('+scaleValue+')';
document.body.style.webkitTransform = document.body.style.msTransform = document.body.style.transform = scale;

Cela vous a permis d'ajuster l'image dans la fenêtre du navigateur à n'importe quelle taille disponible. La fonction fonctionne en conjonction avec l'événement de redimensionnement de la fenêtre; l'échelle souhaitée est précalculée. Ce dernier peut également être réglé manuellement. Auparavant, sur mon ordinateur, ce jeu avait l'air trop petit, et sur le téléphone, il était trop grand et des barres de défilement sont apparues. Enfin, ce problème est résolu. Certes, maintenant, vous devrez probablement attacher la deuxième interface au jeu - celle du portrait, pour les appareils mobiles, en particulier pour le téléphone ... La taille de la ligne du navigateur, qui dévore une grande partie de l'écran du téléphone, ne plaît pas non plus. Mais il y a un bouton pour étendre le jeu en plein écran.

Android 7.0 et Windows 8.1

Second. J'ai finalisé le poker Texas Hold'em. Maintenant, le pari tout compris est disponible, ce qui n'était pas le cas auparavant, ainsi que la sélection manuelle de la taille du pari. Dans tous les jeux, les jetons ont commencé à se déplacer de manière plus réaliste et en fonction de leur dénomination: c'est-à-dire, par exemple, si vous faites une mise de 15, alors deux jetons - 5 et 10 laisseront le joueur de la table, formant une sorte de pile là-bas. Auparavant, une seule puce conditionnelle était déplacée. De plus, ils peuvent désormais jouer non pas 4, mais jusqu'à 10 joueurs. Eh bien, et d'autres améliorations mineures, qui, peut-être, ne devraient pas être arrêtées.

Partie technique

Comme je l'ai déjà mentionné, le jeu est écrit en Javascript pur sans utiliser de bibliothèques tierces (même JQuery n'est pas utilisé). Il n'y a qu'une seule bibliothèque, la mienne, qui implémente les fonctions d'affichage d'une interface sur une balise canvas. En fait, tout le contenu du jeu fait partie de l'interface. Dans ce dernier, j'ai un menu avec un support. Par exemple, vous pouvez utiliser la table de jeu elle-même pour le menu «Quitter», qui se compose d'un seul bouton du même nom, comme «arrière-plan». Et il suffira d'afficher ce menu pour qu'un tableau et un bouton apparaissent sur la toile. De plus, le bouton n'a pas à reposer sur le substrat - il peut également être à proximité. Ou, par exemple, le substrat peut ne pas l'être du tout. De plus, pour chaque menu, vous pouvez afficher les sprites associés ou les "satellites" qui ne sont pas des boutons. Pour eux, ainsi que pour les boutons,les coordonnées relatives sont définies.

L'arbre de document (DOM) est deux blocs de canevas avec un positionnement absolu étiré par la taille de la fenêtre du navigateur. Tous les sprites, comme requis par le canevas, sont affichés en utilisant drawImage (). Le calque d'arrière-plan (dégradé) et les éléments d'interface se trouvent sur le calque inférieur et le calque supérieur est utilisé pour l'animation. Bien sûr, il serait possible de me limiter à seulement deux couches, mais j'ai décidé d'en ajouter deux de plus. Donc, dans mon moteur d'interface utilisateur, le DOM est construit:

m3d.ui.initHtml([
	m3d.ui.htmlCanvas('canvbk'),
	m3d.ui.htmlControlsHand(),
	m3d.ui.htmlDiv('help', 0,0),
	m3d.ui.htmlCanvas('canvblack')
]);

htmlCanvas est un calque avec canevas pour s'adapter à la taille de la fenêtre du navigateur; son nom ('canvbk') est utilisé pour que vous puissiez désactiver le calque si nécessaire (dans le cas de cet élément, il n'est jamais requis). Ce bloc sert à afficher le dégradé d'arrière-plan et l'interface.
htmlControlsHand — , , . , DOM . ( ).
htmlDiv — div- id='help', , , . . ( id display='block', display='none' : m3d.ui.layersDiv.help.div.style.display='block'; ). htmlDiv - (, ). , , , (0,0).
htmlCanvas('canvblack') — canvas, . «» . .

Ainsi, seules les deux couches inférieures restent allumées en permanence. Tous les éléments spécifiés via m3d.ui.initHtml sont traités par la fonction resize et, lorsque la fenêtre du navigateur est redimensionnée, s'y adapte.

Le moteur d'animation est aussi le vôtre. Sa fonction est de changer les paramètres, des valeurs initiales données aux valeurs finales, pour un temps donné. Cela peut être, par exemple, les coordonnées le long de deux axes (pour 3D - le long de trois) et l'angle de rotation. En général, le nombre de paramètres pour une animation n'est pas limité et vous pouvez trouver une formule pour changer quoi que ce soit. Enfin, dans la fonction de rappel, où le sprite est positionné, les valeurs actuelles de tous les paramètres sont transmises avec une fréquence qui dépend de la puissance de traitement du système. Les images par seconde peuvent chuter, mais la durée totale de l'animation restera inchangée. Le canevas supérieur accepte les événements de clic (et une brouette pour les appareils mobiles) avec la détermination par les coordonnées du bouton sur l'interface à appuyer.

L'animation fonctionne comme ça. L'objet que vous souhaitez déplacer est supprimé de la couche inférieure (l'objet doit être un «satellite» qui vient de s'éteindre), toute l'interface, c'est-à-dire que tous les «menus avec un substrat» ouverts sont redessinés (en conséquence, le satellite n'est plus là, il est supprimé), l'objet monte à la couche supérieure, s'y déplace, puis disparaît et tombe finalement à la couche inférieure, où il se lie à un autre "menu avec un substrat" comme satellite, ou, en outre, mais avec des coordonnées relatives différentes. Le menu du calque inférieur est à nouveau redessiné. La fonction de combiner le contenu des couches est laissée au navigateur, elle le fait nativement. Le DOM en cours de jeu ne change en rien et consiste toujours, en fait, en deux toiles superposées. Sauf lors du redimensionnement de la fenêtre du navigateur, tout le contenu est redessiné 1 fois, déjà à une nouvelle échelle.

Tout fonctionne sur Windows et Android dans Chrome et Firefox. À partir du serveur local et du système de fichiers en ouvrant index.html. IE11 quitte la disposition. Il semble que les tailles ou l'échelle du canevas y soient en quelque sorte mal définies, ce qui conduit à l'apparition de barres de défilement. Bien que le jeu lui-même fonctionne bien. Je n'ai pas traité de cela: il est peu probable que quelqu'un utilise ce navigateur obsolète. Dans l'ancienne version d'Edge, tout fonctionne bien.

IE11 Je

ne l'ai pas testé sur iOS (+ MacOS) et Linux, mais je ne vois aucune raison pour que cela ne fonctionne pas, car tout se fait très simplement.

À propos de la localisation. 2 langues sont prises en charge - russe et anglais. Basculez en cliquant sur le drapeau dans le menu principal. Techniquement, cela est implémenté sous la forme de deux fichiers js avec des tableaux associatifs de phrases dans différentes langues, plus des images différentes, dans le cas où du texte est incorporé dans l'image: par exemple, du texte en retrait ou en dégradé.

Partagez avec le monde

Je n'ai rien trouvé de mieux que d'aller dans les magasins d'extensions de navigateur pour Chrome et Firefox. Eh bien, j'ai également créé une version pour Windows basée sur Chrome.

Cette version du jeu est plutôt une démo. Elle nécessite un raffinement supplémentaire. Une version d'essai est prévue, avec trois jeux, pendant 30 jours. Et la version payante, avec cinq jeux, sans limites. Ce dernier aura également la possibilité de placer une mise all-in au poker, et aussi, l'ancienneté des cartes combinées sera prise en compte pour déterminer le gagnant. Maintenant, dans la démo, il y a trois jeux et il n'y a pas de limite de temps. Plus tard, cette démo se transformera en une version d'essai et une autre version, déjà terminée, sera publiée.

Extension de navigateur

Donc, la première chose que j'ai décidé de mettre le jeu dans les magasins de modules complémentaires Chrome et Firefox. J'ai des comptes de développeur et une certaine expérience, car j'ai déjà posté une de mes extensions de navigateur là-bas. Soit dit en passant, si quelqu'un possède ChromeOS, il serait intéressant de savoir si mon jeu y fonctionne. Je n'ai aucune possibilité de vérifier.

Il existe deux options pour afficher le contenu de l'extension - dans une fenêtre en haut de l'interface du navigateur ou dans un onglet séparé. Étant donné que le contenu occupe une zone assez large et bloquera considérablement l'onglet ouvert actuel, j'ai choisi la deuxième option.

Il n'y a rien de compliqué à créer une extension de navigateur basée sur une page Web, qui est essentiellement mon jeu. Il vous suffit d'ajouter le fichier manifeste, les icônes et les captures d'écran. Dans Chrome Webstore, vous pouvez également ajouter une vidéo avec le gameplay, ce que j'ai fait. Puis il a tourné une autre vidéo, déjà avec Firefox:

La

taille de l'archive du module complémentaire du navigateur Firefox était de 4,8 Mo. Le jeu sous forme déballée - 5,2 Mo. La majeure partie du volume, bien sûr, a pris des graphiques. Le code du jeu lui-même est exactement le même pour les deux navigateurs, il ne diffère que par une dizaine de lignes de la liaison responsable de l'ouverture de l'onglet avec le jeu en cliquant sur l'icône du jeu dans le panneau du navigateur à droite de la ligne de commande.

Étant donné que le module complémentaire ne nécessite aucune autorisation spéciale et n'a pas besoin d'accéder à un serveur ou à des données personnelles, la modération dans les deux magasins a été presque instantanée, le jour du placement.

Exécutable Windows et autres versions

J'ai créé l'assemblage sur le moteur Chrome à l'aide de l'utilitaire le plus simple pour Windows Web2Exe et l'ai téléchargé dans les magasins Itch et Indiexpo, dans lesquels l'un de mes jeux est déjà présent. La taille de cet assemblage était de 115 Mo. Et après empaquetage avec le programme de création d'installateurs, le package de distribution pour le téléchargement s'est avéré être de 40 Mo en volume.

Build pour Windows 7 - 10

Je n'ai pas publié cette version du jeu dans le Windows Store en tant qu'application Windows 10, bien que j'y ai un compte développeur. Il y a longtemps, il y a quelques années, j'ai démoli Visual Studio. De plus, il y avait une histoire intéressante. J'ai sous licence Windows 8.1 sur ma tablette et cela me convient parfaitement. Et sur l'ordinateur - Windows 10. À partir d'une version de Visual Studio - ici, je ne me souviens pas exactement - soit cela ne vous permet pas de créer une application javascript avec prise en charge de Windows 8.1, soit vous ne voulez pas y incorporer des publicités s'il est conçu, sauf "Des dizaines", également sur l'ancien Windows 8.1 (mais j'aimerais avoir le potentiel de monétisation). En général, j'ai déjà oublié ce qu'il y avait exactement, mais un problème était précisément lié aux limitations de support de 8.1. Mais il est clair que je télécharge mon jeu uniquement depuis cette boutique,et j'aimerais pouvoir y jouer sur ma tablette. Le magasin lui-même, à mon avis, ne fait aucune promotion des applications. Et donc je n'ai pas encore décidé si je veux vraiment mettre l'énorme Visual Studio sur une carte MicroSD de 32 Go sur la tablette ... Le compte développeur ne fonctionne qu'avec. Ou, après avoir pesé le pour et le contre et vu le nombre de visiteurs de la boutique Microsoft, continuez simplement d'écrire du code comme un ordinateur portable et de ne pas jouer avec les environnements de développement géants? Il est dommage que vous ne puissiez pas simplement télécharger l'archive avec l'application via le formulaire sur le site, car il est mis en œuvre, par exemple, pour les extensions de navigateur.est-il si fort que je veux remettre l'énorme Visual Studio sur une carte MicroSD de 32 Go sur la tablette ... Le compte développeur ne fonctionne qu'avec. Ou, après avoir pesé le pour et le contre et vu le nombre de visiteurs de la boutique Microsoft, continuez simplement d'écrire du code comme un ordinateur portable et de ne pas jouer avec les environnements de développement géants? Il est dommage que vous ne puissiez pas simplement télécharger l'archive avec l'application via le formulaire sur le site, car il est mis en œuvre, par exemple, pour les extensions de navigateur.est-il si fort que je veux remettre l'énorme Visual Studio sur une carte MicroSD de 32 Go sur la tablette ... Le compte développeur ne fonctionne qu'avec. Ou, après avoir pesé le pour et le contre et vu le nombre de visiteurs de la boutique Microsoft, continuez simplement d'écrire du code comme un ordinateur portable et de ne pas jouer avec les environnements de développement géants? Il est dommage que vous ne puissiez pas simplement télécharger l'archive avec l'application via le formulaire sur le site, car il est mis en œuvre, par exemple, pour les extensions de navigateur.

Dans un avenir proche, je prévois de publier le jeu en tant qu'application i-frame sur les réseaux sociaux VKontakte et Facebook. Selon leurs règles, il est toujours nécessaire de fixer certaines fonctions sociales dans le jeu, comme une table de classement des meilleurs joueurs, etc.

Peut-être vaut-il la peine de regarder dans la direction de Google Play Market. Autant que je sache, PWA (Progressive Web Apps) peut désormais y être hébergé. Mais je n'ai pas de compte développeur et je ne l'ai pas encore compris. D'autre part, PWA peut également être placé sur votre site Web, à partir duquel le jeu sera installé sur votre téléphone, une icône sera créée et tout ressemblera à une application Android normale. Très probablement, il est logique d'aller dans le magasin uniquement avec un budget publicitaire important, ce que je n'ai pas. En général, il n'y a pas encore de jeux sur les appareils mobiles. Je pense que je vais simplement le poster sur le site pour jouer via le navigateur et l'installer en tant qu'application PWA, afin de ne pas dépendre d'une connexion réseau.

Oui, il est agréable que Google Play, tout comme le Microsoft Store, permette de télécharger des applications écrites en Javascript. J'ai déjà aimé cette fonctionnalité dans la boutique Microsoft. Dommage que ce dernier ne soit pas particulièrement populaire. Et c'est tellement pratique - j'y ai téléchargé seulement 5,2 Mo (c'est-à-dire du code javascript et des images) - et vous avez terminé. Sans grandes liaisons et bibliothèques supplémentaires. Et le navigateur est utilisé à partir de ceux installés dans le système. Idéalement, cela donnerait également à l'utilisateur la possibilité de choisir le navigateur qui fonctionnera en tant que «joueur» pour le jeu. Microsoft, si je me souviens bien, lors du téléchargement d'une telle application à partir du magasin, proposait uniquement IE11. En tout cas, cette ancienne version de mon jeu y était lancée. Cependant, maintenant, lorsqu'ils passent au moteur de Google, il n'y a peut-être pas de différence. Soit dit en passant, Chrome est meilleur que IE11,fonctionne avec des graphismes 3D WebGL ... Mais cela ne s'applique pas au jeu, qui est discuté dans cet article.

Total

Dans l'ensemble, ce jeu est un simulateur. Il n'y a pas de jeu en ligne, vous ne pouvez vous entraîner qu'avec des bots. L'essentiel ici est de regarder les combinaisons que vous avez collectées et que vous pouvez potentiellement collecter. Pour ce faire, cliquez simplement sur le bouton de menu avec un point d'interrogation ou sur vos cartes. Les combinaisons prêtes à l'emploi sont marquées d'un cercle vert sur la droite, les potentielles contiennent des cartes sombres qui peuvent encore provenir du jeu. Enfin, étant donné la disponibilité d'autres jeux dans le kit, ce programme peut être utilisé, par exemple, en remplacement des jeux de solitaire ennuyés. Le programme est autonome à la fois sous la forme d'un assemblage pour Windows et sous la forme d'un module complémentaire de navigateur, et pour son travail ne nécessite pas de connexion Internet.

Enfin: liste de contrôle

Endroits où je voudrais rester et où cela a déjà été fait:

+
Magasins d' extension de navigateur - Magasins de jeux Windows principaux (Steam)
+ Magasins de jeux Windows secondaires
- Magasins mobiles
- Réseaux sociaux
- Site Web

Module complémentaire dans Firefox

Las Vegas personnel, ou un jeu dans l'extension de navigateur