ゲームTriplexの歴史、または頭を壊すために必要な正方形の数

Webプログラミングの基礎を学ぶために、私はHTML5ゲーム-Triplex （ www.quadpuzzle.ru ）と呼ばれるパズルを書くことにしました。 自分と友人のためにゲームを書くことは、戦いの半分です。 このプロジェクトを念頭に置いて、幅広いユーザー向けに製品をゲームから除外したかったのです。 それがどれだけ判明したかは、判断するのはあなた次第です。

ゲームのルールは簡単です。 競技場では、広場からの数字がレイアウトされています。 ゲームの目標は、指定された長方形にすべての形状を配置することです。 回転できるのは、円でマークされた1つの図形のみです。 各問題の解決策は独特です。




次のブラウザの最新バージョンで動作します：Opera、Opera-mobile、Safari（Windows、iPad2）、Android（HTC Desire、Samsung Galaxy Tab 10.1）、Chrome、FireFox、IE9。

次のアイデアが実装されました。

1. ゲームは1つのhtmlファイルで構成されます。 ローカルドライブにダウンロードして、インターネットなしでプレイできます。 IE9はこのモードをサポートしていません。
2. ネットワーク接続がある場合は、サーバーで合格レベルをマークし、すべての注目プレーヤーの結果を確認できます。
3. 各レベルのレコードのテーブルには、このレベルを最初に解決したプレーヤーの名前が格納されます。 また、他のプレイヤーによるレベルの経過時間に関する統計も保存します。
4. 次の各レベルは、前のレベルのソリューションによってエンコードされます。 したがって、すべてのレベルが1つのhtmlファイルに格納されているにもかかわらず、単に最後のレベルを取得して渡すだけでは機能しません。
5. ゲームは5つの言語に翻訳されています：ロシア語、英語、フランス語、ドイツ語、中国語。

同様のゲーム

ゲームを発明したのは私ではないということを黙って言うのは不誠実です。 Triplexのプロトタイプは、非常によく似たゲームBlockPuzzle 500（ www.mtoy.biz ）で、最初のAndroid携帯電話でプレイする機会がありました。



本質的に、Triplexは次の点で異なります。

• フィギュアのサイズ：
  BlockPuzzleは2、3、4、5マスの数字を使用し、Triplexでは2と3のみの数字を使用します。
• Triplexは同じレベルに複数の同一の数字を持つことができますが、BlockPuzzleはすべて異なります。
• BlockPuzzleでは回転した図形はありませんが、Triplexではいくつかのレベルで1つの回転した図形があります。
• BlockPuzzleはAndroid専用であり、TriplexはHTML5をサポートするブラウザーを搭載していれば、どのデバイスでも再生できます。
  正直なところ、AndroidではBlockPuzzleをプレイする方が快適です-インターフェイスの応答性が向上しています。 誰かがTriplexをAndroidや他のプラットフォームに移植したいなら、私はうれしいです。 必要なのはtriplex.htmlにあります。

タスクはどこから来たのですか

このゲームのレベルジェネレーターが最初に開発されました。 最初は、好奇心のためだけです。 そのようなタスクの性質と特性を理解したかったのです。 それらの数、そのような問題を見つけることの難しさ、それらを解決することの難しさ...プログラムは、レベルを生成できるJava言語で書かれています。 これらのレベルでプレイ、タッチ、解決したかった。 どうやら、私は子供の頃、サイコロで十分にプレイしていなかったので、今はスクエアでプレイしたかったです。 このアイデアは、ユーザーインターフェイス要素を備えたレベルの視覚化プログラムを作成するだけでなく、これから全体を作成することも考えられました。

ジェネレーターは次のようにレベルを検索しました。

1. フィールド3x2、3x3、4x3、...のすべての組み合わせを通過し、2つおよび3つの正方形の3つ以上の数字を使用しました。
2. 類似したものをすべて除外します（ターンと反射まで）。
3. それらから、ソリューションが1つしかないものを選択しました。
4. 他のソリューションを追加しなかった場合は、1つの回転可能な形状を選択しました。

計算アルゴリズムの複雑さ

当初、このプログラムは、任意のサイズの任意の数とサイズのタスクを選択するために考案されました。 このアルゴリズムは、分枝限定法に従って機能します。

