🈺 🚲 📣 Personal Las Vegas, o un juego en la extensión del navegador 🥄 🧑🏽 😯

Recientemente, un amigo y yo comenzamos a hablar sobre juegos de cartas. Dijo que solo podía jugar al póker, pero que no lo había hecho durante mucho tiempo, porque había olvidado todas las combinaciones. Así que hablaron ... Recordé que hace un par de años escribí cinco juegos de cartas, incluido el póker Texas Hold'em, donde en cualquier momento durante el juego puedes ver no solo las combinaciones recolectadas, sino también todas las opciones potenciales con cartas aún no abiertas. Esto podría convertirse en una herramienta de enseñanza y ayudar a actualizar las reglas en el proceso de jugar con bots.

Decidí refactorizar mi antiguo código, así como ajustar los gráficos. El diseño siempre ha sido difícil para mí, no es mío. Contando con al menos algo de inspiración, puse la banda sonora de GTA San Andreas, la que tenía música country, de la radio K-Rose. Me parece que transmite bien la atmósfera de Las Vegas. Nunca he estado allí, ¡pero definitivamente transmite! Lo juro por mi sheriff star. (En todo caso, es de plástico, así que no es una pena ...) Y no era demasiado vago para entrar en el legendario juego y pasear por Las Venturas, un prototipo virtual de la capital mundial del juego.

Sí, soy consciente de que Las Vegas se encuentra en Nevada y no en Texas. Pero tales juegos están asociados, después de todo, en primer lugar, con Vegas. Texas Hold'em fue llevado allí y después de eso ganó gran popularidad. Vegas es un productor de juegos.

Hace un par de años, por alguna razón, publiqué mi juego solo en la Tienda Windows, que no usa mucho tráfico. Aunque, quizás pronto, debido a la interrupción de Windows 7 y la transición masiva a 10, esta tienda de aplicaciones tendrá un segundo impulso. Le deseamos buena suerte y le cerramos los puños en Las Vegas. Pero el artículo no trata sobre esto, sino sobre el segundo viento de mi juego. Está escrito en Javascript puro, y decidí que hoy podría funcionar como una extensión de navegador para Chrome y Firefox desde las tiendas de complementos correspondientes, así como en forma de ensamblaje para Windows 7-10 basado en Chrome.

El juego se llama "Poker 3 Bags" e incluye cinco juegos: "Texas Hold'em Poker", "Throwing Fool", "Czech Fool", "Three Sticks" y el juego de mi autor "3 Bags". Solo están disponibles juegos con bots en la computadora local.

País

Entonces, sobre la música country. Las melodías de GTA San-Andreas sugirieron que sería bueno agregar un poco de temas de vaquero al juego: después de todo, Poker Texas Hold'em aquí será el juego principal. Puse el sombrero de vaquero y las pistolas en la diadema mientras extendía las cartas.

Firefox

y también: un pequeño icono de sombrero a la izquierda del nombre del juego en el menú principal.

Google Chrome

Y el sombrero se mostrará en la foto de perfil del ganador. El diseño general, una especie de payaso, decidí no cambiar fundamentalmente.

Mejoras

Además de los elementos gráficos, el código también ha cambiado en el juego. Transferí todo a una nueva versión de mi motor. Sin embargo, el motor se dice demasiado alto en relación con este juego. El motor admite gráficos en 3D, pero aquí, solo los sprites de las cartas en un avión. Pero luego optimicé la animación y la hice multiproceso. (Por supuesto, en javascript no hay multiprocesamiento real, al menos cuando se trabaja con una ventana del navegador. El paralelismo se logra iterando secuencialmente a través de todas las animaciones para cada llamada).

Hay más opciones. En primer lugar, apareció un menú en el juego, desde el que ahora puedes controlar la escala de la imagen. Por ejemplo:

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

Esto le permitió ajustar la imagen en la ventana del navegador en cualquier tamaño disponible. La función funciona junto con el evento de cambio de tamaño de la ventana; la escala deseada se calcula previamente. Este último también se puede ajustar manualmente. Anteriormente, en mi computadora este juego parecía demasiado pequeño, y en el teléfono era demasiado grande y aparecían barras de desplazamiento. Finalmente, este problema está resuelto. Es cierto, ahora, probablemente, tendrá que fijar la segunda interfaz al juego: la vertical, para dispositivos móviles, especialmente para el teléfono ... El tamaño de la línea del navegador, que ocupa una gran parte de la pantalla del teléfono, tampoco es agradable. Pero hay un botón para expandir el juego a pantalla completa.

Android 7.0 y Windows 8.1

