35キロバイトの核後キャラバン

プレーンなJavaScript、7つの都市、荒れ地、放射性ヤモリ、食用サボテン、近づいてくるキャラバン、盗賊の35キロバイトの縮小コード。 これは何ですか これはブラウザで実行される小さなゲームです。 その原理は簡単に繰り返すことができ、最も原始的なバージョンでは、出力デバイスと乱数ジェネレーターがあれば、おそらくどのデバイスでも再作成できます。 しかし、今日は、最新のブラウザにどのように実装したかを伝えたいと思います。



現在のバージョンでは、プレイヤーは核戦争後に都市間を移動するキャラバンを制御します。 ほくろのネズミは食料を盗み、放射性ヤモリはブラフミンを殺します。 泥棒はキャラバンを追跡し、お金の一部を盗むことができます。砂漠では、放射性の悪鬼、襲撃者、その他の盗賊が攻撃できます。



設定全体、世界、ロジックは自由に変更できます。ソースコードとグラフィックスはパブリックドメインとして、つまり、コピーと使用に制限なく配布されます。

ゲーム機能

レンジャーは、食用サボテンや戦前の缶詰を見つけるかもしれません。 砂漠では、他の旅行者の死体を見つけることができ、そこから少しのお金を集めることができます。 近づいてくるキャラバンから食べ物やバラモンを購入したり、人を雇ったりすることができます。 そして、あなたはカリスマでそれらを打った場合、近づいているトランプ、時には盗賊にさえ参加することができます。 冗談。 実際、ゲームにはまだカリスマ性はなく、ランダムな家によってエミュレートされています。



実際、このゲームはテキストゲームの進化の次の段階であり、世界地図上の動き、ランダムな出会い、JavaScriptにモジュールを追加する機能を追加しました。



機能は簡単に拡張でき、カリスマ性やその他の実際の役割要因は自分で追加できます。 プログラミングしたくない場合でも、メモ帳で一連のイベントを使用してファイルを開き、新しいイベントを追加したり、バランスを変更したり、世界と耳鼻咽喉科を完全に書き直したりすることができます。 または、異なる恒星系の間で宇宙船をさまよいながら（ただし、道路を横切る可食性サボテンを捨てる必要があります）。



このゲームの仕組みは非常にシンプルで、そのグラフィカル機能はダイアログ、インジケーター、世界地図上の動きです。 彼女の強みは、最も信じられないほどの冒険を言葉で表現できるテキストゲームの魔法にあります。

プログラムの主なアイデアとロジック

ゲームの基本的な考え方は非常に単純です-無限ループを開始し、その内部で4つの基本操作が実行されます。

1. 特定のポイントへの移動
2. 日のカウントダウン
3. 食物摂取
4. 荒れ地で私たちを待っているイベントの確率チェック

最後の操作は非常に嗅ぎやすい箱で、そこから、地獄、盗賊、悪鬼、死んだ旅行者との出会い、飛び出しで思いつく他のすべての冒険があります。



これはどうですか？ 非常にシンプル-各イベントはキャラバンまたは世界の数値パラメーターを変更し、ログに報告するだけです。 ここに魔法があります-パラメーターは同じでもかまいませんが、まったく異なる理由を報告できます。 食べ物の数単位を減らしますか？ これらは、ラットの攻撃、放射性降下物、または空腹のベビーカーです。 プラス数個の食物？ それで、あなたの人々は食用のサボテン、道端の遺跡で発掘された戦前の缶詰、または道に柔らかい靴底の素晴らしい革のブーツを見つけました。



私が実験を始めた最初のバージョンは、説明したアルゴリズムのわかりやすい図のように見えました。







このプロトタイプからオレゴンキャラバンゲームのリメイクとしてこのプロトタイプを作りました。

一次元のプロトタイプ-js13kGamesのキャラバン

私が見つけたチュートリアルのゲームは1次元でした。キャラバンは1つのポイントを離れて別のポイントに移動しました。 途中、ランダムなイベント、盗賊や商人との会合がありました。







このバージョンのプレーヤーは非常に限られていた。 基本的に、彼はイベントログを賞賛しなければなりませんでした。 インタラクションは、店や山賊が登場したときにのみ発生しました。 さらに、すべてのイベントの確率は等しく、1つの配列に格納されていました。



結果を見ると、ゲームを実際のサンドボックスに拡張できることに気付きました。 必要なことは、自由を追加し、コードをモジュール化し、イベントを異なるモジュールに配布することだけでした。 コードをほぼ完全に作り直す必要がありました。