解の図を、他の図（問題の状態からの図）で構成されるサイズWxHの長方形の図にします。 解決策を構成する接触正方形（共通の面を持つ正方形）のすべてのペアを検討します。 そのようなすべての面（2 * W * H-W-H）。



各面は、次の2つの状態のいずれかになります。
0.閉じている-隣接する正方形は異なる形状に属している可能性があります。
1.オープン-隣接する2つの正方形が同じ図に属します。

（2 * W * H-W-H）バイナリ値のN-kuを、すべての面の状態のセットと呼びます。 明らかに、状態の任意のセットは、長方形から数字へのパーティションに明確に対応します（パーティションの色付けのアルゴリズムの説明を参照してください）。 明らかに、どのパーティションにも少なくとも1つの状態セットがあります。



状態の多くの可能なセットには、2 ^{（2 * W * H-W-H）}要素が含まれます。 つまり、可能なすべてのパーティションを並べ替えるには、0から2 ^{（2 * W * H-W-H）} -1のサイクルを開始し、インデックス変数のバイナリ表現の各i番目のビットをi番目の面の状態で考慮するだけで十分です。 サイクル本体の複雑さが定数によって制限されている場合、すべての組み合わせを列挙する全体の複雑さは、ソリューションの領域から指数関数的になります。 反復回数を取得してみましょう。

寸法	量 繰り返し
1x1	2 （2 * 1 * 1-1-1） = 2 0 = 1
2x1	2 （2 * 2 * 1-2-1） = 2 1 = 2
2x2	2 （2 * 2 * 2-2-2） = 2 4 = 16
2x3	2 （2 * 2 * 3-2-3 ） = 2 7 = 128
2x4	2 （2 * 2 * 4-2-4 ） = 2 10 = 1024
3x3	2 （2 * 3 * 3-3-3 ） = 2 12 = 4096
...	...
6x6	2 （2 * 6 * 6-6-6） = 2 60

つまり、6x6タスクのループインデックスは64ビット整数型のままです。 周波数が3GHzのプロセッサで、反復ごとに1プロセッササイクルの速度で空のボディでこのようなサイクルを開始すると、プログラムは12年間= 2 ⁶⁰ /（3 * 10 ⁹ * 3600 * 24 * 365）動作します。

総当たりフィルタリング

検索を大幅に削減するには、明らかに不適切なパーティションのグループ全体を破棄する必要があります。 このために、次のフィルタリングメカニズムが考案されました。 すべてのボックスを左から右、上から下に降順でソートします。左上が最も古く、右下が一番下です。 各正方形は、面のペア（右と下）に一意に関連付けられています。 したがって、正方形の順序は、当然、接触する面の順序を誘導します。下の方が古いもの、右の方が若いものとします。 各パーティションは、フィルター関数を介して1つのフィルターから次のフィルターに渡されます。フィルター関数は、さらにパーティションを渡します。 ブレークがすべてのフィルターを通過した場合、ゲームに入ります。 パーティションがフィルターの条件を満たさない場合、フィルターは条件が満たされないために最小二乗を示すことができます。 次に、パーティションの列挙は最年少の面からではなく、指定された正方形の最年少の面から続きます。



一般的な場合、任意のフィルターの場合、パーティションの数をこの方法でどれだけ減らすことができるかを見積もることは困難です。 ただし、非常に単純な例では、それがときどき顕著になることが示されています。 したがって、分離された正方形（1つの正方形から独立した数字である正方形）を持つパーティションを破棄するフィルターのおかげで、最初のステップでのパーティションの数は25％減少します：最も古い正方形は、2つの隣人の1つと少なくとも1つの共通の面を持たなければなりません つまり、12年ではなく、十分な9です。4つの角の正方形が隣接でない場合、「分離された正方形」フィルターは、それぞれの検索を25％削減します。これは既に（1-（3/4） ⁴ ）= 68 ％ 残りの小さな正方形についての同様の考慮事項は、次数O（2 ^{W * H} ）の列挙の削減につながります。

Triplexレベルを生成するために、次のフィルターが使用されました。

1.2x2重複
-同じ図に属する4つの正方形（2x2）があるが、4つの共通面の少なくとも1つが共通でないパーティションを破棄するフィルター。

