JavaScriptとCanvas、または個人のラスベガスでのカードゲーム。 パート1

暇なときに、カードゲームを思いつき、二度と考えずに電子版を作成しました。 そして、彼はテキサスホールデムポーカーを含む4つのゲームを追加しました。 そして、それをさらにおもしろくするために、ある程度の進歩を構築しました。あるゲームで勝った場合、新しいゲームが開きます。 ゲームを2つのソーシャルネットワークとWindowsストアにhtml5-jsアプリケーションとして投稿することを計画しました。 また、AndroidおよびiO用のビルドをさらに作成することもできます。 サーバーを介して他の人とプレイしたり、AIでオフラインでプレイしたりできます。



仕事のために、私はいつものように、サードパーティのエンジンとライブラリを使用しませんでした。jQueryも必要としませんでした。 キャンバスツールを含むバニラJavaScript機能のみ。 ゲーム内のキャンバスは、すべてのゲームグラフィックを表示するための基盤です。 今回はWebGLは必要なかったため、サポートされているブラウザーの動物園が拡大しました。 プログラミング環境は、いつものように、高度なノートブックになっています。 ゲームの容量は3.8 MBで、そのうち3 MBはpng形式の7つのスプライトマップです。 ゲームはhtmlファイルの使用を開始します。 PHPサーバー。 シングルプレイヤーゲームを選択する場合（つまり、AIを使用する場合）、サーバーへの要求は送信されず、すべての計算はクライアントで実行されます。 ディドックは書かなかった-流行に敏感な人はそれを必要としない。









次に-面白いジオメトリとプログラミング、そして第2部では、ソーシャルネットワークとストアでのゲームの配置についてのストーリーがあります。

GUI

グラフィックパーツのコードを書くのに時間がかかりませんでした。以前のゲームでは、jpgおよびpng形式、つまりGUIからスプライトをロードするキャンバスタグでJavaScriptメニューエンジンを既に開発していたためです。 そのコードを取得し、すべてのアクティブな領域、つまりマップとメニューボタンを、連想配列を使用する画面上のボタンとして定義するだけで十分です。 まあ、スプライト自体もスケッチします。つまり、デザインを作成します。 実際、メインの時間は、5つのゲームすべてのゲームロジックの説明に費やされました。 そして少し後で-2つのソーシャルネットワークとWindowsストア用のマルチユーザーバージョンを作成します。



ただし、キャンバスメニューが非常に直接用意されているという事実については、少し誤解を招きました。 あなたはそれを手に入れることはできません...一般的に、それ（govnokod）は完璧とはほど遠く、その能力は非常に限られています。 しかし、最も重要なことは、カードが退屈な直線に置かれるのではなく、カードの数に関係なく楽しいファンと一緒に出されるようにしたかったことです。 しかし、私のメニューは「ボタン」の回転をサポートしていませんでした。 したがって、この不名誉をきっぱりとプログラムする時です。 はじめに。

ラスベガスへようこそ

曲がりは、特定のパラメーターdによって設定されることにしました。このパラメーターは、カードのラインの中心がどれだけ上方に伸びているかを示します。









つまり、カードの数（n）、長方形の幅（w）は、極端な、退屈な、「曲がっていない」カードの中心によって制限され、カードの行の中央のシフト（d）で、それらに楽しみを与えます。 写真のようにファンが得られるように、各カードの中心点と回転角度を見つける必要があります。 私の方法がどれほど優れているかを言うのは難しいですが、これはジオメトリから思い出すことができたものです。 JavaScriptで記述します。

var L=0, h=0, dx=0, hx=0, hy=0; //    (1..3..n),      //  a   1..3  3..n var a = Math.sqrt ( d*d+(w*w/4) ); //  R     var p = 0.5*(a+w+a); var R = a*w*a / ( 4*Math.sqrt( p*(pa)*(pw)*(pa) ) ); // L0            var L0 = Math.asin( 1 - (d/R) ); // dL,           var dL = ( Math.PI-(2*L0) ) / (n-1); //     for (var i=0; i<n; i++) { //          L = L0 + (dL*i) + rot; // rot –    ,       ,   ,   w    //         ,          hx = -R*Math.cos(L) - R*Math.sin(rot); hy = d + R*Math.sin(L) - R*Math.cos(rot); //    ,      };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ラスベガスはすでにどこか近くにあります。