キャラバンエンジンとアーキテクチャ

既に述べたように、このゲームはサードパーティのライブラリを使用せずに純粋なJavaScriptで作成されています（必要に応じて自分で追加できます）。 通常のHTMLとCSSを使用して、世界地図とインターフェイスを表示します。 それらを変更するには、基本的なDOM操作と従来のdocument.getElementById操作が使用されます。

WorldState-世界のモデル

ゲームの世界はWorldStateクラスです。 すべての重要なパラメータが保存され、ロジックは含まれていません。 プラグインのため、ロジックを後で結びます。

 function WorldState(stats) { this.day = 0; //  ,    this.crew = stats.crew; //   this.oxen = stats.oxen; //   this.food = stats.food; //   this.firepower = stats.firepower; //   this.cargo = stats.cargo; //    this.money = stats.money; // //  ,  ,    // { day: 1, message: " ", goodness: Goodness.positive} this.log = []; //  ,     this.caravan = { x: 0, y: 0}; this.from = {x: 0, y: 0}; this.to = {x: 0, y: 0}; this.distance = 0; //    this.gameover = false; // gameover this.stop = false; //    ,    this.uiLock = false; //     }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ゲーム-世界の創造とゲームサイクル

ゲームループは、Gameオブジェクトによって開始および制御されます。 同じオブジェクトが世界を作成します。 プラグインフィールドに注意してください-デフォルトでは空の配列です。 ゲームはプラグインについて何も知りませんが、2つのことを除いて-初期化（世界）初期化関数と更新更新関数が必要です。

 Game = { plugins: [], //  , }; Game.init = function () { //           //   StartWorldState   data this.world = new WorldState(StartWorldState); var i; for (i = 0; i < this.plugins.length; i++) { this.plugins[i].init(this.world); } }; //   Game.addPlugin = function (plugin) { this.plugins.push(plugin); }; //   Game.update = function () { if (this.world.gameover) return; //   var i; for (i = 0; i < this.plugins.length; i++) { this.plugins[i].update(); } }; Game.resume = function () { this.interval = setInterval(this.update.bind(this), GameConstants.STEP_IN_MS); }; Game.stop = function () { clearInterval(this.interval); }; Game.restart = function () { this.init(); this.resume(); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

新しいゲームを開始するには、Game.restart関数を呼び出す必要があります。 ただし、これが発生する前に、何らかのプラグインを追加する必要があります。追加しないと、ゲームサイクルをアイドル状態でプレイする必要があります。

食べる、生きる、移動する-CorePlugin

キャラバンの最も基本的なアクション-移動、時間のカウント、食べ物の摂取-は、CorePluginオブジェクトに実装されています。





ここではすべてが基本です。 まず、ゲームが開始されると、initが呼び出されます。これにより、世界のモデルへのリンクを保存できます。 次に、ゲームループでupdateを呼び出します。これは、シリーズ「シリコンバレー」のキャラクターが好んで言うように、世界をより良く変えるでしょう。 それは冗談です-世界はあらゆる方向に変化します。



基本的なプラグインは、ミリ秒単位で時間をカウントし、それらを日数に変換してから、距離と食糧備蓄を更新します。 原則として、プラグインオブジェクトにはinit（world）およびupdate（）関数を含めるだけで、何でもできます。 他のHTML5ゲームを呼び出すか、ダイアログボックスを作成することもできます。



プラグインを接続するには、Gameオブジェクトの定義とGame.restart（）の最初の呼び出しの間にそのコードを追加する必要があります。 現在index.htmlで行われている方法について：

 <script src="js/Game.js"></script> <!--  --> <script src="js/plugins/CorePlugin.js"></script> <!--   --> <script> Game.restart(); </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

キャラバンゲームの作り方

あなたが経験豊富なプログラマーなら、「イベントの配列からの動きとランダムな選択が存在するサイクル」というアイデアから始めて、どんな言語やグラフィックレベルでもこの​​ようなおもちゃを確実に実装できます。 特に最近の出版物には非常に興味深いグラフィカル機能があることが示されているため、bashのゲームでさえ完全に機能すると思います。



JavaScriptに精通している場合、基本的なレベルであっても、この言語で作成したゲームのソースをダウンロードして、自由に変更および改善できます。 電流が自分に合わない場合は、任意のアーキテクチャを使用できます。 しかし、最も簡単なオプションは、上記の原則に従って実装されたプラグインを単に追加することです。



既存のプラグインは、index.htmlからソースコードを削除するか、コードの最後にあるGame.addPlugin（SomePlugin）で行をコメントアウトすることで無効にできます。 彼らはお互いについて何も知らず、単に世界のモデルまたはゲームのインターフェースを変更します。



さて、ライターの最後のオプション-データディレクトリのファイルを開き、イベントと定数の説明を編集するだけです。 これらは同じJavaScriptソースですが、簡単に変更できます。 特にテキスト。 これを証明するために、現在のバージョンで他のプラグインがどのように配置されているかを簡単に説明します。

ランダムイベント

すべてのプリミティブランダムイベントは、次の形式の変数RandomEventsのdata / RandomEvents.jsファイルにあります。

 var RandomEvents = [ { goodness: Goodness.negative, stat: 'crew', value: -4, text: '   ! : -$1' }, { goodness: Goodness.negative, stat: 'food', value: -10, text: '     .  : -$1' }, { goodness: Goodness.positive, stat: 'money', value: 15, text: '    .    . : +$1' }, { goodness: Goodness.positive, stat: 'crew', value: 2, text: '   ,       . : +$1' },
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ランダムイベントオブジェクトは中括弧で囲まれています。 この例では、4つのオブジェクトのみを引用しましたが、一般的にはその数は何でもかまいません。 イベントの数が増えると、特定のイベントが落ちる可能性が低くなることに注意してください。



最初のフィールド-良さ-は、ログ内のメッセージのポジティブ、ネガティブ、およびニュートラルカラーを意味します。 2番目のフィールドstatには、変更する必要があるWorldStateパラメーターの名前が含まれています。 値は、このパラメーターを変更する平均値です。 最後のフィールド-何が起こったかを説明する任意のテキストを含む必要があります。 $ 1記号の代わりに、テキストはゲームに表示されるパラメーターの実際の変更に置き換えられます。



RandomEventPluginオブジェクトでランダムイベントの発生がチェックされ、ログのプレーヤーの外観が喜ばれます。







最後の注意：RandomEvents.jsには、ランダムイベントの発生の確率定数を持つ変数があります。 これは、キャラバンの1試合あたりの平均イベント数として定義されます。 さまざまな値を試してみたところ、どのような方法でも影響を受けないランダムなイベントが多すぎて、非常にイライラすることがわかりました。 対話性の欠如は、これらの単純なイベントの主な欠点です。 だからこそ、私は頭を掻き、他のプラグインから呼び出すことができるユニバーサルダイアログモジュールを作成することにしました。

ダイアログの作成または編集方法

DialogWindowオブジェクトは、ダイアログシステムを担当します。 ソースコードを見ると、HTMLコード内で必要なdiv要素を見つけ、一般的なマウスクリックハンドラーをバインドするミュータントが表示されます。 このオブジェクトに新しいダイアログを表示するように依頼すると、ダイアログの配列が渡されます。 また、特定の選択肢をクリックするためのハンドラーは、次の形式の特定のダイアログで説明されています。

 var DeathDialogs = { "start": { icon: "images/pic_death.jpg", //   url  title: "  ", //   desc: "", //    desc_action: function (world, rule) { //       var desc = "  : "+rule.text+".    "+Math.floor(world.distance) + "    "+Math.floor(world.money) + " "; desc += " ,    ?" return desc; }, choices:[ //   { text: '  ', //    action: function () { return "stop"; } // ,     } ] }, };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

死のダイアログには、「開始」フィールドと呼ばれるオプションが1つしかありません。 しかし、そのようなオプションは無限にあります。 たとえば、盗賊の対話では、12のフォークを実装しました。 それらの間の移行はどうですか？ show関数を呼び出すと、ユニバーサルDialogWindowオブジェクトは転送されたダイアログのリストを保存し、「開始」フィールドで定義されたダイアログを表示します。



次のダイアログを表示するとき、その選択肢配列は、選択番号が書き込まれる属性にボタンのセットとして表示されます。 また、選択肢からのすべてのアクション関数は、dialogActionsの内部配列に書き込まれます。 選択ボタンをクリックすると、ユニバーサルハンドラーはdialogActionsの関数の数を決定して呼び出し、このダイアログで使用することにした2つの引数を途中で渡します。 したがって、山賊との対話では、特定の選択肢のアクション関数は、世界の状態（世界）と現在の山賊の説明（山賊）を受け入れることができます。 そして、他のプラグインへのダイアログで-他のパラメーター。 はい、特に選択の意味がゲームウィザードのように単に対話を終了することである場合、それらなしでも可能です。







ダイアログを終了し、プレイヤーが世界地図に戻るには、choiceオブジェクトのアクション関数が予約済みのタグ「finish」、「exit」、「stop」のいずれかを返す必要があります。 一般に、この関数の意味は、次のフォークの名前を返すことです。 しかし、この大事な帰還の前に、ロジック、次の分岐を選択できる計算、「実行」、「戦い」、あるいは「愛」さえも挿入することができます。

プラグインからダイアログを呼び出す方法

動作中のプラグインの更新の任意の時点で、次のようにダイアログを呼び出すことができます。

  // ... -   update  - //  ,   world.stop = true; //        DeathDialogs //      world  rule DialogWindow.show(DeathDialogs, world, rule, this);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、onDialogClose関数はプラグインに実装する必要があります-このコールバックはダイアログを閉じた後に呼び出されます。 死の始まりを決定するプラグインの例：

 DeathCheck.onDialogClose = function () { Game.restart(); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

既存のプラグインの簡単な説明

ゲームの現在のバージョンでは、次のプラグインが使用されています。



Map2DPlugin-マップ上でキャラバンを移動します。 index.htmlでtopパラメーターとleftパラメーターを持つ通常のdivとして指定されている都市を検索します。 ここで、都市への到着が決定され、自動取引が行われます。



ShopPlugin-ランダムに接近するキャラバンまたは他の商人を生成します。 食料、ブラフミンを購入し、merc兵を雇うことができます。 または何も買わずに次に進みます。



BanditPlugin-山賊との会議と対話。 このプラグインの途中で、簡単なチュートリアルを作成するというアイデアに興奮しました。 シンプルでうまくいきませんでした、ごめんなさい。 盗賊はあなたに雇うことができます、そして彼らが死に飢えているならば、あなたがお金のために雇うことを拒否するならば、彼らは無料で彼らを受け入れるようあなたに頼みます。



DropPlugin-オーバーロードプラグイン。 オレゴンのキャラバンに関するチュートリアルのプロトタイプでは、ゲーム自体が自動的に物を落としました。まず武器、次に食べ物です。 それは非常に快適で不可解ではありませんでした-どのようにそうですか？ 結局、武器で食べ物を手に入れることができ、「揚げ肉で敵を殺すことはできません」（c）Fallout 4からの有名なストリームの1つです。だから私は、単に何を取り除くかを選択する対話をすることにしました。



DeathCheckはデスチェックプラグインです。 これはまだ非常にシンプルなプラグインであり、確かに質問があるかもしれません。 たとえば、なぜ食べ物が終わるとすぐに死ぬのですか？ さて、私はこの質問に自分で答えることを提案します-すべてがうまくいけば次のバージョンを待ちます。



WorldViewPluginはインターフェイスプラグインです。 インターフェイスを更新するだけで、世界の現在のパラメーターが表示されます。 おそらく、この考えは誰かにとって奇妙に思えます-更新サイクルの変数の変化を監視する独立したインターフェイスオブジェクト。 しかし、この奇妙なアイデアのおかげで、多数のupdateUiを取り除き、異なるロジックのブロック間の独立性を獲得しました。

現在のゲームとバランスに関するいくつかのヒント

現在、重要なパラメータは食物の量です。 他のキャラバンとの会議で補充することができます-発生した場合、最大限に購入する必要があります。 もちろん、都市で購入を追加するのが賢明でしょうが、これまでのところ、彼らは皆、食料の不足に苦しんでいると仮定します。



2番目の重要なパラメーターは、キャラバンの人数です。 彼らはそうあるべきです。 すべての人がノックアウトされた場合-ゲームは終了します。



バランスのすべての変化は、食物へのダメージと人数を増加させ、ゲームの複雑さを劇的に増加させます。

リンクと配布

pixabay.orgとopengameart.orgのCreative Common 0ライセンスでグラフィックスを使用したため、グラフィックスとコードの両方がこれらの条件下で配布されます-コピーと使用は無料で、義務はありません。



GitHubからソースコードを取得するか、こちらから zipアーカイブをダウンロードできます 。 より頻繁に更新されるため、最初のオプションが望ましいです。



テストには、ローカルコンピューター上でも、ブラウザーでindex.htmlを開くだけで十分です。サーバーを必要とする機能はそこで使用されません。



ライブビルドゲームはここでテストできます 。 レイアウトは、モバイル画面用ではなく、通常のモニター用に設計されています。