2.2x1Cell
-上記の孤立した正方形のフィルター。
3.ストレートカット
-まっすぐな水平または垂直セクションを持つパーティションを破棄するフィルター。 このようなカットは、パーティションを2つの部分に分割し、再配置して、2番目のソリューションを取得します。 このルールは、パーティションの両方の部分が同じセットで構成されている場合にのみ満たされません。 この場合、2番目の解決策はうまくいきませんが、パーティションの各部分はより小さな次元の独立したタスクであるため、パーティションはゲームにとって興味深いものではありません。
4. Shapes3
-3桁未満のタスクを破棄するフィルター2つの数字から問題を解決することはまったく面白くない。
5. Shape23
-4個以上の正方形の数字があるパーティションを破棄するフィルター。 このフィルターは、Triplexに固有です。
6. RotatedAndReflected
-同一のパーティションを破棄するフィルター-90、180または270度の回転および/または鏡面反射によって互いに取得されるパーティション。 したがって、同一の各パーティションは8つの同一のパーティションに関連付けられます。 パーティションのセットに線形順序付けを導入しているため、各8個から最小パーティションを選択できます。 フィルタリングされたパーティションが最小でない場合、それを破棄します。 これは、すでにこの8つのパーティションを検討していることを意味します。
7.ソルバー
-複数のソリューションがあるパーティションを破棄するフィルター。 このフィルターはおそらく最も興味深いものですが、ゲームを完了するために独自のソルバーを作成したいプログラマーのタスクを容易にしないために、その作業のアルゴリズムについては説明しません。 ただし、ソルバーは分岐限定法を使用してソリューションを選択します。 「枝」の葉の数（組み合わせの数）は、式によって計算されます
C！/（C ₁ ！C ₂ ！... C _m ！）、
ここで、Cはパーティション内の数字の数、mはパーティション内の異なる数字の数（同一の数字のグループの数）、C _iは各グループの同一の数字の数です。 たとえば、すべての数値が同じである場合、組み合わせはm = 1およびC = C _1の 1つのみです。 最初のレベル（3つの異なる数字、回転する数字に注意を払うまで）では、3！/（1！1！1！）= 6の組み合わせが得られます。 10レベル（4つのグループに6つの数字）は、6！/（2！2！1！1！）= 180の組み合わせになります。 100番目のレベル（5つのグループで9つの数字）は、9！/（3！3！1！1！1！）= 10080の組み合わせになります。 600レベルでは、約10 ^11の組み合わせが得られます。 多くの組み合わせがあるという事実にもかかわらず、ソルバーは、Triplexのすべての問題を1〜2秒で解決します。 これは、タスクを見つけることはそれらを解決するよりもはるかに難しいことを示唆しています。 そのため、たとえば、6x6のタスクを検索する場合、ソルバーは5887655のタスクを解決し、46個だけを選択しました。

Triplexの場合、2マスと3マスの数字では、説明されているフィルターのセットは最適とはほど遠いです。 しかし、プログラムはより複雑なタスクを生成するように設計されており、Triplexは完全に異なる、より単純なアルゴリズムが存在する特殊なケースに過ぎません。これについては後で説明します。
フィルターの順序がプログラムのパフォーマンスに大きく影響することに注意してください。 アルゴリズムの複雑度が最も低く、大規模なグループの最大数の不良パーティションを削除するフィルターは、リストの一番上に配置する必要があります。 たとえば、Solverを最初に配置すると、ほとんどの場合、最大数のパーティションが破棄されます。 ただし、パーティションを一度に1つずつ評価して、許容できないほど長く動作します。

発電機レポート

6x6のディメンションのタスクの生成に関するレポートを検討してください。 次の表は、処理されたパーティションの数とフィルターを示しています。

チェック済み	受け入れた	捨てた	落ちた割合	落ちた割合 合計から 数字	フィルター
596745944245	295317406559	301428537686	50.51	50.51	2x2Duplicates
295317406559	110686580321	184630826238	62.52	30.94	1x1Cell
110686580321	79876633976	30809946345	27.84	5.16	ストレートカット
79876633976	79875530828	1103148	0.00	0.00	Shapes3
79875530828	47094698	79828436130	99.94	13.38	形状23
47094698	5887701	41206997	87.50	0.01	RotatedAndReflected
5887701	46	5887655	100.00	0.00	ソルバー
596745944245	46	596745944199	100.00	100.00	合計

