独自の Wordle ゲームを作成する方法

Wordle のような Web ゲームはどのように動作しますか? 独自のゲームを作成するには何を知っておく必要がありますか?

すべてのゲームがヒットするために大規模な開発チームと何年もの開発期間が必要なわけではありません。たとえば Wordle は、Josh Wardle がパートナーの Palak Shah のために短期間で作成したもので、そのシンプルさと機能がほとんどないにもかかわらず、その信じられないほどの人気により、ニューヨーク タイムズの身代金を支払ったほどです。

Wordle のような Web ゲームはどのように動作するのか

世界中の注目を集めて大金を稼げる、シンプルだが中毒性のあるゲームのアイデアがあれば、Wordle のような Web アプリケーションを自分で書くことは十分に可能です。

Wordle Web サイト フレームワークは、他の Web サイトと同様、HTML、つまりハイパーテキスト マークアップ言語です。これは、ページの読み込み時に要素を配置する場所をブラウザーに伝えるために、すべての Web サイトが依存するコードです。現在読んでいるサイトは HTML エンコードされており、実際のコンテンツだけでなく、メニューの位置からフォント サイズに至るまで、そのコンテンツを表示するための手順も提供されています。

HTML に加えて、CSS (カスケード スタイル シート) があります。これは、画像のプロパティであってもテキストのブロックであっても、要素のレイアウトを容易にするために HTML に追加されたものです。CSS を使用すると、サイトに複数のページがある場合、ページごとではなく、視覚的なプロパティを 1 回設定できます。

Web ページを作成できるようにするには、HTML と CSS を学ぶ必要がありますが、多くのサービスではコードを 1 行も記述せずにこれを行うことができます。これらのサービスは、非常に高度なインターフェイスで要素をドラッグ アンド ドロップし、すべての HTML と CSS を制御する機能を提供します。

Wordle のようにサイトを完全にインタラクティブにするには、検索ボックスやツールバーなど、静的な HTML および CSS ページをより動的なページに変換するための JavaScript も必要です。JavaScript は、2D または 3D のビデオを操作したり、ユーザーが入力した情報を保存したり、データベースからデータをロードしたり、計算を実行したり、特定のユーザーのアクションに従って事前定義されたコードを実行したりすることができます。

Josh Wardle 氏が TechCrunch に説明したように、Wordle は JavaScript で書かれており、ページの読み込み時にコードが読み込まれるため、初期読み込みの完了後にゲームをオフラインでプレイできるようになります。最新のブラウザは JavaScript を理解して実行できます。この場合、JavaScript はデータベースから単語をロードし、ユーザー入力を識別し、各文字の情報を提供します。

Josh Wardle 自身も、ゲームのコードは特に複雑ではないと認めており、NYT が買収する前に Wordle をデータベース内のすべての単語とともに完全にダウンロードできたのはそのためです。サイトのソース コードを調べるだけで解決策を見つけることもできました。

独自のゲームを作成するには何を知っておく必要がありますか?

しかし、Wordle のようなゲームを自分で作成するにはどうすればよいでしょうか? プログラミングには学習が必要ですが、Wordle レベルで何かを作成するために HTML、CSS、JavaScript についてすべてを知る必要はありません。Codecademy で説明されているように、使用されるプログラミング手法の 1 つは、入力された各文字をチェックし、適切な色で表示する for ループです。

Codecademy は、HTML、CSS、JavaScript、その他多くの Web 開発言語を無料で学習できるサイトの 1 つです。演習はよく構成されており、ブラウザで直接実行することで常に学習できます。それを行う方法がわかり、その結果を直接見ることができるでしょう。一部の高度な機能やチュートリアルには有料のサブスクリプションが必要ですが、多くはすでに無料で学習できます。

Treehouse はCodecademy よりもさらに進んでおり、使用するには月額 25 ドルを支払う必要があります (無料試用可能)。これは、HTML、CSS、JavaScript などを学習するためのより専門的で効率的なリソースですが、Wordle のようなゲームに必要なものをはるかに超えています。さらに先に進みたい場合は検討してください。

ツリーハウスの反対、ダッシュ。このサイトでは HTML、CSS、JavaScript の基本のみをカバーしていますが、完全に無料で、特に初心者に優しいです。すべてはブラウザ内で直接管理され、Codecademy と同様に、これらの言語が提供するものを最大限に活用することを実践しながら学習します。

このリストは完全なものではありません。特に、これらは英語のみのリソースなので、フランス語でも簡単に見つけることができますが、HTML、CSS、および JavaScript について学習を開始するための良い基礎となります。プレイするか、コードを書くかはあなた次第です。