👨🏽‍🏫 🍬 🐡 Persönliches Las Vegas oder ein Spiel in der Browser-Erweiterung 😄 🌴 👧🏼

Vor kurzem haben ein Freund und ich angefangen, über Kartenspiele zu sprechen. Er sagte, dass er nur Poker spielen könne, aber er habe es lange nicht getan, weil er alle Kombinationen vergessen habe. Also redeten sie miteinander ... Ich erinnerte mich, dass ich vor ein paar Jahren fünf Kartenspiele geschrieben habe, darunter Texas Hold'em Poker, bei denen Sie jederzeit während des Spiels nicht nur die gesammelten Kombinationen sehen können, sondern auch alle möglichen Optionen mit noch nicht geöffneten Karten. Dies könnte durchaus zu einem Lehrmittel werden und dazu beitragen, die Regeln beim Spielen mit Bots zu aktualisieren.

Ich beschloss, meinen alten Code zu überarbeiten und die Grafiken zu optimieren. Design war schon immer schwierig für mich, es ist nicht meins. Ich habe mich zumindest auf einige Inspirationen verlassen und den Soundtrack von GTA San Andreas, dem mit Country-Musik, von K-Rose Radio eingeschaltet. Es scheint mir, dass es die Atmosphäre von Las Vegas gut vermittelt. Ich war noch nie dort, aber es vermittelt definitiv! Ich schwöre meinem Sheriffstar. (Wenn überhaupt - es ist aus Plastik, also nicht schade ...) Und ich war nicht zu faul, in das legendäre Spiel selbst einzusteigen und durch Las Venturas zu fahren, einen virtuellen Prototyp der globalen Spielehauptstadt.

Ja, mir ist bekannt, dass sich Las Vegas in Nevada und nicht in Texas befindet. Aber solche Spiele sind schließlich vor allem mit Vegas verbunden. Texas Hold'em wurde dorthin gebracht und erlangte danach große Popularität. Vegas ist ein Spielehersteller.

Vor ein paar Jahren habe ich mein Spiel aus irgendeinem Grund nur im Windows Store veröffentlicht, der nicht viel Verkehr verbraucht. Obwohl dieser Anwendungsspeicher aufgrund des Auslaufens von Windows 7 und des massiven Übergangs zu 10 möglicherweise bald einen zweiten Wind bekommen wird. Wir wünschen ihm viel Glück und halten ihm in Vegas die Fäuste. Aber der Artikel handelt nicht davon, sondern vom zweiten Wind meines Spiels. Es ist in reinem Javascript geschrieben, und ich habe beschlossen, dass es heute als Browsererweiterung für Chrome und Firefox aus den entsprechenden Add-On-Stores sowie in Form einer Assembly für Windows 7-10 auf Basis von Chrome verwendet werden kann.

Das Spiel heißt "Poker 3 Bags" und umfasst fünf Spiele: "Texas Hold'em Poker", "Throwing Fool", "Czech Fool", "Three Sticks" und das Spiel "3 Bags" meines Autors. Es sind nur Spiele mit Bots auf dem lokalen Computer verfügbar.

Land

Also über Country Musik. Die Melodien von GTA San-Andreas deuteten darauf hin, dass es schön wäre, dem Spiel einige Cowboy-Themen hinzuzufügen: Schließlich wird Poker Texas Hold'em hier das Hauptspiel sein. Ich legte den Cowboyhut und die Pistolen auf das Stirnband, während ich die Karten auslegte.

Firefox

Und auch - ein kleines Hutsymbol links neben dem Namen des Spiels im Hauptmenü.

Google Chrome

Und der Hut wird auf dem Profilbild des Gewinners angezeigt. Das Gesamtdesign, eine Art Clown, habe ich beschlossen, nicht grundlegend zu ändern.

Verbesserungen

Neben grafischen Elementen hat sich auch der Code im Spiel geändert. Ich habe alles auf eine neue Version meines Motors übertragen. Allerdings wird die Engine in Bezug auf dieses Spiel zu laut gesagt. Die Engine unterstützt 3D-Grafiken, aber hier - nur die Sprites von Spielkarten in einem Flugzeug. Aber dann habe ich die Animation optimiert und Multithreading gemacht. (Natürlich gibt es in Javascript kein echtes Multithreading, zumindest wenn mit einem Browserfenster gearbeitet wird. Parallelität wird erreicht, indem alle Animationen für jeden Aufruf nacheinander durchlaufen werden.)

Es gibt mehr Optionen. Zunächst wurde ein Menü im Spiel angezeigt, über das Sie jetzt die Bildskalierung steuern können. Zum Beispiel:

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