最初に注意したいのは、チェックされたパーティションの総数です-596745944245 <2 ⁴⁰です。 つまり、「境界線」メカニズムのおかげで、チェックを2 ⁶⁰から2 ⁴⁰に減らすことができました。 このタスクを完了するのに12日かかり、「境界線」メカニズムがないと考えると、12 * 2 20〜12 * 10 ⁶日かかるか、1つではなく100万のプロセッサコアを使用する必要があります。 この表には、除数2 ^20の構成要素を理解するために、各フィルターがどのように検索を削減したかを示す1つの非常に興味深い列がありません。
予想どおり、RotatedAndReflectedは、指定されたすべてのパーティションの7/8 = 87.5％をスローし、8つの同一タスクごとに1つだけを選択しました。 興味深いのは、調査したパーティションのうち、Shapes3フィルターによって破棄された100万を超えるさまざまなオプション（2桁のパーティションオプション）があったことです。 Triplexの 6x6パーティション（2 60〜10 ¹⁸ ）のうち、選択されたのは46個だけであると想像するのはさらに困難です。

タイムライン

したがって、6x6タスクの場合、検出されたレベルの数（LEVELS FOUND）の時間依存性と、考慮されるパーティションの割合（WORK DONE）の時間（日数）依存性のグラフは次のようになります。

次の2つの点に注意してください。

• まず、上で説明したように、左上の正方形に適用された孤立した正方形のフィルターのおかげで、WORK DONEは25％から始まります。
• 第二に、プログラムが機能したという事実にもかかわらず12
  日、すべてのレベルは、25％から40％のWORK DONE値で最初の4日間に見つかりました。 他の次元でも同じことがわかります-見つかったレベルのほとんどは検索の開始時に見つかりました。 これは、最低8つの同一のタスクが選択されるRotatedAndReflectedフィルターによるものです。

タスクディメンションテーブル

この表は、ゲームに陥ったすべてのタスクに関するデータを提供します。

面積 決定	寸法	数量 レベル	時間	全般 量 レベル	全般 時間
8	4x2	2	0秒	2	0秒
9	3x3	1	0秒	3	0秒
10	5x2	1	0秒	4	0秒
12	4x3	4	0秒	8	0秒
15	5x3	6	0秒	14	0秒
16	4x4	5	0秒	19	0秒
18	6x3	8	0秒	27	0秒
20	5x4	48	0秒	75	0秒
21	7x3	16	0秒	91	0秒
24	6x4	27	2分	118	2分
	8x3	16	1分	134	3分
25	5x5	22	3分	156	6分
27	9x3	19	12分	175	17分
28	7x4	45	41分	220	59分
30	6x5	55	3時間	275	4時間
	10x3	19	2時間	294	6時間
32	8x4	112	17時間	406	23時間
33	11x3	22	20時間	428	2d
35	7x5	158	7日間	586	9d
36	6x6	46	12d	632	21d
	9x4	69	16日間	701	37d
	12x3	20+	8日間+	720+	45日+

それは注目に値する：

• 発電機は45日以上働きました。
• エリア32までのタスクが最初の日に生成されました。
• 面積36のタスクを検索するのに36日かかりました。
• ディメンション8x4および7x5で予想外に多数のタスクが見つかりました：それぞれ112および158。 これは、他のディメンションの場合よりも大幅に多くなります。

スプリットカラーリング

最初の3つのフィルターは、ビットのセットの形の面の状態でのみ動作します。 それらに続くフィルターは、形状に関して機能します。 一連のバイナリ状態を一連の図に変換するには、パーティションを個別の図に色付けするためのワンパスアルゴリズムが使用されます。

int color = 1; for(int i = 0; i < H; ++i) { for(int j = 0; j < W; ++j) { if (painted[i][j] == 0) { flood(i, j, color++); } } } 

ここで、フラッド関数は、同じ図に属する隣接するセルのシーケンスを使用して、セル（i、j）から始まる図を描画します。 このカラーリングアルゴリズムの全体的な複雑さは、正方形の数-O（W * H）で線形です。

回転形状

