JavaScriptでロールプレイングゲームを作りました。あなたもできます。方法は次のとおりです。

だから、ゲームを作ってみたいのですが、少し怖いですか?心配しないでください、私もそうでした!

たとえば、オブジェクトを使用することを恐れていました。それらは私が後で棚上げしたこの大きな不気味なものでした。でも今はいつも使っています!

JavaScriptロールプレイングゲームを構築するために行ったすべての手順を説明します。

これがCodePenで実行されている私のゲームです。(まだモバイル向けに最適化されていないことに注意してください):

まずゲームのポイントを選んでください。パズルですか?RPG?ハック&スラッシュ?さて、それを作ることの技術的な難しさについて考えてみましょう。パズルゲームには、多くの複雑なJavaScriptが必要になります。ハックとスラッシュには、多くの注意深いバランス調整などが必要になります。

また、ブラウザゲーム、モバイルゲーム、またはその両方(「ネイティブWeb」ゲーム)にするかどうかを決定します。

たとえば、プレイヤーが24の呪文を持っているため、私のゲームはモバイル画面にうまく適合しません。小さな画面でこれらの小さなボタンをクリックするのは快適ではないので、モバイル用にゲームを再設計する必要があります。

次に、実際にゲームを作成するためにプログラムする必要があるすべてのものを書き留めます。私にとってそれは:

  • 在庫システム
  • アイテムジェネレータ
  • プレイヤー統計システム
  • 貯蓄システム

第三に、これらの問題を1つずつ解決してゲームを作り始めます。

実際にゲームを作成するのに助けが必要ですか?

ゲームを小さなタスクに分割する方がはるかに簡単です。あなたはゲームを作っているのではなく、在庫システムを作っているのです。次に、戦闘システムを作成しています。等々。

すでに描画が得意である場合、または描画が得意になるまでに数か月または数年を費やしたい場合を除いて、次のツールを使用して、ゲームの見栄えを良くするアセットを作成します。

  • Game-Icons.net —これらのアイコンは楽しく簡単に色付けできます
  • Open Game Art —いくつかの素晴らしいパブリックドメインアセットを入手してください
  • 写真の一括サイズ変更—独自の小さなアイコンを作成するための優れたツール
  • CSSスプライトジェネレーター—アイコンのCSSスプライトシートを作成するのに役立ちます

私がそれらに遭遇した問題と私がそれらをどのように解決したか

スプライトシート

ゲームに20枚以上の画像を含める予定はありますか?もしそうなら、あなたはそれぞれへの画像リンクで20の画像を作りたくありません。20枚の画像はそれほど多くないと思うかもしれませんが、さらに50枚追加することにした場合はどうでしょうか。そこで、スプライトシートが役に立ちます。それらにいくつかの画像を配置し、CSSファイルをプロジェクトにコピーして、目的の画像に対応する要素にクラスを追加するだけです。

ゲームの状態を保存する

ゲームを保存しますか?ブラウザのLocalStorageを使用するか、サーバーに保存するかを選択できます。サーバーにはバックエンドの知識が必要です。ない場合は、LocalStorageを使用することをお勧めします。ユーザーがクリーンアップツールを使用してゲームを削除しない限り、ゲームを保存します。これが私がそれをした方法です:

基本的に、すべてのデータを1つのオブジェクトに保存し、ロード時にアイテムを更新します。JSON stringifyを使用して、後で解析します。

コードをモジュール化する

ハードコーディングする部分とモジュール化する部分を把握します。私は誤ってスペルのハードコーディングを開始しましたが、すぐに醜くなりました。これらの関数のうち24個と、24個のifCritical関数が必要でした。

今、あなたは尋ねるかもしれません、2番目の呪文はどのように機能しますか?スペルオブジェクトを使用して処理を行う関数playerAttack()があります。

  • 最初に、spellsオブジェクトを呼び出すupdatespells関数を実行します。次に、この呪文はあなたの現在のステータスを取得し、それらを「ダメージ」や「マナコスト」などの値に変換します。
  • ダメージが0より大きいかどうかをチェックします。0より大きい場合、ボスにダメージを与え、ダメージ、どの呪文がそれをしたか、そして量を表示します。他のほとんどの値に対してもこれを行います。ゼロより大きいチェックは役に立たないと思うかもしれませんが、ゲームが0のダメージを与え、0のマナを回復したと言ったときにもう一度考えます。
  • 次に、スペルにカスタム関数がある場合は、カスタム関数を実行します。これは、メインの攻撃機能では不可能な特殊効果を呪文に与えるために使用できます。

ゲームループ

私の場合、ゲームループは、プレーヤーの統計、プレーヤーが死んでいるかどうか、プレーヤーがレベルアップしたばかりかどうか、ボスが死んでいるかどうかなどをチェックして更新します。

これは自分で理解する必要があります。良い学習体験だと思います。チェックと更新をいつ何を実行する必要があるかを考えてください。たとえば、レベルチェックでは、レベリングはそれほど重要ではないため、20秒ごとに実行するように設定しました。