Auf diese Weise konnten Sie das Bild in jeder verfügbaren Größe in das Browserfenster einfügen. Die Funktion arbeitet in Verbindung mit dem Fenstergrößenänderungsereignis, der gewünschte Maßstab wird vorberechnet. Letzteres kann auch manuell eingestellt werden. Zuvor sah dieses Spiel auf meinem Computer zu klein aus, und auf dem Telefon war es zu groß, und es wurden Bildlaufleisten angezeigt. Schließlich ist dieses Problem behoben. Wahrscheinlich müssen Sie jetzt die zweite Oberfläche des Spiels befestigen - die Porträtschnittstelle für mobile Geräte, insbesondere für das Telefon ... Die Größe der Browserzeile, die einen großen Teil des Bildschirms des Telefons einnimmt, gefällt auch nicht. Es gibt jedoch eine Schaltfläche zum Erweitern des Spiels auf den Vollbildmodus.

Android 7.0 und Windows 8.1

Sekunde. Ich habe Texas Hold'em Poker abgeschlossen. Jetzt ist die All-in-Wette verfügbar, die vorher nicht vorhanden war, sowie die manuelle Auswahl der Wettgröße. Die Chips in allen Spielen bewegten sich realistischer und entsprechend ihrer Stückelung: Wenn Sie beispielsweise einen Einsatz von 15 machen, verlassen zwei Chips - 5 und 10 - den Spieler vom Tisch und bilden dort eine Art Stapel. Bisher wurde nur ein bedingter Chip bewegt. Außerdem können sie jetzt nicht mehr 4, sondern bis zu 10 Spieler spielen. Nun, und andere kleinere Verbesserungen, die vielleicht nicht gestoppt werden sollten.

Technischer Bereich

Wie bereits erwähnt, ist das Spiel in reinem Javascript geschrieben, ohne Bibliotheken von Drittanbietern zu verwenden (selbst JQuery wird nicht verwendet). Es gibt nur eine Bibliothek, meine, die die Funktionen zum Anzeigen einer Schnittstelle auf einem Canvas-Tag implementiert. Tatsächlich ist der gesamte Spielinhalt Teil der Benutzeroberfläche. In letzterem habe ich so etwas wie ein Menü mit Hintergrund. Sie können beispielsweise den Spieltisch selbst für das Menü „Beenden“ verwenden, das aus einer einzelnen gleichnamigen Schaltfläche als „Hintergrund“ besteht. Es reicht aus, dieses Menü anzuzeigen, damit eine Tabelle und eine Schaltfläche auf der Leinwand angezeigt werden. Außerdem muss der Knopf nicht auf dem Untergrund liegen - er kann auch in der Nähe sein. Oder zum Beispiel kann das Substrat überhaupt nicht sein. Darüber hinaus können Sie für jedes Menü verwandte Sprites oder "Satelliten" anzeigen, die keine Schaltflächen sind. Für sie sowie für Knöpfe,relative Koordinaten werden eingestellt.

Der Document Tree (DOM) besteht aus zwei Canvas-Blöcken mit einer absoluten Positionierung, die durch die Größe des Browserfensters gestreckt wird. Alle Sprites, die für die Zeichenfläche erforderlich sind, werden mit drawImage () angezeigt. Die Hintergrundebene (Farbverlauf) und die Schnittstellenelemente liegen auf der unteren Ebene, und die obere Ebene wird für die Animation verwendet. Natürlich wäre es möglich, mich auf nur zwei Schichten zu beschränken, aber ich habe beschlossen, zwei weitere hinzuzufügen. In meiner UI-Engine ist das DOM so aufgebaut:

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

htmlCanvas ist eine Ebene mit Zeichenfläche , die der Größe des Browserfensters entspricht. Der Name ('canvbk') wird verwendet, damit Sie die Ebene bei Bedarf deaktivieren können (bei diesem Element ist dies niemals erforderlich). Dieser Block dient zur Anzeige des Hintergrundverlaufs und der Benutzeroberfläche.
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, . «» . .

Somit bleiben nur die beiden unteren Schichten dauerhaft eingeschaltet. Alle über m3d.ui.initHtml angegebenen Elemente werden von der Größenänderungsfunktion verarbeitet und bei der Größenänderung des Browserfensters angepasst.