回転可能な図形は、ゲーム用に選択された検索パーティションで検索されます。 各図について、そのさまざまな回転と反射の多くが考慮されます-変換：4つの回転と反射-合計8つのオプション。 Triplexの場合、最大4つあります：スティック2ごと、コーナー4ごと。元の図のセットで、いずれかの変換で置き換えられた場合、新しいセットからソリューションを作成することはできません。
フィギュアを回転させることができます-解決策は同じままです。 次に、回転した図のセットからゲーム用に1つを選択します。これにより、ソルバーによる解決策を見つけるタスクが最も複雑になります。 選択した形状がランダムに回転します。
直感的には、回転した数字を使用したタスクは解決が容易であるようです-すべての数字を収集し、空きスペースを残します
ピボット可能なため、フィギュアが左スペースに収まる可能性が高くなります。 しかし、それを考えると、図を作る
回転可能、新しいソリューション、ソルバーがチェックしなければならない組み合わせの数、
回転した図形が持つ異なる変換の数が非常に多くなります（Triplexでは2または4）。
たとえば、いくつかの回転した図形を選択できます。たとえば、図形のサブセットの最も複雑なソリューションの1つです。 おそらく将来のバージョンではこれが行われるでしょう。

タスクの順序付け方法

ソルバーは自然な方法で問題を解決し、可能な組み合わせを順番にソートします。 問題を解決すると、ソルバーはそれに難易度レベルを割り当てます。完了した反復サイクルの数は、式C！/（C ₁ ！C ₂ ！... C _m ！）で計算される可能な組み合わせの数によって上から制限されます。 三重のタスクは、説明されている難易度を上げることによって順序付けられます。 このような複雑さの評価は、人が経験する複雑さとは一致しません。 プレーヤーの観点から各タスクの複雑さを評価するために、各タスクを解決する時間に関する匿名の統計がサーバーに保持されます。 将来、このような統計がタスクの効率化に役立つことを願っています。

生成アルゴリズムの他のオプション

ゲームの条件を満たすすべてのタスクを検索する唯一の方法は、あらゆる種類のパーティションを列挙することではありません。 総面積とソリューションの面積に一致するあらゆる種類の図のセットを整理することにより、問題を検索できます。 たとえば、Triplexでは、2つのダブルスティック、2つのトリプルスティック、4つのトリプルコーナーの8種類の数字しかありません。


問題6x6 = 36の場合、数字の最大数は18、最小は12です。したがって、セットの数は、8 ¹⁸ /（2！ ⁶ 3！3！）= 2 ^48/9 <2 ⁴⁵ （18個の各数字の値8のいずれかで、最小順列数で割った値）と下から8 ¹² /（8！4！）> 2 ¹⁶ （12の数字はそれぞれ8のいずれかで、最大順列数で割った値）。 順序付きセットの場合、式は同じですが、除数がありません。 一方では、より多くの順序付けられたオプションがありますが、最も可能性が高いのは、国境のより最適なバイパスを考え出すことです。
すべての種類の8つの数値（a ₁ 、a ₂ 、... a ₈ ）を反復処理できます。ここで、 _aiはソリューションのi番目の数字の数です。 このような8の場合、図の合計面積に線形制限が適用されます。
2 * a ₁ + 2 * a ₂ + 3 * a ₃ + 3 * a ₄ + ... + 3 * a ₈ = 36
このアルゴリズムで動作するプログラムは、2時間ですべてのレベルのTriplexを検出しました。 これは、パーティションを反復処理するのに必要な速度の500倍です。 確かに、複雑さが指数関数的に増加することは注目に値します。 次の2週間で、このメソッドは合計1300レベルを見つけました。

ゲームのクライアント側

ゲームの重要な部分は、生成されたタスクを解決する機会をプレーヤーに提供するプログラムです。 ゲームはHTML、CSS、およびJavaScript（合計2100行）で記述されています。 すべてのロジック、すべてのリソース、さらには700以上のレベルすべてが1つのhtmlファイルに収まります。 したがって、ゲームをダウンロードすると、ネットワークに接続せずに最後までゲームを実行できます。

グラフィックデザイン