しかし、戦闘開始後、毎秒実行されるボスデスチェックもあります。どうして?したがって、プレイヤーはボスが死ぬまで20秒待つ必要はありません。

他のいくつかのものは、ループする必要さえありません。関数は、必要なときに呼び出すことができます。たとえば、私の更新スペル関数を見てください。プレイヤーが呪文を使用したときにのみ呼び出されます。

私が学んだいくつかのこと:

  • オブジェクトは良いです。このように、データを保存する必要がある場合は、50個の個別の変数ではなく、オブジェクトを保存するだけで済みます。
  • タイムアウトと間隔は常に変数として設定して、後でクリアできるようにします。ただし、それらが永続的な効果であり、クリアする必要がないと確信している場合を除きます。
  • 1つの大きなjavascriptファイルは賢明な考えではないかもしれません。CodePenでは1つのJavaScriptファイルしか使用できませんが、理想的には、すべてをモジュールに分割する必要があります。
  • パフォーマンスを気にしない場合は、オブジェクトを更新する必要があるときに、オブジェクトをコピーして貼り付けるだけで済みます。値の半分を個別に更新する必要はありません。オブジェクトが巨大な場合は、最初に次のような変数としてオブジェクトを定義することもできます。varobject; そして、更新したいときに他の関数を使用して構築します。私は自分の呪文でこれを行いました。プレイヤーが呪文を唱えるたびに、updateSpell()関数は最初に呪文オブジェクトを再度定義し、すべてのダメージと統計を計算してから、呪文を発動します。

私が妥協した面白いこと:

  • スキルマナコストはボスレベルごとです。なぜなら、彼らがプレイヤーレベルだった場合、レベルアップしたプレイヤーを罰するからです。これはまた、私が好きだった、より高いレベルのボスをはるかに難しくしました。
  • アイテムはすべての統計で作成されますが、0の場合は表示されません。このように、未定義をチェックする必要がなく、0として生成された場合は統計の表示を回避できます。ダブルウィン!
  • 私はバフとデバフをたくさん単純化しました。基本的に、var buffStat、nerfStat、totalStat、およびstatがあります。したがって、バフまたはデバフがスタックすることはありません。
  • ボスの場合、nerfstatスキルは実際には0にnerfしません。これはそれよりもはるかに洗練されています。統計を9999999で弱め、0未満かどうかを確認します。そうであれば、0に設定します。したがって、統計が数十億に達するレベルに到達した場合は、さらに追加する必要があります。ゼロ。

自分のスキルを伸ばすための楽しいプロジェクトを構築しているだけでも、もう少し先の計画を立てるべきだと私は考えています。

また、バグがどのように発生するかについて、私は今でははるかによく理解しています。時には、物事が道を壊す可能性のあるすべてのエッジケースに気付いていないことがあります。そして、それはバグが噛むときです。

バグとエクスプロイト

これは私を驚かせ、少し怖がらせました。私の完璧な芸術作品にバグが含まれているとは信じられませんでした!

わかりました、少し誇張しています。しかし、私はそれを認識していなくてもうまくいかない可能性のあるものの膨大な数を過小評価していました。

これが私の頭のてっぺんから発生したいくつかのバグとエクスプロイトです:

  1. ボスと戦っている間にボスのレベルを変更し、その方法でより良い戦利品ドロップを得ることができます
  2. HPとマナのバーは時々オーバーフローします
  3. 戦闘が始まる前にボスを攻撃することができます。吸盤パンチについて話してください!
  4. マナがマイナスになる可能性があり、基本的な攻撃さえ実行できなくなります。これがマナを回復する主な方法です。
  5. 回復は一時的にあなたの最大の健康を増加させました。
  6. CSSの問題により、ほとんどの場合、1つのスペルは実際にはクリックできませんでした
  7. 戦闘中でないときに攻撃すると、呪文が無限のクールダウンになります

これらはすべて恐ろしいですね。MMORPGでは、これらのものは初日から悪用され、すべてを台無しにします!

幸いなことに、それらのほとんどは簡単に修正できました。通常、コードは1行未満です。

ただし、他のバグでは、システム全体を完全に作り直す必要がありました。呪文システムを使用すると、呪文ごとに3つの関数全体を作成する必要がなくなり、編集に数秒しかかからない小さなオブジェクトのみが必要になりました。

繰り返しになりますが、試してみたい場合は、これが私のゲームです(モバイルデバイス用に最適化されていないことに注意してください)。

そして、これがコードです(これもオープンソースであり、CodePenで編集可能です):

RobertSkalko / LOOT-RPG-v1.0

LOOT-RPG-v1.0-ボスを倒し、LOOTを手に入れよう!github.com

私は初心者(プログラミングを始めてわずか2か月)なので、いくつかのソリューションを改善できることを忘れないでください。うまくいけば、私はあなたが始めるために少なくともあなたに基本を与えました!

Javascriptゲームの作成を楽しんでください!