🦄 👨🏻‍🔧 🤾🏻 Las Vegas pessoal ou um jogo na extensão do navegador 📡 🔦 🕴🏽

Recentemente, um amigo e eu começamos a conversar sobre jogos de cartas. Ele disse que só podia jogar poker, mas não fazia isso há muito tempo, porque havia esquecido todas as combinações. Então eles conversaram ... Lembrei-me de que há alguns anos escrevi cinco jogos de cartas, incluindo o Texas Hold'em, onde a qualquer momento do jogo você pode ver não apenas as combinações coletadas, mas também todas as opções possíveis com cartas ainda não abertas. Isso pode se tornar uma ferramenta de ensino e ajudar a atualizar as regras no processo de jogar com bots.

Decidi refatorar meu código antigo, bem como ajustar os gráficos. O design sempre foi difícil para mim, não é meu. Contando com pelo menos alguma inspiração, liguei a trilha sonora do GTA San Andreas, a música country, da rádio K-Rose. Parece-me que transmite bem a atmosfera de Las Vegas. Eu nunca estive lá, mas definitivamente transmite! Juro pela minha estrela xerife. (Se é que é algo - é plástico, então não é uma pena ...) E eu não estava com preguiça de entrar no jogo lendário e andar por Las Venturas, um protótipo virtual da capital mundial do jogo.

Sim, eu sei que Las Vegas está localizada em Nevada e não no Texas. Mas esses jogos estão associados, afinal, antes de tudo, a Vegas. O Texas Hold'em foi trazido para lá e depois ganhou grande popularidade. Vegas é um produtor de jogos.

Há alguns anos, por algum motivo, publiquei meu jogo apenas na Windows Store, que não usa muito tráfego. Embora, talvez em breve, devido à descontinuação do Windows 7 e à maciça transição para o 10, essa loja de aplicativos tenha uma segunda chance. Desejamos-lhe boa sorte e punhos em Vegas. Mas o artigo não é sobre isso, mas sobre o segundo vento do meu jogo. Ele está escrito em Javascript puro, e eu decidi que hoje poderia funcionar como uma extensão de navegador para Chrome e Firefox a partir das lojas complementares correspondentes, bem como na forma de um assembly para o Windows 7-10 baseado no Chrome.

O jogo é chamado de "Poker 3 Bags" e inclui cinco jogos: "Texas Hold'em Poker", "Throwing Fool", "Czech Fool", "Three Sticks" e o jogo do meu autor "3 Bags". Apenas jogos com bots no computador local estão disponíveis.

País

Então, sobre música country. As melodias do GTA San-Andreas sugeriram que seria bom adicionar alguns temas de cowboy ao jogo: afinal, o Poker Texas Hold'em aqui será o jogo principal. Coloquei o chapéu de cowboy e as pistolas na bandana enquanto colocava os cartões.

Firefox

E também - um pequeno ícone de chapéu à esquerda do nome do jogo no menu principal.

Google Chrome

E o chapéu será exibido na foto do perfil do vencedor. O design geral, uma espécie de palhaço, decidi não mudar fundamentalmente.

Aprimoramentos

Além dos elementos gráficos, o código também mudou no jogo. Transferi tudo para uma nova versão do meu mecanismo. No entanto, o mecanismo é dito em voz alta em relação a este jogo. O mecanismo suporta gráficos 3D, mas aqui - apenas os sprites de cartas de baralho em um avião. Mas então eu otimizei a animação e a fiz multithread. (Obviamente, em javascript, não há multithreading real, pelo menos ao trabalhar com uma janela do navegador. O paralelismo é conseguido através da iteração sequencial de todas as animações de cada chamada.)

Há mais opções. Primeiro, apareceu um menu no jogo, no qual agora você pode controlar a escala da imagem. Por exemplo:

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

Isso permitiu que você encaixe a imagem na janela do navegador em qualquer tamanho disponível. A função funciona em conjunto com o evento de redimensionamento da janela; a escala desejada é pré-calculada. Este último também pode ser ajustado manualmente. Anteriormente, no meu computador, esse jogo parecia muito pequeno, e no telefone era muito grande e as barras de rolagem apareciam. Finalmente, esse problema foi resolvido. É verdade que agora, provavelmente, você terá que fixar a segunda interface para o jogo - a vertical, para dispositivos móveis, especialmente para o telefone ... O tamanho da linha do navegador, que ocupa uma grande parte da tela do telefone, também não é agradável. Mas há um botão para expandir o jogo para tela cheia.