ゲーム内のグラフィックは非常にシンプルで、写真はなく、背景はカウントされません。 正方形は、グラデーションで塗りつぶされた複数色の<div>の形で作成されます。 回転された正方形の内側の円も正方形であり、境界線が最大に丸くなり、グラデーションの塗りが逆になります。 IE9はそのようなトリックを提供せず、円のグラデーション塗りつぶしはまだ正方形になっていることが判明しました。
ゲームの背景を生かしたかった。 その上には、ディーバからゆっくりと飛ぶ灰色の円がありました。 HTC Senseのデザインに触発されたようです。 しかし、私は2つの障害に遭遇しました。
第一に、それらを飛ばすのにはあまりうまくいきませんでした。1つの理由で、1秒あたり1ピクセルの動きが急激に動いて見えました。 私は1.0未満の増分でより頻繁にシフトしようとしましたが、とにかく離散的にシフトしました。
第二に、Androidの一部のブラウザでは、いくつかの大きなサークルでさえシステムに非常に負荷がかかっていました。 したがって、背景から静的な画像を作成し、このCSSスペルでhtmlファイルに「縫い付け」ました。background-image：url（data：image / png; base64、/ 9j / 4AAQSkZ ... =）;
正方形のサイズを画面のサイズと解像度に合わせて調整するために、スプライトを使用しませんでした。スケーリングすると、それらがぼやけます。
おそらく誰かが2DグラフィックスにHTML5 Canvasを使用しなかった理由を尋ねるでしょうか？ このような単純なグラフィックスでは、Canvas機能が非常にうまく機能することに同意します。 しかし、プロトタイプを書いたとき、Canvas座標グリッドの1つの不快な機能に気付いていました。整数座標はピクセル間の間隔を示します。 さらに、私の新しいタブレットでのCanvasのパフォーマンスは期待できませんでした。 したがって、最初のプロトタイプでは、HTML DOMと、最終バージョンまで生き残ったDIV要素の正方形を使用しました。

合格レベルを保存する

Triplexを紹介したほとんどの人のHTMLゲームの認識は、合格の結果を保存することを心配させました。 通常、彼らは15-30レベルのどこかで尋ねました：「そして、ネットワークがシャットダウンするか、コンピューターがフリーズするならば、すべてが再び行きますか？」
ゲームは、ハードドライブのブラウザプロファイルに10秒ごとに自動的に保存されることに注意してください。 したがって、コンピューターの電源を切ったり、ページを更新したりすることを恐れないでください。 ストレージエンジンはHTML5 localStorageを使用します 。 これと、すべてのレベルがゲーム自体に保存されているという事実により、ネットワークに接続せずにプレイできます。
ただし、localStorageにはコインの裏側もあります。これはベータテスト中に発見し、新しいドメイン名を登録してゲームを新しいアドレスに再配置することを決定しました。 実際、localStorageはサイトのドメイン名にバインドされています。 プレーヤーが別のサイトからゲームをダウンロードした場合、最初からやり直す必要があることがわかります。 この問題に体系的に取り組むために、localStorageが他に何に関連しているのかを明確にしましょう。 ローカルドライブへ。つまり、別のデバイス（職場、自宅、井戸、電話など）で再生することはできません。 ブラウザへのバインディングもありますが、localStorageが保存されている場所と形式はわかりません。 その後、洗練されたスクリプトを使用して、古き良きCookie、ログイン、パスワード、サーバーサポートを手に入れました。 怠は抵抗しましたが、great祖父が白黒テレビセットとダンディのセットトップボックスの後ろに男を引きずり込んだ当時のさらに古い方法に頼ることになりました。 はい、ご想像のとおり、レベル番号とそのコードを紙に鉛筆で書くことについて話しています。 コードはゲームオプションにあります。

国際化とローカリゼーション

私は叔母に私がゲームを終了し、彼女が遊ぶことができると約束しました。 したがって、ゲームをロシア語または別の言語に翻訳する機会を実現することにしました。 このような機会は国際化と呼ばれ、英語の国際化では最初のiと最後のnの間に18文字があるため、i18nは開発者の輪で指定されます。
i18nを実装するというアイデアは非常に単純なため、既製のソリューションを探す必要さえありませんでした。 言語テキストを含む各HTML要素に対して、クラス「i18n」が指定されました。 例：<span class = 'i18n'> simple graphics </ span>。 ゲームコードでは、すべてのフレーズの翻訳を含むI18N構造が入力されます。

  //   var I18N = { "OK": { ru: "OK", fr: "bon", de: "OK", zh: "??" }, "simple graphics": { ru: " ", fr: "graphiques simple", de: "einfache Graphik", zh: "????" }, ... } 

