Get best of the week

Personal Las Vegas, or a game in the browser extension


Recently, a friend and I started talking about card games. He said that he could only play poker, but he hadn’t done it for a long time, because he had forgotten all the combinations. So they talked ... I remembered that a couple of years ago I wrote five card games, including Texas Hold'em poker, where at any time during the game you can see not only the collected combinations, but also all potential options with cards not yet opened. This could well become a teaching tool and help to refresh the rules in the process of playing with bots.

I decided to refactor my old code, as well as tweak the graphics. Design has always been difficult for me, it's not mine. Counting on at least some inspiration, I turned on the soundtrack from GTA San Andreas, the one with country music, from K-Rose radio. It seems to me that it conveys the atmosphere of Las Vegas well. I've never been there, but it definitely conveys! I swear to my sheriff star. (If anything - it’s plastic, so it’s not a pity ...) And I wasn’t too lazy to go into the legendary game itself and ride around Las Venturas, a virtual prototype of the world gambling capital.


Yes, I am aware that Las Vegas is located in Nevada and not in Texas. But such games are associated, after all, first of all, with Vegas. Texas Hold'em was brought there and after that it gained wide popularity. Vegas is a game producer.

A couple of years ago, for some reason, I posted my game only in the Windows Store, which does not use a lot of traffic. Although, perhaps soon, due to the discontinuation of Windows 7 and the massive transition to 10, this application store will get a second wind. We wish him good luck and hold fists for him in Vegas. But the article is not about this, but about the second wind of my game. It is written in pure Javascript, and I decided that today it could well work as a browser extension for Chrome and Firefox from the corresponding add-on stores, as well as in the form of an assembly for Windows 7-10 based on Chrome.

The game is called “Poker 3 Bags” and includes five games: “Texas Hold'em Poker”, “Throwing Fool”, “Czech Fool”, “Three Sticks”, and my author’s game “3 Bags”. Only games with bots on the local computer are available.

Country


So, about country music. The melodies from GTA San-Andreas suggested that it would be nice to add some cowboy themes to the game: after all, Poker Texas Hold'em here will be the main game. I placed the cowboy hat and pistols on the headband while laying out the cards.

Firefox

And also - a small hat icon to the left of the name of the game in the main menu.

Google Chrome

And the hat will be displayed on the winner’s profile picture. The overall design, a kind of clown, I decided not to fundamentally change.

Enhancements


In addition to graphic elements, the code has also changed in the game. I transferred everything to a new version of my engine. However, the engine is too loudly said in relation to this game. The engine supports 3D graphics, but here - only the sprites of playing cards on a plane. But then I optimized the animation and made it multithreaded. (Of course, in javascript there is no real multithreading, at least when working with a browser window. Parallelism is achieved by sequentially iterating through all the animations for each call.)

There are more options. Firstly, an in-game menu has appeared, from which you can now control the image scale. For instance:

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

This allowed you to fit the image into the browser window at any available size. The function works in conjunction with the window resize event; the desired scale is pre-computed. The latter can also be adjusted manually. Previously, on my computer this game looked too small, and on the phone it was too large and scroll bars appeared. Finally, this problem is resolved. True, now, probably, you will have to fasten the second interface to the game - the portrait one, for mobile devices, especially for the phone ... The size of the browser line, which eats up a huge part of the screen on the phone, is also not good. But there is a button for expanding the game to full screen.

Android 7.0 and Windows 8.1

Second. I finalized Texas Hold'em poker. Now the all-in bet is available, which was not there before, as well as manual bet size selection. Chips in all games began to move more realistically and in accordance with their denomination: that is, for example, if you make a bet of 15, then two chips - 5 and 10 will leave the player from the table, forming a kind of pile there. Previously, just one conditional chip moved. In addition, now they can play not 4, but up to 10 players. Well, and other minor improvements, which, perhaps, should not be stopped.

Technical part


As I already mentioned, the game is written in pure Javascript without using any third-party libraries (even JQuery is not used). There is only one library, mine, which implements the functions of displaying an interface on a canvas tag. Actually, all game content is part of the interface. In the latter, I have such a thing as a menu with a backing. For example, you can use the game table itself for the “Exit” menu, which consists of a single button of the same name, as a “background”. And it will be enough to display this menu so that a table and a button appear on the canvas. Moreover, the button does not have to lie on the substrate - it can also be nearby. Or, for example, the substrate may not be at all. In addition, for each menu, you can display related sprites, or "satellites" that are not buttons. For them, as well as for buttons,relative coordinates are set.