Android 7.0 e Windows 8.1 em

segundo. Eu finalizei o poker no Texas Hold'em. Agora, a aposta all-in está disponível, o que não existia antes, bem como a seleção manual do tamanho da aposta. Em todos os jogos, as fichas começaram a se mover de maneira mais realista e de acordo com a denominação: por exemplo, se você apostar 15, duas fichas - 5 e 10 deixarão o jogador da mesa, formando uma espécie de pilha ali. Anteriormente, apenas um chip condicional foi movido. Além disso, agora eles podem jogar não 4, mas até 10 jogadores. Bem, e outras pequenas melhorias, que talvez não devam ser interrompidas.

Parte técnica

Como eu já mencionei, o jogo é escrito em Javascript puro sem o uso de bibliotecas de terceiros (nem o JQuery é usado). Existe apenas uma biblioteca, a minha, que implementa as funções de exibição de uma interface em uma tag de tela. Na verdade, todo o conteúdo do jogo faz parte da interface. Neste último, eu tenho um menu com suporte. Por exemplo, você pode usar a própria mesa de jogo para o menu “Sair”, que consiste em um único botão com o mesmo nome, como um “plano de fundo”. E será suficiente exibir esse menu para que uma tabela e um botão apareçam na tela. Além disso, o botão não precisa estar no substrato - ele também pode estar próximo. Ou, por exemplo, o substrato pode não estar. Além disso, para cada menu, você pode exibir sprites relacionados ou "satélites" que não são botões. Para eles, assim como para botões,coordenadas relativas são definidas.

A Document Tree (DOM) é composta por dois blocos de tela com posicionamento absoluto estendido pelo tamanho da janela do navegador. Todos os sprites, conforme exigido pela tela, são exibidos usando drawImage (). A camada de fundo (gradiente) e os elementos da interface ficam na camada inferior, e a camada superior é usada para animação. Obviamente, seria possível me limitar a apenas duas camadas, mas decidi adicionar mais duas. Então, no meu mecanismo de interface do usuário, o DOM é construído:

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

htmlCanvas é uma camada com tela para ajustar o tamanho da janela do navegador; seu nome ('canvbk') é usado para que você possa desativar a camada, se necessário (no caso deste elemento, isso nunca é necessário). Este bloco é para exibir o gradiente e a interface do plano de fundo.
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, . «» . .

Assim, apenas as duas camadas inferiores permanecem permanentemente ligadas. Todos os elementos especificados por meio do m3d.ui.initHtml são processados pela função redimensionar e, quando a janela do navegador é redimensionada, se ajusta a ela.

O mecanismo de animação também é seu. Sua função é alterar os parâmetros, de valores iniciais para valores finais, por um tempo determinado. Podem ser, por exemplo, as coordenadas ao longo de dois eixos (para 3D - ao longo de três) e o ângulo de rotação. Em geral, o número de parâmetros para uma animação não é limitado e você pode criar uma fórmula para alterar qualquer coisa. Finalmente, na função de retorno de chamada, onde o sprite está posicionado, os valores atuais de todos os parâmetros são transmitidos com uma frequência que depende da potência de processamento do sistema. Os qps podem cair, mas o tempo total de animação não será alterado. A tela superior aceita eventos de clique (e um carrinho de mão para dispositivos móveis) com a determinação pelas coordenadas de qual botão na interface deve ser pressionado.

A animação funciona assim. O objeto que você deseja mover é removido da camada inferior (o objeto deve ser um "satélite" que apenas desliga), toda a interface, ou seja, todos os "menus com substrato" abertos são redesenhados (consequentemente, o satélite não está mais lá, é excluído), o objeto sobe para a camada superior, move-se para lá, desaparece e finalmente cai para a camada inferior, onde se liga a outro “menu com substrato” como satélite ou, além disso, mas com coordenadas relativas diferentes. O menu na camada inferior é redesenhado novamente. A função de combinar o conteúdo das camadas é deixada para o navegador, ele faz isso de forma nativa. O DOM durante o jogo não muda de forma alguma e sempre consiste, de fato, em duas telas sobrepostas. A menos que ao redimensionar a janela do navegador, todo o conteúdo seja redesenhado 1 vez, já em uma nova escala.

Tudo funciona no Windows e Android no Chrome e Firefox. Tanto no servidor local quanto no sistema de arquivos, abrindo index.html. O IE11 deixa o layout. Parece que os tamanhos ou escalas da tela estão de alguma forma definidos incorretamente, o que leva ao aparecimento de barras de rolagem. Embora o jogo em si esteja funcionando bem. Não lidei com isso: é improvável que alguém use esse navegador desatualizado. Na versão antiga do Edge, tudo está funcionando bem.

