5,816 測定値

70 行の Javascript で簡単なポケモンゲームを再現する

に marinsborg8m2022/07/10

長すぎる; 読むには

このゲームは、「そのポケモンは誰ですか？」に基づいています。アニメポケモンシリーズより。シンプルなゲームで、70 行弱の JavaScript コードしかありません。無料で導入できる方法も教えます。このゲームは、改善してポートフォリオに追加できる完璧なプロジェクトのアイデアです。アプリケーションは非常に簡単です。ランダムなポケモンのスプライトシャドウを表示し、プレイヤーに推測させてから、ストリークカウンターを増やすかリセットします。

Companies Mentioned

featured image - 70 行の Javascript で簡単なポケモンゲームを再現する

序章

「あのポケモンは誰？」ほとんどの人に思い出をもたらすはずです。それが何であるかわからない場合は、アッシュケッチャムと彼のポケモンの友達ピカチュウの冒険を探しに行くことをお勧めします.

この投稿では、HTML、CSS、および JavaScript を使用して、簡単なポケモン推測ゲームを作成する方法を紹介します。ゲームは完全に「あのポケモンは誰？」に基づいています。アニメポケモンシリーズより。ここでどのように見えるかを思い出すことができます。

シンプルなゲームで、70 行弱の JavaScript コードしかありません。あなたはそれがどのように見えるかを見て、ここで試すことができます.無料で導入できる方法も教えます。このゲームは、改善してポートフォリオに追加できる完璧なプロジェクトのアイデアです。

この投稿では JavaScript についてはあまり説明しませんが、オンラインで無料で利用できる多くの無料のチュートリアルから学ぶことができます。ただし、このようなゲームを作成するために必要な手順は何かを教えます。

始める方法は？

これを学校での課題として、または仕事のタスクとして受け取ったと想像してみましょう。誰かが上からビデオを見せたので、それを再現する必要があります。どうやって始めますか？

さて、最初に確認する必要があるのは、必要なデータです。

この場合、ポケモンスプライトのリストと、各スプライトのポケモン名が必要です。通常、データベース、CSV、または Excel ファイルからそのようなデータを取得します。別のオプションは、それをすべて提供するポケモンAPIがあるかどうかを確認することです。

幸いなことに、無料で必要なものをすべて提供するPokeAPIがあります。彼らの Web サイトでは、API ドキュメントを見つけることができ、API をテストすることもできます。アプリケーションの起動時に API 呼び出しを 1 つだけ行います。その呼び出しの結果を変数に保存し、期間全体で使用します。

公開されている無料の API を使用する場合は、常に呼び出しの数を最小限に抑えるようにしてください。これは、誰かが料金を支払っているサーバー上で何らかの作業が発生するためです。

アイデアを思いつく

必要なデータがすべて簡単に利用できることがわかったら、アプリケーションに必要な機能を確認する必要があります。それを機能要件といいます。それらを書き留めてから、書いたものの実装を開始します。したがって、このアプリケーションの機能要件は次のようになります。

API からすべてのポケモンデータを取得する
ランダムなポケモンのスプライトの影を表示する
プレーヤーの正しい推測の現在の連続を表示します
プレイヤーは、入力フィールドに名前を書き込んで Enter キーを押すことで、ポケモンの名前を推測できる必要があります。
プレーヤーが正しく推測した場合、ストリークを 1 増やします。そうでない場合、ストリークをゼロにリセットします。
推測した後、スプライトを表示して名前を出力することで、ポケモンが何であるかを明らかにします
最初のステップを除いて、上記のすべてのステップを繰り返します

非機能要件のリストを作成することもできます。

アニメの背景に似た背景画像を見つけるか作成する
Pokemon フォントに似たフォントを見つける
入力フォームに CSS スタイルを追加する

実装

ご覧のとおり、アプリケーションは非常にシンプルです。ランダムなポケモンのスプライトシャドウを表示し、プレイヤーに推測させてから、ストリークカウンターを増やすかリセットします。最後のステップでポケモンを表示し、その後新しいポケモンを取得します。

お気に入りのテキストエディタを開きます。 Visual Studio Code (VS Code) を使用するのが好きです。「 index.html 」、「 style.css 」、「 action.js 」の 3 つのファイルを作成します。 3 つのファイルすべてを同じフォルダーに配置します。 index.html を開いて初期化します。 VS Code では、! と入力するだけで実行できます。タブキーを押します。 VS Code を使用しておらず、HTML ファイルを初期化する方法がわからない場合は、ここで確認できます。その後、head タグ内に CSS および JS ファイルへのリンクを追加するだけです。

body タグ内に、スプライトが表示される 1 つのイメージタグ、ユーザーが推測するための 1 つの入力フィールド、および正しい推測ストリークを表示するための 1 つのスパンフィールドを追加する必要があります。これらの各タグには、一意の id プロパティが必要です。これで HTML の作業は完了です。これまでのところ、HTML は次のようになります。

 <!DOCTYPE html> <html lang="en"> <head> <!--For implementation details visit marinsborg.com--> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="action.js" defer></script> <link rel="stylesheet" href="style.css"> <title>Who's that Pokemon?</title> </head> <body> <img id="sprite"> <input type="text" placeholder="Who's that Pokemon?" id="guess"> <br> <span id="streak">Streak: 0</span> </body> </html>