The Document Tree (DOM) is two canvas blocks with absolute positioning stretched by the size of the browser window. All sprites, as required by canvas, are displayed using drawImage (). The background layer (gradient) and interface elements lie on the bottom layer, and the top layer is used for animation. Of course, it would be possible to limit myself to just two layers, but I decided to add two more. So in my ui engine, the DOM is constructed:

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

  • htmlCanvas is a layer with canvas to fit the size of the browser window; its name ('canvbk') is used so that you can disable the layer if necessary (in the case of this element it is never required). This block is for displaying the background gradient and 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, . «» . .

Thus, only the two lower layers remain permanently on. All elements specified through m3d.ui.initHtml are processed by the resize function and, when the browser window is resized, adjusts to it.

The animation engine is also your own. Its function is to change the parameters, from given initial to final values, for a given time. This can be, for example, the coordinates along two axes (for 3D - along three) and the rotation angle. In general, the number of parameters for one animation is not limited, and you can come up with a formula for changing anything. Finally, in the callback function, where the sprite is positioned, the current values ​​of all parameters are transmitted with a frequency that depends on the processing power of the system. Fps may fall, but the total animation time will be unchanged. The upper canvas accepts click events (and a wheelbarrow for mobile devices) with the determination by coordinates of which button on the interface had to be pressed.

Animation works like this. The object that you want to move is removed from the bottom layer (the object must be a “satellite” that just turns off), the entire interface, that is, all open “menus with a substrate” are redrawn (accordingly, the satellite is no longer there, it is deleted), the object rises to the upper layer, moves there, then disappears and finally falls to the lower layer, where it either binds to another “menu with a substrate” as a satellite, or, moreover, but with different relative coordinates. The menu on the bottom layer is redrawn again. The function of combining the content of the layers is left to the browser, it does this natively. DOM during the game does not change in any way and always consists, in fact, of two canvases superimposed on one another. Unless when resizing the browser window, all content is redrawn 1 time, already at a new scale.

Everything works on Windows and Android in Chrome and Firefox. Both from the local server and from the file system by opening index.html. IE11 leaves layout. It seems that the canvas sizes or scale are somehow incorrectly defined there, which leads to the appearance of scroll bars. Although, the game itself is working fine. I did not deal with this: it is unlikely that anyone will use this outdated browser. In the ancient version of Edge, everything is working fine.

IE11 I

have not tested it on iOS (+ MacOS) and Linux, but I see no reason for it to not work, because everything is done very simply.

About the localization. 2 languages ​​are supported - Russian and English. Switch by clicking on the flag in the main menu. Technically, this is implemented in the form of two js files with associative arrays of phrases in different languages, plus different pictures, in case some text is embedded in the image: for example, recessed or gradient text.

Share with the world


I could not come up with anything better than going to the browser extension stores for Chrome and Firefox. Well, I also made a build for Windows based on Chrome.

This version of the game is rather a demo. It requires further refinement. A trial version is planned, with three games, for 30 days. And the paid version, with five games, without limits. The latter will also have the opportunity to place an all-in bet in poker, and also, the seniority of the combination cards will be taken into account in determining the winner. Now in the demo there are three games and there are no time limits. Later, this demo will turn into a trial version and another version, already complete, will be released.

Browser extension


So, the first thing I decided to put the game in the Chrome and Firefox add-ons stores. I have developer accounts and some experience, since I already posted one of my browser extensions there. By the way, if anyone has ChromeOS, then it would be interesting to know if my game works there. I have no opportunity to check.

There are two options for displaying extension content - in a window on top of the browser interface or in a separate tab. Since the content occupies a rather large area and will greatly block the current open tab, I chose the second option.

There is nothing complicated in creating a browser extension based on a web page, which, in essence, is my game. You only need to add the manifest file, icons and screenshots. In Chrome Webstore, you can also add video with the gameplay, which I did. Then he shot another video, already with Firefox:

Firefox browser add-on

Archive size was 4.8 Mb. The game in unpacked form - 5.2 MB. Most of the volume, of course, took graphics. The code of the game itself is exactly the same for both browsers, it differs only in a dozen lines of the binding responsible for opening the tab with the game by clicking on the game icon in the browser panel to the right of the command line.

Since the add-on does not require any special permissions at all and does not need access to any server and personal data, the moderation in both stores was almost instant, on the day of placement.

Windows executable and other versions