Segundo. Finalicé el Texas Hold'em poker. Ahora está disponible la apuesta all-in, que no estaba allí antes, así como la selección manual del tamaño de la apuesta. Las fichas en todos los juegos comenzaron a moverse de manera más realista y de acuerdo con su denominación: es decir, si haces una apuesta de 15, entonces dos fichas: 5 y 10 dejarán al jugador de la mesa, formando una especie de pila allí. Anteriormente, solo se movía un chip condicional. Además, ahora pueden jugar no 4, sino hasta 10 jugadores. Bueno, y otras mejoras menores, que, tal vez, no deberían detenerse.

Parte técnica

Como ya mencioné, el juego está escrito en Javascript puro sin usar bibliotecas de terceros (incluso jQuery no se usa). Solo hay una biblioteca, la mía, que implementa las funciones de mostrar una interfaz en una etiqueta de lienzo. En realidad, todo el contenido del juego es parte de la interfaz. En este último, tengo un menú con respaldo. Por ejemplo, puede usar la mesa de juego en sí para el menú "Salir", que consiste en un solo botón del mismo nombre, como "fondo". Y será suficiente mostrar este menú para que aparezca una tabla y un botón en el lienzo. Además, el botón no tiene que estar sobre el sustrato, también puede estar cerca. O, por ejemplo, el sustrato puede no estar en absoluto. Además, para cada menú, puede mostrar sprites relacionados o "satélites" que no son botones. Para ellos, así como para los botones,Se establecen coordenadas relativas.

El Árbol de documentos (DOM) son dos bloques de lienzo con un posicionamiento absoluto ampliado por el tamaño de la ventana del navegador. Todos los sprites, como lo requiere el lienzo, se muestran usando drawImage (). La capa de fondo (degradado) y los elementos de la interfaz se encuentran en la capa inferior, y la capa superior se utiliza para la animación. Por supuesto, sería posible limitarme a solo dos capas, pero decidí agregar dos más. Entonces, en mi motor ui, se construye el DOM:

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

htmlCanvas es una capa con lienzo para adaptarse al tamaño de la ventana del navegador; su nombre ('canvbk') se usa para que pueda deshabilitar la capa si es necesario (en el caso de este elemento, nunca es obligatorio). Este bloque es para mostrar el gradiente de fondo y la interfaz.
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, . «» . .

Por lo tanto, solo las dos capas inferiores permanecen permanentemente encendidas. Todos los elementos especificados a través de m3d.ui.initHtml son procesados por la función de cambio de tamaño y, cuando se cambia el tamaño de la ventana del navegador, se ajusta a ella.

El motor de animación también es tuyo. Su función es cambiar los parámetros, de valores iniciales a valores finales dados, durante un tiempo determinado. Esto puede ser, por ejemplo, las coordenadas a lo largo de dos ejes (para 3D - a lo largo de tres) y el ángulo de rotación. En general, el número de parámetros para una animación no está limitado, y puede encontrar una fórmula para cambiar cualquier cosa. Finalmente, en la función de devolución de llamada, donde se coloca el sprite, los valores actuales de todos los parámetros se transmiten con una frecuencia que depende de la potencia de procesamiento del sistema. Los Fps pueden caer, pero el tiempo total de animación no cambiará. El lienzo superior acepta eventos de clic (y una carretilla para dispositivos móviles) con la determinación por coordenadas de qué botón en la interfaz tuvo que ser presionado.

La animación funciona así. El objeto que desea mover se elimina de la capa inferior (el objeto debe ser un "satélite" que simplemente se apaga), toda la interfaz, es decir, todos los "menús con un sustrato" abiertos se vuelven a dibujar (en consecuencia, el satélite ya no está allí, se elimina), el objeto se eleva a la capa superior, se mueve allí, luego desaparece y finalmente cae a la capa inferior, donde se une a otro "menú con un sustrato" como un satélite o, además, pero con diferentes coordenadas relativas. El menú en la capa inferior se vuelve a dibujar. La función de combinar el contenido de las capas se deja al navegador, lo hace de forma nativa. DOM durante el juego no cambia de ninguna manera y siempre consiste, de hecho, en dos lienzos superpuestos entre sí. A menos que al cambiar el tamaño de la ventana del navegador, todo el contenido se vuelva a dibujar 1 vez, ya a una nueva escala.

Todo funciona en Windows y Android en Chrome y Firefox. Tanto desde el servidor local como desde el sistema de archivos abriendo index.html. IE11 deja diseño. Parece que los tamaños de lienzo o la escala están de alguna manera incorrectamente definidos allí, lo que lleva a la aparición de barras de desplazamiento. Aunque, el juego en sí está funcionando bien. No me ocupé de esto: es poco probable que alguien use este navegador desactualizado. En la versión antigua de Edge, todo funciona bien.