IE11

Não testei no iOS (+ MacOS) e no Linux, mas não vejo razão para isso não funcionar, porque tudo é feito de maneira muito simples.

Sobre a localização. 2 idiomas são suportados - russo e inglês. Alterne clicando na bandeira no menu principal. Tecnicamente, isso é implementado na forma de dois arquivos js com matrizes associativas de frases em idiomas diferentes, além de figuras diferentes, caso algum texto seja incorporado à imagem: por exemplo, texto recuado ou gradiente.

Compartilhe com o mundo

Não consegui encontrar nada melhor do que ir às lojas de extensões do navegador para Chrome e Firefox. Bem, eu também fiz uma compilação para Windows com base no Chrome.

Esta versão do jogo é bastante uma demonstração. Requer refinamento adicional. Uma versão de teste está planejada, com três jogos, por 30 dias. E a versão paga, com cinco jogos, sem limites. Este último também terá a oportunidade de fazer uma aposta all-in no pôquer e também a antiguidade das cartas combinadas será levada em consideração na determinação do vencedor. Agora, na demo, existem três jogos e não há limites de tempo. Posteriormente, esta demonstração se transformará em uma versão de teste e outra versão, já completa, será lançada.

Extensão do navegador

Então, a primeira coisa que decidi colocar no jogo nas lojas de complementos para Chrome e Firefox. Tenho contas de desenvolvedor e alguma experiência, pois já postei uma das extensões do meu navegador lá. A propósito, se alguém tiver o ChromeOS, seria interessante saber se meu jogo funciona lá. Não tenho oportunidade de verificar.

Existem duas opções para exibir o conteúdo da extensão - em uma janela na parte superior da interface do navegador ou em uma guia separada. Como o conteúdo ocupa uma área bastante grande e bloqueia bastante a guia aberta atual, eu escolhi a segunda opção.

Não há nada complicado em criar uma extensão de navegador com base em uma página da web, que, em essência, é o meu jogo. Você só precisa adicionar o arquivo de manifesto, ícones e capturas de tela. Na Chrome Webstore, você também pode adicionar vídeo com a jogabilidade, o que eu fiz. Então ele gravou outro vídeo, já com o Firefox:

O

tamanho do arquivo morto do complemento do navegador Firefox foi de 4,8 Mb. O jogo na forma descompactada - 5,2 MB. A maior parte do volume, é claro, levou gráficos. O código do jogo em si é exatamente o mesmo para os dois navegadores, difere apenas em uma dúzia de linhas da ligação responsável por abrir a guia com o jogo clicando no ícone do jogo no painel do navegador à direita da linha de comando.

Como o complemento não requer nenhuma permissão especial e não precisa acessar nenhum servidor ou dados pessoais, a moderação em ambas as lojas foi quase instantânea no dia da veiculação.

Executável do Windows e outras versões

Criei o assembly no mecanismo Chrome usando o utilitário mais simples do Windows Web2Exe e o carreguei nas lojas Itch e Indiexpo, nas quais um dos meus jogos já está presente. O tamanho desta montagem foi de 115 MB. E, após empacotar o programa para criar instaladores, o pacote de distribuição para download revelou 40 MB de volume.

Compilação para Windows 7 - 10