最初の言語変更では、i18nクラスのすべての要素について、元のコンテンツがorigHTMLフィールドに格納され、I18N構造で指定された翻訳に置き換えられます。
「N秒/分/時間/日前」というフレーズには、文脈依存の翻訳が必要でした。 これを行うには、ロジックを少し複雑にする必要がありました。 I18N構造では、翻訳の代わりに、コンテキストに応じて翻訳する関数を指定できます。

  "seconds ago": { en: i18nSecondsAgoEn, ru: <b>i18nSecondsAgoRu</b>, fr: " il ya quelques seconds", de: i18nSecondsAgoDe, zh: " ???" }, ... function <b>i18nSecondsAgoRu</b>(context) { return i18nNumberRu(context, '', '', ''); } ... function i18nNumberRu(context, num0, num1, num2) { var num = +context; var result; if (num >= 20) { num = num % 10; } if (num == 1) { result = num1; } else if (2 <= num && num <= 4) { result = num2; } else { result = num0; } return context + ' ' + result + ' '; } 

私はロシア語のローカライズ（l10n =ローカライズ）を行いました。フランス語、ドイツ語、中国語は友人によって作成されました：ジュリア、マーシャとセルゲイ、 アレクセイ 。

実績表

競争心を必要とするプレイヤーのために、ゲームは、ゲームのメインページから利用できる達成テーブルのサーバーサポートによって補完されます。 各レベルの実績の表には、このレベルを最初に解決したプレーヤーの名前が格納されます。
オンラインで遊ぶ：

• すべてのプレイヤーは、誰がどのくらい前に現在のレベルを解決したかを確認します。
• 各レベルを通過した後、レベルを通過した時間がサーバーに送信されます。このレベルをまだ誰も通過していない場合は、テーブルに名前を入力することもできます。

ゲームをハックする方法

ゲームの問題を解決せずにハイスコア表に登録しようとする職人がいることは間違いないでしょう。 これは額では機能しないと言いたいです。 サーバー上で合格レベルをマークするには、ソリューションのチェックサムを提供する必要があります。 このチェックサムは、次のレベルに進むためにも必要です。 つまり、ゲームの各レベルは、前のレベルのソリューションによってエンコードされます。
また、サーバー側をハッキングから保護しようとしました。

• すべての入力パラメーターのチェックがあります。
• SQLクエリで特殊文字をエスケープします。
• ハイスコ​​ア表の特別なHTML文字をエスケープします。

通過時間の統計を台無しにするのは簡単ですが、ゲームにはまったく影響を与えず、レベルの難易度の大まかな推定のためにのみ作成されます。

サイトの準備とインターネット上でのゲームの配置に関する質問

友人だけでなく、多くのインターネット視聴者とゲームを共有するには、ホスティング、ドメイン名登録、フォーラム、ソーシャルネットワーク、ウェブサービス、openIDなど、多数の関連技術の研究に突入しなければなりませんでした。しかし、この技術やその技術が特定の問題を解決するのに適しているかどうかを単純に判断するためでも、より深く研究する必要があります。

お金の問題

この世界のすべてが無料でできるわけではないことが判明しました。 ゲームの費用はかなり控えめですが、ドメイン名で年間150ルーブル、単純なホスティングで年間300ルーブルで、広告の負担はかかりません。 最近、私は友人（ AlexeiZavjalov 、 vitroot ）が無料で提供するホスティングにゲームを転送し、 phpBB3フォーラムエンジンをインストールしました。 Triplexを商用トラックに転送する予定はありません。ゲームを無料で広告なしにしようと思います。 将来、レベルジェネレータのソースを投稿するかもしれません。 ただし、この記事を読んでプログラマーが独立して書くことは難しくないと思います。

おわりに

まあ、それだけです、それについてはまだ話す時間がありました。 私はそれを作成することに興味があったのと同じくらいゲームを楽しんでくれることを願っています。