それでは、action.js ファイルに注目しましょう。ゲームの全体的なロジックがあります。 GitHub で、私の action.js ファイルを確認できます。このファイルでは、その動作についてほぼすべての行にコメントしています。そのため、ここでは行ごとに説明するつもりはありません。

ファイルでわかるように、ベース URL を持つ PokeAPI は追加の引数「limit」と「offset」を取ることができます。そうすれば、API 応答で取得したいポケモンとその数を選択できます。オフセットを 0 に設定し、制限を 150 に設定して、常に第 1 世代のポケモンのみを取得します。これは好きなように変更できます。

上の画像でわかるように、API はオブジェクトの配列を返し、各オブジェクトにはポケモンの名前と URL が含まれており、これを開いてそのポケモンに関する詳細情報を取得できます。ポケモンは PokeDex 番号で並べ替えられますが、配列内では配列が 0 から始まるため、番号が 1 減ります。必要な API 呼び出しはこれだけです。

JavaScript では、いくつかの方法で API を呼び出すことができます。 fetch 関数を使用しました。データが API から取得され、変数に保存されると、ゲームを開始できます。

ゲームはgetPokemon()関数で始まります。この関数は、ユーザーが推測するたびに新しいポケモンを生成するためにも使用されます。そのため、その関数の開始時に、新しいポケモンを生成する前にクリーンアップが必要です。

ポケモンの生成は簡単です。乱数を取得し、ポケモンの名前とその番号のスプライトを取得して、変数に保存します。その後、 img srcプロパティをスプライト URL に設定し、CSS プロパティの輝度をゼロに設定して、ポケモンの影を表示します。

その後、ユーザーが Enter キーを押すまで、アプリケーションは何もしません。 Enter キーが押されたかどうかをチェックするイベントリスナーを入力フィールドに追加する必要がありcheckGuess() 。

checkGuess()関数は、ユーザーの推測に基づいてストリーク値を増加またはリセットし、 showPokemon()関数を呼び出します。 showPokemon()は、HTML のストリーク値を更新し、ポケモンのスプライトを明らかにし、ポケモンの名前を表示します。 2 秒後、 getPokemon()関数が呼び出され、プロセス全体が再び開始されます。それだけです。

スタイリング

では、このゲームにスタイルを追加して、ビデオと同じように見えるようにします。ご存知のとおり、スタイリングには CSS が使用されます。私のCSSファイルを確認できますが、あまり含まれていません。そして、あなたは私よりもずっと上手にスタイリングできると確信しています.結局のところ、私は単なるバックエンド開発者です。

ここで見たりダウンロードしたりできる背景画像を見つけました。ポケモンのフォントによく似たフォントも見つけました。私のリポジトリからダウンロードすることもできます。背景画像の設定は簡単です。CSS ファイル内で、プロパティ 'background-image' を画像へのパスと共に body タグに追加する必要があります。

スプライトは常に画面の左側に表示され、テキストとポケモンの名前は右側に表示されます。このような効果を 2 つの列だけにするには、 flexboxを使用できます。 HTML 内に、クラス「行」を持つ親 div を追加する必要があり、その div 内に、クラス「列」を持つ 2 つの div を追加する必要があります。

カスタムフォントの読み込みも CSS で簡単です。 @font-face を使用して、フォントの名前とフォントへのパスを設定します。その後、そのフォントをその名前で使用できます。そのフォントを使用して、「そのポケモンは誰ですか?」のスタイルを設定します。画面の右側に、ポケモンの名前が表示されます。

入力フィールドとストリークのスタイルを好きなように設定できます。入力フィールドに丸みを帯びた角を追加し、テキストを揃えました。サイズも変えました。好きなものをチェックしたり、私の値を使用したりできます。

最後に追加する必要があるのは、モバイルデバイスのスタイル設定です。ブラウザーウィンドウの幅が 500 ピクセル以下の場合に、新しい CSS プロパティを設定する@media ルールと共に追加されます。列が行として表示されるように変更し、フォントのサイズを小さくし、入力フィールドの幅を広げる必要があります。スタイリングは以上です。私が言ったように、あなたはそれを私がしたよりもはるかにうまくやることができます.

次のステップ

このチュートリアルでは、「あのポケモンは誰?」を実装する方法を示しました。 HTML、CSS、JavaScript を使用したゲーム。行き詰まっている部分がある場合は、action.js ファイル内のコメントを読むか、ここまたはTwitter で私に質問してください。新しい投稿については、そこで私をフォローすることもできます。

練習のために、いくつかの新機能を実装して、このゲームを改善し、ユニークにすることができます。例えば：