生成されたポイントと角度の配列を使用してキャンバスにすべてのスプライトを表示するコードは簡単で、キャンバスを操作するための標準機能のみを使用します。 スキームは単純です：キャンバスの状態を保存し、スプライトの中心が配置される場所に移動し、希望の角度でキャンバスを回転し、スプライトを表示してから、キャンバスの状態を復元する必要があります。 ところで、スプライトの半分の幅（w2）と高さ（h2）は毎回計算する必要はなく、事前に設定できます。 一般的に、このようなもの：

 var w2 = Math.floor(spriteW/2), h2 = Math.floor(spriteH/2); var x = spriteX+w2, y = spriteY+h2; ctx.save(); ctx.translate(x, y); ctx.rotate(spriteL - Math.PI/2); ctx.drawImage(spriteMapImage, spriteMapX, spriteMapY, spriteW, spriteH, -w2, -h2, spriteW, spriteH); ctx.restore();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

やった！ 今や、ベガスのように、カードがファンになっています-映画で見ました。 これまでの欠点、またはより正確な欠陥は、ボタンカードのスプライトが斜めに配置されているにもかかわらず、正しく移動しても、クリック可能な領域が回転しないという事実にあります。 つまり、それらの中心はスプライトのみと一致します。 ただし、このゲームではこれで十分です。 カードのずれの角度は非常に小さく、誤って隣のカードをクリックすることはほとんどありません。 ここで、この写真のようにカードから同様の円がある場合、それらはクリック可能ではなく、単に効果のためにあります。 プレーヤーカードの場合、曲がりはずっと少なくなります。



常に努力することがあります。 マウスポインターハンドラー内の正弦波と余弦波をカウントしてクリック領域へのエントリをチェックし、傾いたボタンによってより正確に配置できるようにすることができます。 または、マウスを動かしながらキャンバスを回転できます。 しかし、これはすべて、私には思われたように、プロセッサを過度に不当にロードします。 結局、クリックの任意の領域へのポインターのエントリを決定するために、マウスの動きごとにすべての「画面上のボタン」の正弦余弦を整理する必要があります。 もちろん、クリックイベント中にのみコーナーを修正できますが、クリック可能な領域に出入りするときにポインターの外観にそれほど美しい変化はありません。 また、この問題を解決する方法についても考えます。 それまでの間、続けてください。

AI

このサブタイトルを読んだ後、ここで彼はついに人工知能を発明したと思うでしょう。 起こったことは文明のすべての明るい心のために非常に長い間努力してきました。 しかし、私は失望します。 この場合、pathosの略語の下でAIは通常の乱数ジェネレーターを隠します。 さて、冗談です。普通ではありません。 ゲームAI（Ivan Ivanitch）には、まだ最小限のロジックがあります。 イヴァン・イワノビッチは真面目な男です。 ロジックはまだ補完されますが、今でも、たとえば、自分のゲームであるイラン・イバニッチは、私を裏切っています。 ポーカーでは、それがほとんどの場合負けです。 しかし、多分私はそれをプレイする方法がわかりません。 そして、あなたは言う、人工知能は存在しません。 いいえ、彼は明らかに何かを企んでいます...私は、たまたまSky-Netを作成することを恐れています。

カードアニメーション

ゲームからキャンディーを作りましょう。 マップアニメーションがなければ、すべてが何らかの形で鋭くandいように動作します。 メインレイヤーの上に別のグラフィックレイヤー（読み取り-透明なキャンバス、キャンバス）を追加すると、デッキとテーブル、テーブルとプレイヤー、デッキとその上のプレイヤーの間にカードの「レース」を配置します。 回転、歌、ダンス。 アニメーション化したいカードは、外部のキャンバスに転送されるだけで、隣人や背景を誤って消去しないように、中国の店で象になることを恐れずに、すでに自由に移動します。 そして、パスの終わりに、彼女は下のキャンバスに戻り、きちんと振る舞います。 必要ない場合は、ゲームメニューからアニメーションをオフにすることもできます。 ちなみに、クリックハンドラーはすぐに外部キャンバスにハングアップします。



次の入力パラメーターを使用して、キャンバス上のマップの動きを設定します：速度Vおよびポイント、初期（X0; Y0）および最終（X、Y）。 移動するとき、移動の開始から時間tiが経過した後の位置にスプライトを描画します。 そして、以前はもちろん、古い位置からスプライトを消去します。 前のレンダリングが完了した直後に、次のレンダリングを呼び出します。 したがって、コードが実行されるデバイスが許す限りスムーズな動きを保証します。 時間を参照すると、ブラウザの短期的なブレーキに関係なく、全体として動きが均一になります。 計算原理は次のとおりです。