Die Animations-Engine ist auch Ihre eigene. Seine Funktion besteht darin, die Parameter für eine bestimmte Zeit von vorgegebenen Anfangs- zu Endwerten zu ändern. Dies können zum Beispiel die Koordinaten entlang zweier Achsen (für 3D - entlang drei) und der Drehwinkel sein. Im Allgemeinen ist die Anzahl der Parameter für eine Animation nicht begrenzt, und Sie können eine Formel zum Ändern von Elementen erstellen. Schließlich werden in der Rückruffunktion, in der das Sprite positioniert ist, die aktuellen Werte aller Parameter mit einer Frequenz übertragen, die von der Verarbeitungsleistung des Systems abhängt. Fps können fallen, aber die gesamte Animationszeit bleibt unverändert. Die obere Leinwand akzeptiert Klickereignisse (und eine Schubkarre für mobile Geräte) mit der Bestimmung anhand der Koordinaten, welche Schaltfläche auf der Benutzeroberfläche gedrückt werden musste.

Die Animation funktioniert so. Das Objekt, das Sie verschieben möchten, wird aus der unteren Ebene entfernt (das Objekt muss ein „Satellit“ sein, der sich gerade ausschaltet), die gesamte Schnittstelle, dh alle offenen „Menüs mit einem Substrat“ werden neu gezeichnet (dementsprechend ist der Satellit nicht mehr vorhanden, es wird gelöscht), das Objekt es steigt in die obere Schicht auf, bewegt sich dort, verschwindet dann und fällt schließlich in die untere Schicht, wo es entweder an ein anderes „Menü mit einem Substrat“ als Satellit gebunden ist oder darüber hinaus, jedoch mit unterschiedlichen relativen Koordinaten. Das Menü auf der untersten Ebene wird erneut neu gezeichnet. Die Funktion zum Kombinieren des Inhalts der Ebenen bleibt dem Browser überlassen, dies geschieht nativ. DOM während des Spiels ändert sich in keiner Weise und besteht immer aus zwei übereinanderliegenden Leinwänden. Sofern beim Ändern der Größe des Browserfensters nicht der gesamte Inhalt einmal neu gezeichnet wird, bereits in einem neuen Maßstab.

Alles funktioniert unter Windows und Android in Chrome und Firefox. Sowohl vom lokalen Server als auch vom Dateisystem durch Öffnen von index.html. IE11 verlässt das Layout. Es scheint, dass die Leinwandgrößen oder -skalierungen dort irgendwie falsch definiert sind, was zum Auftreten von Bildlaufleisten führt. Obwohl das Spiel selbst gut funktioniert. Ich habe mich nicht damit befasst: Es ist unwahrscheinlich, dass jemand diesen veralteten Browser verwendet. In der alten Version von Edge funktioniert alles einwandfrei.

IE11 Ich

habe es nicht unter iOS (+ MacOS) und Linux getestet, aber ich sehe keinen Grund dafür, dass es nicht funktioniert, da alles sehr einfach gemacht wird.

Über die Lokalisierung. Es werden 2 Sprachen unterstützt - Russisch und Englisch. Wechseln Sie durch Klicken auf die Flagge im Hauptmenü. Technisch gesehen wird dies in Form von zwei js-Dateien mit assoziativen Arrays von Phrasen in verschiedenen Sprachen sowie verschiedenen Bildern implementiert, falls Text in das Bild eingebettet ist: zum Beispiel vertiefter Text oder Verlaufstext.

Mit der Welt teilen

Ich könnte mir nichts Besseres einfallen lassen, als in die Browser-Erweiterungsspeicher für Chrome und Firefox zu gehen. Nun, ich habe auch einen Build für Windows basierend auf Chrome erstellt.

Diese Version des Spiels ist eher eine Demo. Es bedarf weiterer Verfeinerung. Eine Testversion mit drei Spielen ist für 30 Tage geplant. Und die kostenpflichtige Version mit fünf Spielen ohne Grenzen. Letzterer hat auch die Möglichkeit, eine All-In-Wette beim Poker zu platzieren, und das Dienstalter der Kombinationskarten wird bei der Bestimmung des Gewinners berücksichtigt. Jetzt in der Demo gibt es drei Spiele und es gibt keine zeitlichen Beschränkungen. Später wird aus dieser Demo eine Testversion und eine weitere, bereits vollständige Version wird veröffentlicht.

Browser-Erweiterung

Als erstes habe ich beschlossen, das Spiel in die Add-On-Stores von Chrome und Firefox zu stellen. Ich habe Entwicklerkonten und einige Erfahrungen, da ich dort bereits eine meiner Browsererweiterungen gepostet habe. Übrigens, wenn jemand ChromeOS hat, wäre es interessant zu wissen, ob mein Spiel dort funktioniert. Ich habe keine Gelegenheit zu überprüfen.