I created the assembly on the Chrome engine using the simplest utility for Windows Web2Exe and uploaded it to Itch and Indiexpo stores, in which one of my games is already present. The size of this assembly was 115 MB. And after packaging with the program for creating installers, the distribution package for downloading turned out to be 40 MB in volume.

Build for Windows 7 - 10

I haven’t posted this version of the game in the Windows Store as a Windows 10 application, although I have a developer account there. I have long, a couple of years ago, demolished Visual Studio. Moreover, there was an interesting story. I have licensed Windows 8.1 on my tablet and it completely suits me. And on the computer - Windows 10. Starting with some version of Visual Studio - here I don’t remember exactly - either it doesn’t allow you to create a javascript application with support for Windows 8.1 at all, or you don’t want to embed ads in it if it is designed, except "Tens", also on the older Windows 8.1 (but I would like to have the potential for monetization). In general, I already forgot what exactly was there, but some problem was precisely related to the support limitations of 8.1. But it’s clear that I’m downloading my game from this store only,and I would like to be able to play it on my tablet. The store itself, in my opinion, does not promote applications in any way. And so I have not decided yet whether I really want to put the huge Visual Studio on a 32GB MicroSD card on the tablet again ... The developer account works only with it. Or, having weighed the pros and cons and given the number of visitors to the Microsoft store, just keep writing code like a notebook and not mess with giant development environments at all? It is a pity that there you can’t just download the archive with the application through the form on the site, as it is implemented, for example, for browser extensions.is it so strong I want to put the huge Visual Studio again on a 32GB MicroSD card on the tablet ... The developer account only works with it. Or, having weighed the pros and cons and given the number of visitors to the Microsoft store, just keep writing code like a notebook and not mess with giant development environments at all? It is a pity that there you can’t just download the archive with the application through the form on the site, as it is implemented, for example, for browser extensions.is it so strong I want to put the huge Visual Studio again on a 32GB MicroSD card on the tablet ... The developer account only works with it. Or, having weighed the pros and cons and given the number of visitors to the Microsoft store, just keep writing code like a notebook and not mess with giant development environments at all? It is a pity that there you can’t just download the archive with the application through the form on the site, as it is implemented, for example, for browser extensions.

In the near future I plan to post the game as an i-frame application on social networks VKontakte and Facebook. According to their rules, it is still necessary to screw some social functions in the game, such as a rating table of the best players and so on.

Maybe it's still worth looking in the direction of the Google Play Market. As far as I know, PWA (Progressive Web Apps) can now be hosted there. But I don’t have a developer account and I haven’t figured it out yet. On the other hand, PWA can also be placed on your site, from which the game will be installed on the phone, an icon will be created, and everything will look like a normal Android application. Most likely, it makes sense to go to Store only with a large advertising budget, which I do not have. In general, there are no games on mobile devices yet. I think that I will simply post it on the site to play through the browser and install it as a PWA application, so as not to depend on a network connection.

Yes, it pleases that Google Play, just like the Microsoft Store, makes it possible to download applications written in Javascript. I once liked this feature in the Microsoft store. It is a pity that the latter is not particularly popular. And it’s so convenient - I downloaded only 5.2 MB there (that is, javascript code and pictures) - and you're done. Without any large bindings and additional libraries. And the browser is used from the installed ones in the system. Ideally, it would also provide the user with the opportunity to choose which browser will work as a “player” for the game. Microsoft, as I recall, when downloading such an application from the store offered only IE11. In any case, that old version of my game was launched in it. However, now, when they switch to the engine from Google, perhaps there is no difference. By the way, Chrome is better than IE11,works with 3D graphics WebGL ... But this does not apply to the game, which is discussed in this article.

Total


All in all, this game is a simulator. There is no online game, you can only practice with bots. The main thing here is to look at the combinations that you have collected and can potentially collect. To do this, just click on the menu button with a question mark or on your cards. Ready-made combinations are marked with a green circle on the right, potential ones contain darkened cards that can still come from the deck. Finally, given the availability of other games in the kit, this program can be used, for example, as a substitute for bored solitaire games. The program is autonomous both in the form of an assembly for Windows and in the form of a browser add-on, and for its work does not require an Internet connection.

Finally: checklist


Places where I would like to stay and where it has already been done:

+ Browser extension
stores - Main Windows game stores (Steam)
+ Secondary Windows game stores
- Mobile stores
- Social networks
- Website

Add-on in Firefox

More articles:


All Articles