モーションコール関数の開始時に、モーションのいくつかのパラメーターを定義します

 //   var t0 = Date.now() / 100; //       var Sx = X - X0; var Sy = Y - Y0; //     var S = Math.sqrt (Sx*Sx + Sy*Sy); //,      (ti),      (t),      , , x,  , ti / t = dxi / Sx.   ,       dxi = Sx * ti / t,  dxi = Sx * ti * V / S.     ,     .  –   . //     -,                 ,        .  ,     ti var constX = V * Sx / S; var constY = V * Sy / S;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、移動のサイクルでは、毎回、すでに時間内に座標を計算します

 //,    ,  var ti = Date.now()/100 - t0; //  (Xi;Yi)      var Xi = constX * ti + X0; var Yi = constY * ti + Y0;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして最後に、モーションのセグメントに属するこれらの座標を確認します。 つまり、XiはX0とXの間にあり、YiはY0とYの間にある必要があります。この条件が満たされる限り、（Xi; Yi）にスプライトを描画し、モーション関数をループします。 さらに、コードは理解できると思うので、詳細にペイントしても意味がありません。 原則全体を説明しました。



次に、スプ​​ライトの回転角度（ai）について説明します。 入力パラメーターとして指定された初期角度（a0）と最終角度（a）が異なる場合、モーション関数では現在の角度aiを次のように計算します。 角度の増分、つまり（ai）は、たとえば水平軸（（Xi-X0）に等しい）に沿ったパスの増分を指し、回転の合計角度（a-a0）は水平軸（Sx）に沿った一般的なパスを指します、つまり

ai /（Xi-X0）=（a-a0）/ Sx

 // ,        ,       ,      (a). var ai = (a-a0) * Math.abs (Xi - X0) / Math.abs(Sx) + a; //       (a-a0) / Math.abs(Sx);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

標準のJS変換および回転機能を使用して、キャンバスの予備回転で標準のdrawImageを使用してスプライトを描画します。ここでは、すべてが明確だと思います。



はい、このアルゴリズムはいくつかの特別なケースを考慮していません。 たとえば、距離が0の場合、0による除算エラーが発生しますが、カードの動きをゼロにしないのはなぜですか。 したがって、このような極端な状況をチェックする必要はありません。

ゲーム

含まれているゲームは次のとおりです。 Three Sacksは著者のゲームです。 「スローフール」、「テキサスホールデムポーカー」。 これらは元々開いていたものです。 閉店：「チェコの愚か者」と「3本の棒」。 十分な数のコインを獲得すると開きます。最初に閉じたゲームを開くには、プレイヤーは700枚のコイン、900枚目のコインを持っている必要があります。 最初に、プレーヤーには650コインが与えられます。 負けた場合、ゲームは逆に最初まで閉じられます。 コインは、オープンゲームの他のプレイヤーから獲得するか、購入することができます。 シングルプレイヤーバージョンでは、コインは完全に削除され、5つのゲームのうち3つしか利用できません。

ポーカーについては別に

私はポーカーをプレイしたことがありませんでしたが、これは人気のあるゲームであり、ワールドトーナメントも開催していると聞きました。 私はそのようなものと、カード詐欺師に関するいくつかの映画を見ました。 私が海戦をしていたときのように、私は海賊に関するシリーズを見ました。 初心者がポーカーのすべての組み合わせを覚えるのは難しく、さらに、ゲーム中にすべての可能なオプションをすぐに提示することは困難です。 したがって、自分の番中に呼び出すことができる画面を追加し、現在自分で可能なすべての組み合わせを確認します。 そして、これに応じて、これまたはその動きをします。 Ivan Ivanovich（Artificial Intelligence）もこのアルゴリズムを使用して彼の可能性を評価しているので、とにかくこの関数を書かなければなりません。 最終的には次のようになります。 明るいカードとは、テーブルと手にあるカードです。 暗色のものはまだ利用できないものですが、まだデッキから来ることができます。 また、5枚すべてのカードを上下逆さまにすると、どのような条件下でもこの組み合わせは不可能になります。 組み合わされた組み合わせは緑の点でマークされます：数字に近いほど良いです。









ポーカーでは、楽しみのために、AIだけがゲームに関与し、人がいない場合にこのようなオプションも提供しています。 コンピューター自体が無限にポーカーをプレイするスクリーンセーバーのようなものが判明しました。

設計

デザインは私の要素ではありません。 ゲームを作成する過程で、彼はいつものように作り直され、何度も調整されました。 その結果、ゲームがリリースされるまでに、スーツのメインメニューの場所で突然思いついたカバトカの黒と赤のバージョンに落ち着きました。 私は長い間、2種のうちどちらを残すかを考え、それから両方を切り替えることを決めました。