IE11 No lo

he probado en iOS (+ MacOS) y Linux, pero no veo ninguna razón para que no funcione, porque todo se hace de manera muy simple.

Sobre la localización. Se admiten 2 idiomas: ruso e inglés. Cambie haciendo clic en la bandera en el menú principal. Técnicamente, esto se implementa en forma de dos archivos js con matrices asociativas de frases en diferentes idiomas, además de diferentes imágenes, en caso de que algún texto esté incrustado en la imagen: por ejemplo, texto empotrado o degradado.

Comparte con el mundo

No podría encontrar nada mejor que ir a las tiendas de extensiones de navegador para Chrome y Firefox. Bueno, también hice una compilación para Windows basada en Chrome.

Esta versión del juego es más bien una demostración. Requiere más refinamiento. Se planea una versión de prueba, con tres juegos, durante 30 días. Y la versión de pago, con cinco juegos, sin límites. Este último también tendrá la oportunidad de hacer una apuesta all-in en el póker, y también, la antigüedad de las cartas combinadas se tendrá en cuenta para determinar el ganador. Ahora en la demo hay tres juegos y no hay límites de tiempo. Más tarde, esta demostración se convertirá en una versión de prueba y se lanzará otra versión, ya completa.

Extensión del navegador

Entonces, lo primero que decidí es poner el juego en las tiendas de complementos de Chrome y Firefox. Tengo cuentas de desarrollador y algo de experiencia, ya que publiqué una de las extensiones de mi navegador allí. Por cierto, si alguien tiene ChromeOS, sería interesante saber si mi juego funciona allí. No tengo oportunidad de verificar.

Hay dos opciones para mostrar contenido de extensión: en una ventana en la parte superior de la interfaz del navegador o en una pestaña separada. Dado que el contenido ocupa un área bastante grande y bloqueará en gran medida la pestaña abierta actual, elegí la segunda opción.

No hay nada complicado en crear una extensión de navegador basada en una página web, que, en esencia, es mi juego. Solo necesita agregar el archivo de manifiesto, los iconos y las capturas de pantalla. En Chrome Webstore, también puedes agregar video con el juego, lo cual hice. Luego grabó otro video, ya con Firefox:

El

tamaño del archivo del complemento del navegador Firefox fue de 4.8 Mb. El juego en forma descomprimida - 5.2 MB. La mayor parte del volumen, por supuesto, tomó gráficos. El código del juego en sí es exactamente el mismo para ambos navegadores, solo difiere en una docena de líneas del enlace responsable de abrir la pestaña con el juego haciendo clic en el icono del juego en el panel del navegador a la derecha de la línea de comando.

Dado que el complemento no requiere ningún permiso especial y no necesita acceso a ningún servidor o datos personales, la moderación en ambas tiendas fue casi instantánea, el día de la colocación.

Windows ejecutable y otras versiones

Creé el ensamblaje en el motor de Chrome usando la utilidad más simple para Windows Web2Exe y lo cargué en las tiendas Itch e Indiexpo, en las que uno de mis juegos ya está presente. El tamaño de este conjunto fue de 115 MB. Y después de empaquetar con el programa para crear instaladores, el paquete de distribución para descargar resultó ser de 40 MB de volumen.

Compilación para Windows 7 - 10

