Word Make Up Gameの作成におけるWeb開発経験

Webプロジェクトでの私の経験、つまり「Make Words」の実装を共有したいと思います。 ゲームはよく知られたパズルで、1つの長い単語から別の単語を作成する必要があります。



この記事の本質は、アイデア全体をアイデアから実装に移すために正確にどのように、何をしなければならなかったかです。

はじめに

時々、このゲームの「ペーパー」版をプレイしました。長い単語（たとえば、「トリセラポス」や「スパソプレオブラジェンスキー」）を作成し、7〜10分で、使用可能な文字からできるだけ多くの単語を作成しようとしました。 それから-彼らは順番に彼らの言葉を呼び、ライバルを消して繰り返しました。 最後の言葉を持っている人は誰でも-彼は勝ちました。



同時に、私は総合的にトレーニングし、ウェブ開発を学びたいプロジェクトのオプションを探していました。



プロジェクトの要件は次のとおりです。

• 難しくはありませんが、簡単ではありません（適用されたスキルとテクノロジーによる）。
• 約1か月の販売期間（±2週間、長時間引きずられないようにするだけでなく、退屈する時間もありませんでした）
• 私が知らない現代の技術と知識を使用する（専門能力開発）
• 本質的に興味深い
• 社会的に有用

一見シンプルに見えるにもかかわらず、そのようなアイデアを思い付くのに長い間うまくいきませんでした。 私はさまざまなオプションを検討し、先送りし、疑問に思いました-そして最後に、アイデアは完全に「成熟」し、明確さと特定のフレームワークを得ました。 積極的な行動の段階が始まり、考えは取り残されました。

作業計画、アイデア、アイデア、建築

一般的な考え方は次のとおりです。システムはバックエンドとフロントエンド（1つ以上）で構成されます。 バックエンドには、計算、論理および数学の実装という主な負担があります。 入力データの形式では、長い単語が彼に来て（解決するために）、作業の結果はロシア語に存在する単語の可能な組み合わせに関するデータです。 データはJSON形式で提供され、バックエンドはRESTサービスとして機能します。



フロントエンドは、クライアント要求でWebサービスを呼び出し、応答（一連の可能な単語の組み合わせ）を受信し、ユーザーとのゲームインタラクションを実装します。



現時点では、2つのAPIメソッドがバックエンドに実装されています。



http://api.combination.cf/web/words/

http://api.combination.cf/web/description/







最初の方法は単語の可能な組み合わせを提供し、2番目の方法は特定の単語の意味を解釈することを目的としています。

1.バックエンド

1.1。 辞書、単語ベース

ユーザーに言葉を伝えるには、まずその言葉を知り、どこかに保存する必要があります。 最初は、大規模なオンライン辞書またはナレッジベース（TSB、Wikipediaなど）を解析するつもりでした。 しかし、Webを検索したところ、別のファイル（テキスト形式）の形で、すでに組み立てられた既製の説明辞書が見つかりました。 もちろん、それらを解析することは、それをいくつかのストリームに送り込み、数万ページを生データで解析するよりもはるかに簡単でした。 解析用のページのリストも準備する必要があったことは言うまでもありません。



次のソースは、ゲーム辞書の基礎として使用されました。

1. Ozhegov S.I.ロシア語の辞書。 わかった 65,000ワード/ 16th ed。、-M。：1984。
2. Efremova T.F.説明辞書。 -M。：ルーシ。 lang。、1996。

さまざまな珍しい単語や珍しい単語でゲームを詰まらせないために、一部のローカルで古い単語、形容詞、複数形は破棄されました。 もちろん、そのようなクリーニングは完璧ではなく、人（できれば言語学者）をこの作品に引き付けることで、より正確な結果を得ることができます。



しかし、少なくともデータベースに名前、姓、都市名、国などが含まれていないことは良いことです（百科事典辞書にありますが、説明辞書にはありません）。



元の単語のすべての文字を使用すると、アナグラムが得られます（アナグラムは、特定の単語の文字や音を並べ替えることで構成される文学的なデバイスであり、結果として別の単語やフレーズが得られます）。