Es gibt zwei Optionen zum Anzeigen von Erweiterungsinhalten - in einem Fenster über der Browseroberfläche oder auf einer separaten Registerkarte. Da der Inhalt einen ziemlich großen Bereich einnimmt und die aktuell geöffnete Registerkarte stark blockiert, habe ich die zweite Option gewählt.

Das Erstellen einer Browsererweiterung auf der Grundlage einer Webseite, die im Wesentlichen mein Spiel ist, ist nicht kompliziert. Sie müssen nur die Manifestdatei, Symbole und Screenshots hinzufügen. Im Chrome Webstore kannst du auch Videos mit dem Gameplay hinzufügen, was ich getan habe. Dann drehte er ein weiteres Video, bereits mit Firefox:

Die

Größe des Firefox-Browser-Add-On- Archivs betrug 4,8 MB. Das Spiel in entpackter Form - 5,2 MB. Der größte Teil des Volumens bestand natürlich aus Grafiken. Der Code des Spiels selbst ist für beide Browser genau gleich. Er unterscheidet sich nur in einem Dutzend Zeilen der Bindung, die für das Öffnen des Tabs mit dem Spiel verantwortlich ist, indem Sie auf das Spielsymbol im Browserfeld rechts neben der Befehlszeile klicken.

Da für das Add-On überhaupt keine besonderen Berechtigungen erforderlich sind und kein Zugriff auf Server oder persönliche Daten erforderlich ist, erfolgte die Moderation in beiden Filialen am Tag der Platzierung fast sofort.

Windows ausführbare Datei und andere Versionen

Ich habe die Assembly auf der Chrome-Engine mit dem einfachsten Dienstprogramm für Windows Web2Exe erstellt und in die Stores von Itch und Indiexpo hochgeladen, in denen eines meiner Spiele bereits vorhanden ist. Die Größe dieser Baugruppe betrug 115 MB. Nach dem Packen mit dem Programm zum Erstellen von Installationsprogrammen stellte sich heraus, dass das Distributionspaket zum Herunterladen ein Volumen von 40 MB hatte.

Build für Windows 7 - 10

Ich habe diese Version des Spiels nicht als Windows 10-Anwendung im Windows Store veröffentlicht, obwohl ich dort ein Entwicklerkonto habe. Ich habe Visual Studio vor ein paar Jahren schon lange abgerissen. Darüber hinaus gab es eine interessante Geschichte. Ich habe Windows 8.1 auf meinem Tablet lizenziert und es passt perfekt zu mir. Und auf dem Computer - Windows 10. Ab einer Version von Visual Studio - hier erinnere ich mich nicht genau - entweder können Sie damit keine Javascript-Anwendung mit Unterstützung für Windows 8.1 erstellen oder Sie möchten keine Anzeigen darin einbetten, wenn sie entworfen wurden, außer "Tens", auch unter dem älteren Windows 8.1 (aber ich hätte gerne das Potenzial zur Monetarisierung). Im Allgemeinen habe ich bereits vergessen, was genau da war, aber ein Problem hing genau mit den Support-Einschränkungen von 8.1 zusammen. Es ist jedoch klar, dass ich mein Spiel nur aus diesem Store herunterlade.und ich möchte es auf meinem Tablet spielen können. Der Laden selbst bewirbt meiner Meinung nach keine Bewerbungen. Und so habe ich mich noch nicht entschieden, ob ich das riesige Visual Studio wirklich wieder auf eine 32 GB MicroSD-Karte auf dem Tablet setzen möchte ... Das Entwicklerkonto funktioniert nur damit. Oder, nachdem Sie die Vor- und Nachteile abgewogen und die Anzahl der Besucher im Microsoft Store angegeben haben, schreiben Sie einfach weiter Code wie ein Notizbuch und spielen Sie überhaupt nicht mit riesigen Entwicklungsumgebungen? Schade, dass Sie dort das Archiv nicht einfach mit der Anwendung über das Formular auf der Website herunterladen können, da es beispielsweise für Browsererweiterungen implementiert ist.Ist es so stark, dass ich das riesige Visual Studio wieder auf eine 32-GB-MicroSD-Karte auf dem Tablet legen möchte? Das Entwicklerkonto funktioniert nur damit. Oder, nachdem Sie die Vor- und Nachteile abgewogen und die Anzahl der Besucher im Microsoft Store angegeben haben, schreiben Sie einfach weiter Code wie ein Notizbuch und spielen Sie überhaupt nicht mit riesigen Entwicklungsumgebungen? Es ist schade, dass Sie dort das Archiv nicht einfach mit der Anwendung über das Formular auf der Website herunterladen können, da es beispielsweise für Browsererweiterungen implementiert ist.Ist es so stark, dass ich das riesige Visual Studio wieder auf eine 32-GB-MicroSD-Karte auf dem Tablet legen möchte? Das Entwicklerkonto funktioniert nur damit. Oder, nachdem Sie die Vor- und Nachteile abgewogen und die Anzahl der Besucher im Microsoft Store angegeben haben, schreiben Sie einfach weiter Code wie ein Notizbuch und spielen Sie überhaupt nicht mit riesigen Entwicklungsumgebungen? Schade, dass Sie dort das Archiv nicht einfach mit der Anwendung über das Formular auf der Website herunterladen können, da es beispielsweise für Browsererweiterungen implementiert ist.