No he publicado esta versión del juego en la Tienda Windows como una aplicación de Windows 10, aunque tengo una cuenta de desarrollador allí. Hace mucho, hace un par de años, demolí Visual Studio. Además, había una historia interesante. Tengo licencia de Windows 8.1 en mi tableta y me queda completamente bien. Y en la computadora - Windows 10. Comenzando con alguna versión de Visual Studio - aquí no recuerdo exactamente - o no te permite crear una aplicación javascript con soporte para Windows 8.1, o no quieres incrustar anuncios si está diseñado, excepto "Decenas", también en Windows 8.1 anterior (pero me gustaría tener el potencial de monetización). En general, ya olvidé qué había exactamente allí, pero algún problema estaba relacionado precisamente con las limitaciones de soporte de 8.1. Pero está claro que solo descargo mi juego de esta tienda,y me gustaría poder jugarlo en mi tableta. La tienda en sí, en mi opinión, no promueve aplicaciones de ninguna manera. Por lo tanto, aún no he decidido si realmente quiero volver a colocar el enorme Visual Studio en una tarjeta MicroSD de 32 GB en la tableta ... La cuenta de desarrollador solo funciona con él. ¿O, habiendo sopesado los pros y los contras y dado el número de visitantes a la tienda de Microsoft, simplemente sigue escribiendo código como un cuaderno y no te metas con entornos de desarrollo gigantes en absoluto? Es una pena que no pueda descargar el archivo con la aplicación a través del formulario en el sitio, ya que se implementa, por ejemplo, para las extensiones del navegador.¿Es tan fuerte que quiero volver a colocar el enorme Visual Studio en una tarjeta MicroSD de 32 GB en la tableta ... La cuenta de desarrollador solo funciona con él. ¿O, habiendo sopesado los pros y los contras y dado el número de visitantes a la tienda de Microsoft, simplemente sigue escribiendo código como un cuaderno y no te metas con entornos de desarrollo gigantes en absoluto? Es una pena que no pueda descargar el archivo con la aplicación a través del formulario en el sitio, ya que se implementa, por ejemplo, para las extensiones del navegador.¿Es tan fuerte que quiero volver a colocar el enorme Visual Studio en una tarjeta MicroSD de 32 GB en la tableta ... La cuenta de desarrollador solo funciona con él. ¿O, habiendo sopesado los pros y los contras y dado el número de visitantes a la tienda de Microsoft, simplemente sigue escribiendo código como un cuaderno y no te metas con entornos de desarrollo gigantes en absoluto? Es una pena que no pueda descargar el archivo con la aplicación a través del formulario en el sitio, ya que se implementa, por ejemplo, para las extensiones del navegador.

En un futuro próximo planeo publicar el juego como una aplicación i-frame en las redes sociales VKontakte y Facebook. Según sus reglas, aún es necesario fijar algunas funciones sociales en el juego, como una tabla de clasificación de los mejores jugadores, etc.

Quizás todavía valga la pena mirar en dirección a Google Play Market. Hasta donde yo sé, PWA (Progressive Web Apps) ahora se puede alojar allí. Pero no tengo una cuenta de desarrollador y aún no la he descubierto. Por otro lado, PWA también se puede colocar en su sitio, desde el cual se instalará el juego en el teléfono, se creará un icono y todo se verá como una aplicación normal de Android. Lo más probable es que tenga sentido ir a la Tienda solo con un gran presupuesto publicitario, que no tengo. En general, todavía no hay juegos en dispositivos móviles. Creo que simplemente lo publicaré en el sitio para jugar a través del navegador e instalarlo como una aplicación PWA, para no depender de una conexión de red.

Sí, le agrada que Google Play, al igual que Microsoft Store, permita descargar aplicaciones escritas en Javascript. Una vez me gustó esta característica en la tienda de Microsoft. Es una pena que este último no sea particularmente popular. Y es muy conveniente: descargué solo 5.2 MB allí (es decir, código de JavaScript e imágenes), y ya está. Sin grandes enlaces y bibliotecas adicionales. Y el navegador se utiliza desde los instalados en el sistema. Idealmente, también proporcionaría al usuario la oportunidad de elegir qué navegador funcionará como "jugador" para el juego. Microsoft, según recuerdo, al descargar dicha aplicación de la tienda ofrecía solo IE11. En cualquier caso, esa versión anterior de mi juego se lanzó en él. Sin embargo, ahora, cuando cambian al motor de Google, tal vez no haya diferencia. Por cierto, Chrome es mejor que IE11,funciona con gráficos 3D WebGL ... Pero esto no se aplica al juego, que se trata en este artículo.

Total

Con todo, este juego es un simulador. No hay un juego en línea, solo puedes practicar con bots. Lo principal aquí es observar las combinaciones que ha recopilado y que potencialmente puede recopilar. Para hacer esto, simplemente haga clic en el botón de menú con un signo de interrogación o en sus tarjetas. Las combinaciones ya hechas están marcadas con un círculo verde a la derecha, las posibles contienen cartas oscuras que aún pueden provenir del mazo. Finalmente, dada la disponibilidad de otros juegos en el kit, este programa se puede utilizar, por ejemplo, como un sustituto de los juegos de solitario aburrido. El programa es autónomo tanto en forma de ensamblado para Windows como en forma de complemento de navegador, y para su trabajo no requiere una conexión a Internet.

Finalmente: lista de verificación

Lugares donde me gustaría quedarme y donde ya se ha hecho:

+
Tiendas de extensión del navegador - Tiendas principales de juegos de Windows (Steam)
+ Tiendas de juegos secundarios de Windows
- Tiendas móviles
- Redes sociales
- Sitio web

Complemento en Firefox

Personal Las Vegas, o un juego en la extensión del navegador