例：アウストラロピテクスは水球選手です。

1.2。 非繰り返し投稿

したがって、単語ベース（基本辞書）があります。 単語検索アルゴリズムは、文字のすべての可能な組み合わせを取得し、辞書に存在するかどうかを確認することになります。



長い表現から、長さの異なる短い単語を作成できます。 したがって、組み合わせの「 繰り返しのない配置 」セクションが必要です。 2〜（「語長」-1）文字の長さの語を検索します。



元の単語のさまざまな長さに対してソートする必要があるオプションの数を計算します。 次の式を適用します。









Kの10個の要素の繰り返しのない配置の数：

に	プレースメントの数
1	10
2	90
3	720
4	5040
5	30240
6	151200
7	604800
8	1814400
9	3628800
合計：	6235300

N文字の長さの単語をチェックするためのオプションの数：

（指定された長さの単語のすべての配置オプションを要約します）

N	チェックするオプションの数
2	2
3	9
4	40
5	205
6	1236
7	8659
8	69280
9	623529
10	6235300
11	68588311
12	823059744
15	2246953104075
20	4180411311071440000
25	2.6652630354867E + 25

1.3。 バックエンド、YII2

バックエンドはPHP（YII2）で実装され、MySQLがデータベース、キャッシュ-Memcachedとして選択されます。 ここではすべてが簡単です。API用の個別のモジュールを作成し、データベースから必要な選択を記述します。 JSON形式でデータを提供します。

1.4。 最適化

そして今、楽しみが始まります。 アプリケーションのリソース消費を最適化し、スクリプトの高速動作を確保する必要がありました。 スクリプトのメモリ使用量、プロセッサ時間、合計実行時間を監視します。



最初はメモリを使用して作業を最適化しました。 8文字長の単語を送信すると、スクリプトがエラーでクラッシュしました。



PHP Fatal error: Out of memory (allocated 128545216) (tried to allocate 77824 bytes) in /home/xxxxx/public_html







この問題は、PHPコードでジェネレーターを使用して解決されました。 関数はデータを部分的に提供し始め、結果全体をそれ自体に蓄積しませんでした。 また、 mysql_free_result（$ result）関数を使用して、データベースクエリの結果で占有されていたすべてのメモリを解放するのにも役立ちました。 現在、メモリ使用量は12〜14 MBを超えていません。



CPU使用率 。 最初は、スクリプト全体のCPU負荷は100％でした。 コードを最適化し、リクエストを（少数の大きなリクエストではなく）多数の小さなリクエストに分割することにより、負荷は60〜80％に削減されました。



スクリプトランタイムの最適化は、

Memcachedは、辞書のすべての単語のリストを保存します。 したがって、MySQLの負荷を取り除き、結果を得るまでの時間を短縮することができました。 別の方法として、FileCacheファイルキャッシュを再確認しましたが、ここではMemcachedよりも結果が悪くなりました。

最適化結果

ローカルサーバー（クアッドコアプロセッサ）では、10文字の単語に対するすべての組み合わせの検索時間は約22秒です。 同時に、2つのコアは常に60％〜80％でロードされます。 （Memcachedを使用する場合）ディクショナリ内のこれらのすべての組み合わせを確認するには、さらに10〜11秒かかります。



合計（10文字の単語の場合）：22秒。 （バリアントの生成）+ 10秒（単語の検証）= 32秒（総稼働時間）。



時間の増加は線形です。9文字の単語は約3秒でチェックされ、10文字は32秒で、11文字は350秒でチェックされます。



すなわち オプションを列挙するための11文字の単語は（妥当な時間内に）使用できなくなりました（このアルゴリズムでは、このハードウェアで）。 10文字-多かれ少なかれ許容、制限; 9以下-十分に速く、ユーザーには見えません。

2.フロントエンド

（目標に基づいて）2つの面を書くことにしました。 PHPの 1つ（YII2） -完全なユーザー機能を備えた「単語を推測する」ゲームの主要な作業バージョン。 React JSの2つ目は同じクライアントアプリケーションですが、機能が制限されています（JSを学習するためのトレーニングプロジェクト）。