In naher Zukunft plane ich, das Spiel als i-Frame-Anwendung in den sozialen Netzwerken VKontakte und Facebook zu veröffentlichen. Gemäß ihren Regeln ist es immer noch notwendig, einige soziale Funktionen im Spiel zu schrauben, wie z. B. eine Bewertungstabelle der besten Spieler und so weiter.

Vielleicht lohnt es sich immer noch, in Richtung Google Play Market zu schauen. Soweit ich weiß, können PWA (Progressive Web Apps) jetzt dort gehostet werden. Aber ich habe kein Entwicklerkonto und habe es noch nicht herausgefunden. Auf der anderen Seite kann PWA auf Ihrer Website platziert werden, von der aus das Spiel auf dem Telefon installiert wird, ein Symbol erstellt wird und alles wie eine normale Android-Anwendung aussieht. Höchstwahrscheinlich ist es sinnvoll, nur mit einem großen Werbebudget in den Store zu gehen, das ich nicht habe. Im Allgemeinen gibt es noch keine Spiele auf Mobilgeräten. Ich denke, dass ich es einfach auf der Website veröffentlichen werde, um es über den Browser abzuspielen und als PWA-Anwendung zu installieren, um nicht von einer Netzwerkverbindung abhängig zu sein.

Ja, es freut mich, dass Google Play genau wie der Microsoft Store das Herunterladen von in Javascript geschriebenen Anwendungen ermöglicht. Ich mochte diese Funktion einmal im Microsoft Store. Schade, dass Letzteres nicht besonders beliebt ist. Und es ist so praktisch - ich habe dort nur 5,2 MB heruntergeladen (dh Javascript-Code und Bilder) - und Sie sind fertig. Ohne große Bindungen und zusätzliche Bibliotheken. Und der Browser wird von den im System installierten verwendet. Im Idealfall bietet es dem Benutzer auch die Möglichkeit zu wählen, welcher Browser als „Spieler“ für das Spiel fungiert. Microsoft bot, wie ich mich erinnere, beim Herunterladen einer solchen Anwendung aus dem Store nur IE11 an. Auf jeden Fall wurde diese alte Version meines Spiels darin gestartet. Wenn sie jetzt jedoch von Google zur Engine wechseln, gibt es möglicherweise keinen Unterschied. Chrome ist übrigens besser als IE11,funktioniert mit 3D-Grafik WebGL ... Dies gilt jedoch nicht für das Spiel, das in diesem Artikel behandelt wird.

Gesamt

Alles in allem ist dieses Spiel ein Simulator. Es gibt kein Online-Spiel, Sie können nur mit Bots üben. Die Hauptsache hier ist, sich die Kombinationen anzusehen, die Sie gesammelt haben und möglicherweise sammeln können. Klicken Sie dazu einfach auf die Menüschaltfläche mit einem Fragezeichen oder auf Ihre Karten. Fertige Kombinationen sind rechts mit einem grünen Kreis markiert. Potenzielle enthalten dunkle Karten, die noch vom Stapel kommen können. Angesichts der Verfügbarkeit anderer Spiele im Kit kann dieses Programm beispielsweise als Ersatz für gelangweilte Solitairespiele verwendet werden. Das Programm ist sowohl in Form einer Assembly für Windows als auch in Form eines Browser-Add-Ons autonom und benötigt für seine Arbeit keine Internetverbindung.

Endlich: Checkliste

Orte, an denen ich bleiben möchte und an denen dies bereits geschehen ist:

+ Browser-Erweiterungsspeicher
- Haupt-Windows-Spieleläden (Steam)
+ Sekundäre Windows-Spieleläden
- Mobile Stores
- Soziale Netzwerke
- Website

Add-On in Firefox

Persönliches Las Vegas oder ein Spiel in der Browser-Erweiterung