Não publiquei esta versão do jogo na Windows Store como um aplicativo do Windows 10, embora eu tenha uma conta de desenvolvedor lá. Há muito tempo, há alguns anos, demoli o Visual Studio. Além disso, houve uma história interessante. Licenciei o Windows 8.1 no meu tablet e ele me convém completamente. E no computador - Windows 10. Começando com alguma versão do Visual Studio - aqui não me lembro exatamente - ou ele não permite que você crie um aplicativo javascript com suporte para o Windows 8.1, ou você não deseja incorporar anúncios se ele for projetado, exceto "Dezenas", também no Windows 8.1 mais antigo (mas eu gostaria de ter potencial para monetização). Em geral, eu já esqueci o que exatamente estava lá, mas algum problema estava precisamente relacionado às limitações de suporte do 8.1. Mas está claro que estou baixando meu jogo apenas desta loja,e gostaria de poder reproduzi-lo no meu tablet. A própria loja, na minha opinião, não promove aplicativos de forma alguma. E ainda não decidi se realmente quero colocar o enorme Visual Studio em um cartão MicroSD de 32GB no tablet novamente ... A conta do desenvolvedor funciona apenas com ele. Ou, considerando os prós e os contras e considerando o número de visitantes da loja da Microsoft, continue escrevendo códigos como um notebook e não mexendo em ambientes de desenvolvimento gigantescos? É uma pena que você não possa apenas baixar o arquivo morto com o aplicativo através do formulário no site, pois ele é implementado, por exemplo, para extensões de navegador.é tão forte que quero colocar o enorme Visual Studio novamente em um cartão MicroSD de 32 GB no tablet ... A conta do desenvolvedor só funciona com ele. Ou, tendo ponderado os prós e os contras e dado o número de visitantes da loja da Microsoft, continue escrevendo código como um notebook e não mexendo em ambientes de desenvolvimento gigantescos? É uma pena que você não possa apenas baixar o arquivo morto com o aplicativo através do formulário no site, pois ele é implementado, por exemplo, para extensões de navegador.é tão forte que quero colocar o enorme Visual Studio novamente em um cartão MicroSD de 32 GB no tablet ... A conta do desenvolvedor só funciona com ele. Ou, tendo ponderado os prós e os contras e dado o número de visitantes da loja da Microsoft, continue escrevendo código como um notebook e não mexendo em ambientes de desenvolvimento gigantescos? É uma pena que você não possa apenas baixar o arquivo morto com o aplicativo através do formulário no site, pois ele é implementado, por exemplo, para extensões de navegador.

Em um futuro próximo, planejo postar o jogo como um aplicativo i-frame nas redes sociais VKontakte e Facebook. De acordo com suas regras, ainda é necessário fixar algumas funções sociais no jogo, como uma tabela de classificação dos melhores jogadores e assim por diante.

Talvez ainda valha a pena olhar na direção do Google Play Market. Até onde eu sei, o PWA (Progressive Web Apps) agora pode ser hospedado lá. Mas não tenho uma conta de desenvolvedor e ainda não a descobri. Por outro lado, o PWA também pode ser colocado no seu site, a partir do qual o jogo será instalado no telefone, um ícone será criado e tudo parecerá um aplicativo Android normal. Provavelmente, faz sentido ir para a loja apenas com um grande orçamento de publicidade, o que não tenho. Em geral, ainda não há jogos em dispositivos móveis. Eu acho que vou simplesmente publicá-lo no site para reproduzir através do navegador e instalá-lo como um aplicativo PWA, para não depender de uma conexão de rede.

Sim, agrada ao Google Play, assim como a Microsoft Store, possibilitar o download de aplicativos escritos em Javascript. Uma vez gostei desse recurso na loja da Microsoft. É uma pena que este último não seja particularmente popular. E é tão conveniente - baixei apenas 5,2 MB (ou seja, código javascript e fotos) - e pronto. Sem grandes ligações e bibliotecas adicionais. E o navegador é usado pelos instalados no sistema. Idealmente, também daria ao usuário a oportunidade de escolher qual navegador funcionará como um "jogador" para o jogo. A Microsoft, ao que me lembro, ao baixar um aplicativo desse tipo da loja oferecia apenas o IE11. De qualquer forma, essa versão antiga do meu jogo foi lançada nela. No entanto, agora, quando eles mudam para o mecanismo do Google, talvez não haja diferença. A propósito, o Chrome é melhor que o IE11,funciona com gráficos 3D WebGL ... Mas isso não se aplica ao jogo, discutido neste artigo.

Total

Em suma, este jogo é um simulador. Não há jogo online, você só pode praticar com bots. O principal aqui é examinar as combinações que você coletou e pode potencialmente coletar. Para fazer isso, basta clicar no botão de menu com um ponto de interrogação ou em seus cartões. Combinações prontas são marcadas com um círculo verde à direita, as potenciais contêm cartas escuras que ainda podem vir do baralho. Finalmente, dada a disponibilidade de outros jogos no kit, este programa pode ser usado, por exemplo, como um substituto para jogos de paciência entediados. O programa é autônomo na forma de um assembly para Windows e na forma de um complemento do navegador e, por seu trabalho, não requer conexão à Internet.

Finalmente: checklist

Locais onde eu gostaria de ficar e onde já foi realizado:

+
Lojas de extensões do navegador - Principais lojas de jogos do Windows (Steam)
+ Lojas secundárias de jogos do Windows
- Lojas de móveis
- Redes sociais
- Site

Complemento no Firefox

Las Vegas pessoal ou um jogo na extensão do navegador