PHP（YII2） + Bootstrapレイアウトでゲーム機能を実装するのは簡単で、速くて快適でした。 喜びのためのプログラミング、創造的なレッスン：ユーザーインタラクションインターフェイス、ダイアログボックス、メニュー項目、ボタンを作成（および、思いついたら変更）。 ページをコンテンツで満たし、情報メッセージを表示します。 これらすべての設計を行います。 リダイレクトなどを考える



しかし、 React JSを使用すると、それほど単純ではありませんでした。 知識のギャップが出てきたので、JavaScriptの基本を（React JSライブラリ自体の機能を勉強することに加えて）繰り返して説明する必要がありました。 ファイルをダウンロードする、テキストのブロックを表示するなど、最も簡単なアクションを実行する方法を探すのに数時間かかりました。 しかし、当初は計画されていました。HTML+ Jqueryの知識は今では得られません。 その結果、ホスティングにアップロードするための静的サイトが構築されました。



ゲームユーザーは、次の対話オプションを使用できます。

1. 単語ゲーム -大きな長い単語が推測されます。オプションを考え出し、それらを確認できます。 見つかった単語が保存され、統計情報がカウントされ、情報メッセージが発行されます（単語が見つかりました/見つからない、エラー、すでに推測された組み合わせなど）。 ゲームは延期され、別の時間に継続されます。 ゲームは完了または再起動できます。
2. 単語検索 -元の文字で構成できる単語のすべての可能な組み合わせが単純に表示されます。 ゲームまたは別のサービスのためのある種の「ヒント」。
3. 単語の意味 -推測または生成された単語の解釈が表示されます。 電子辞書のオンライン版。

3.ホスティング

ここでは特に新しいことは書きませんが、要件と機能に基づいて特定のプロジェクトのホスティングを選択する必要があります。 驚いたことに、ほとんどすべての企業が高品質の技術サポートを提供しています。彼らは迅速に対応し、実際に発生した困難を解決するのに役立ちます。 私自身の経験から、システム管理者とdevopsの作業が必要かつ重要であると確信しました。

可能な改善とアイデア

バックエンドの最適化（APIの動作を高速化する）とフロントエンド（ユーザーインターフェイスの拡張と「ポリッシュ」）の2つの方向に移動できます。 両方のオプションは有望です。



バックエンド -おそらく、ここでは、大量のデジタルデータを高速処理するためのPHP機能では不十分です。 おそらく、すべての計算を迅速に行う別のプログラミングモジュールで個別の高速モジュールまたはスクリプトを作成することが適切です。 結果の一部はキャッシュできます！？ 辞書をすばやくソートするには、おそらくNoSQLデータベースに目を向ける必要があります。 また、システムのサービス（機能）を増やすことも適切と思われます。



ユーザーインターフェースにより、ゲームデザインの専門家をコンサルタントとして呼び込むのが適切です（または、自分自身と数​​晩座ってすばやく簡単に実装できることを考えて、私たちは皆、何百もの異なるコンピューターゲームをプレイしました）：ゲームインターフェースを考え、サービスを拡大します、ユーザー登録の追加、統計の収集、高得点表、保存されたゲームなど。



おそらく、テスト（フロントエンドでの受け入れテストとバックエンドでのユニットテスト）でコードをカバーすると役立つでしょう。 機能の更新と拡張により、すべてを手動で何度もテストしないようにするため。

おわりに

一般に、言語学と言語学はそれ自体が非常に興味深いものです。 プロジェクトに取り組む過程でロシアについて多くのことを学びました。



リポジトリ内のソースコードへのリンクと作業サイトへのリンクを提供します（ホスティング-ベースVPS、サイトは「Habraeffect」の下に「落ちる」可能性があります）。



多くのバグと不正確さが発見され、開発プロセス中に修正されました。 しかし、一部はおそらく残った。 あなたがそれらに遭遇した場合、厳密に判断しないでください。



ゲームサイト

バックエンド（API）およびフロントエンド（PHP）を備えたリポジトリ

React JSフロントエンドリポジトリ