英語

以前のゲームのローカライズの経験から、スクリプトからすべてのキリル文字列を引き出してリンクに置き換えるのは非常に退屈であることがわかりました。 そのため、途中でそれらを言語ファイルに追加し、すぐに（コメント付きの）リンクをメインプログラムのスクリプトに挿入しました。 最初はロシア語のファイルのみを記入し、それからコピーを作成して英語に翻訳しました。 言語ファイルは、選択した言語に応じて動的に接続され、特定の名前を持つ文字列の配列です。 いつものように、簡単なスクリプト：

 var el=document.createElement("script"); el.type="text/javascript"; el.src="lng/lng_"+lng+".js"; el.async=true; document.getElementsByTagName("head")[0].appendChild(el);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、lng変数はコマンドラインオプションから事前に読み取られます。 htmlドキュメントの準備ができると、言語アプリケーション機能が起動します。 また、テキスト文字列が存在するすべての関数では、フレーズを含む言語ファイル配列の要素へのリンクが既に設定されています。 htmlページ自体のレイアウトにはフレーズがありません。実際、ドキュメントは2つのキャンバス（互いに重ねられている）とゲームのルールを表示するための空のブロック要素にすぎないためです。 ルールは「言語」ファイルにもあります。



画像に「ハードコード化」されたフレーズ（たとえば、ボタンキャプション）は、ロシア語と英語の場合、それぞれpng形式の個別の画像に配置されます。 また、背景-たとえば、ゲームテーブル自体、メニューのサブストレート、およびラベルのないその他のスプライトは、共通のファイルにあります。



次に、ロシア語のローカライズの例と、ロシア語と英語の共通の背景（縮小版）を示します。









「ロシア語」スプライトマップ









すべての言語のスプライト（背景）の一般的なマップ



メインメニューの素材が大きすぎるため、別の追加ファイルに配置されます。 これらはすべての言語にも共通しており、それらの「ボタン」はすでに両方の「言語」カードに含まれています。

音

ゲームのサウンドは、シンセサイザープログラムを使用して部分的に生成され、一部は無料のアセットから取得され、オーディオタグに接続されていました。 特別な話はありません。 現在のサウンドが終了しない場合、新しいサウンドがスキップされ、まったく再生されないという事実に関連する不快な瞬間が1つだけありました。 したがって、状況によっては音が互いに「重ならない」ように音を減らす必要がありました。

小計

次の記事では、WindowsストアにユニバーサルWindowsアプリケーションを配置する経験、html-jsファイルからWindows用のクラシック（デスクトップ）アプリケーションを作成する経験、およびソーシャルネットワークVKontakteとFacebookのマルチユーザーバージョンについて説明します。 現時点では、ゲームはWindowsストアで、Windows 8.1〜10のシングルユーザーUWPアプリケーションx86およびx64としてのみ利用可能です。また、AndroidおよびiO用のアセンブリも作成する予定です。 また、zipアーカイブのみをレイアウトして、すべてのオペレーティングシステムのindex.htmlでシングルユーザーバージョンのゲームを実行することもできます。



一般に、html-jsファイルを含むアーカイブは、「重い」開発ツールを使用して何かをビルドする必要がないため、インストーラーを作成する必要がなく、アセンブリにライブラリを含める必要がないため、このようなアプリケーションを配布するための最良のオプションであると思われます任意のブラウザーを使用して任意のOSで開き、アプリケーションが最適に動作するブラウザーを選択して使用できます。 アプリケーションストアがこの方法でアプリケーションを配布することを許可していないのは残念です。オペレーティングシステムは、たとえば実行可能ファイルでこれを行うため、htmlのショートカットをインストールまたは作成しません。 Windows 8.1〜10が何らかの形でこの方向に移動しない限り、Windowsストア用にアセンブルされたパッケージは4.4 MBしか必要としません。 ブラウザメーカーは、html-jsアプリケーションに切り替えて、ブラウザエンジンを使用するときのnode-webkitなどで行われるように、ブラウザインターフェイスを表示せずに、ある種の起動モードを提供することもできます。 その場合、たとえば、「クラシック」アプリケーションのアセンブリにエンジンを含めて、このような各アプリケーションでこのエンジンをドラッグする必要はありません。 確かに、Webアプリケーションには潜在的な可能性があります。3DWebGLグラフィックが利用可能で、バイトコードであり、ブラウザコードの速度はネイティブのものに近づいています。 しかし、このすべてについて-次の部分で。 それまでは、サーバーを作成しています。