小説型アドベンチャーゲームを作ろう♪

◆目次
　１：簡単に作れるゲーム
　２：小説方アドベンチャーゲームって何？
　３：必要なもの
　４：ゲームの大まかな方針を決めよう
　５：ＨＴＭＬの基本を覚えよう　−その１−
　６：ＨＴＭＬの基本を覚えよう　−その２−
　７：ＨＴＭＬの基本を覚えよう　−その３−（まだできていません）

１：簡単に作れるゲーム
　自分のホームページは持ってるんだけど、これといった特長がない、何か目玉コーナーが欲しい。他の人のページにあるような「簡単に遊べるゲーム」を作って載せたい。皆さんは、そんなことを考えたことはありませんか？ブラウザで遊べるゲームの多くは、例えばＪａｖａＳｃｒｉｐｔなど、比較的高度な知識を必要とする言語で書かれているものが多く、あまり初心者向きとは言えません。それで、ゲームを作る人＝別世界の人、自分はゲームで遊ぶ人でいい、みたいに思ってしまう人も少なくないでしょう。でも、ＨＴＭＬをちょっとかじっただけの人でも何とかなってしまうゲームが存在するのです。この「小説型アドベンチャーゲームを作ろう♪」は、そういう「初心者さんでも簡単に作れるお手軽ゲーム」の作り方を解説しようと思います。

２：小説型アドベンチャーゲームって何？
　小説型アドベンチャーゲームといっても、いろいろな種類があります。中には複雑なものもありますが、ここでは一番簡単なタイプのものにしましょう。その昔、まだパソコンやテレビゲームが一般的でなかった頃、「ペーパーアドベンチャー」というゲームが流行しました。見たことがない人もいるかと思いますので、簡単な見本を作ってみました。

アドベンチャーゲームブック１　無人島探険記　　びっぐ出版（株）

遊び方：この本は、普通の小説とは異なり、ページ順にそのまま読んではいけません。指示された番号の文だけを読んでください。関係ない番号の文は読まないようにしてください。

１　夏休みを利用して手作りのいかだで航海に出ていた君達５人は、突然の嵐に遭い、見知らぬ無人島に漂着してしまった。幸い全員無事だったものの、いかだは流されてしまい、荷物も最低限の食料と水、コンパス、ナイフしか残らなかった。今のところ助けが来る見込みはない。君達５人は互いに助け合いながら、この島で生き残るしかない。
　→４

２　洞窟の中は薄暗く、ランプの明かりだけを頼りに君達は進んで行った。その時、頭の上でバサバサッという音がした。コウモリだ！さて、どうする？
　ナイフで戦う→５６　急いで逃げる→１３

３　島の北側は、なだらかな海岸線が続いている。海を右手に見ながらしばらく進むと、海岸に乗り上げた難破船らしいものを見つけた。
リーヤ「これはきっと海賊船だ。海賊のお宝があるに違いない。早速入ってみよう」
しいね「いや、むやみに難破船に入ったりするのは危険だ。とりあえずこのまま進んでみよう」
　ここはリーダーである君が決断しなければならないようだ。どちらの意見を支持しようか？
　難破船の中に入ってみる→７２　難破船に入らずこのまま進む→４１

４　この島でたった５人でどうやって生き残るか、話し合ってはみたものの具体的な結論は出なかった。しかし、とりあえず何から始めるかについて、いちおうの案は出た。
ポピィ「どんな生物がいるかも分からないんだ、まずは安全のためにも、火を確保しよう」
平八「いつまた天候が崩れるか分からない以上、先に雨風を凌げる場所を探すべきだ」
　どちらも正論と言えなくもない。さて、どうしようか？
　まず火を起こす→２６　適当な洞窟か岩蔭を探しに行く→４４

・・・

　こういうゲームです。１枚の紙に収まるような短編もあれば、文庫本１冊になっている長編もあり、他に何もいらないものもあれば、コインやサイコロ等を使うものもありますが、共通しているのは、「指示された番号の文だけを読み、関係ないところは読まない」という暗黙のルールです。読み手がいわば「コンピュータの役も兼任」している以上、そうしないと、ゲームとして成り立ちません。しかし実際にやってみると、これが意外と難しいことがわかります。読むつもりはなくても、隣の番号の文がちらっと目に入ってしまい、そこに書かれている内容が実はかなり後になって分かる重要な手がかりだったりすると、ゲームの面白さが半減してしまいます。上に書いた例でも、指示通り１→４と読んだ人は少ないでしょう。例えば先に２を読んでしまった場合、ゲームが始まった途端に、後の展開でランプが手に入ること、所持品のナイフは残さなければならないこと、などが分かってしまいます。そういう重大な欠点があり、それが避けて通れないゲームなのですが、それでも他にゲームが少なかった頃は、みんな夢中になって遊んだようです。この「小説型アドベンチャーゲームを作ろう♪」では、皆さんのホームページで、いわば「ペーパーアドベンチャーの現代版」を作っていただこうと思います。

３：必要なもの
　小説型アドベンチャーゲームを作るのに必要なものは、以下の４つだけです。

・パソコン
・ホームページ
・ある程度の表現力、国語力
・努力と根気

　パソコンは言うまでもないと思いますが、いちおう念のため。ホームページは、既に持っている人はそれを使ってください。新しく取得する必要はありません。持っていない人は、最初は無料ホームページを利用しましょう。文書のみなので、容量を気にする必要はほとんどないでしょう。トップページ（index.htmlなど）とは別に、新規のファイルを作り、出来上がったらトップからリンクするようにしましょう。ある程度の表現力は、文字通り「ある程度」でいいでしょう。努力と根気は、長編を作ろうと思ったら、それなりの覚悟が必要です。

４：ゲームの大まかな方針を決めよう
　小説型アドベンチャーゲームを作るにあたって、まず大まかな方針を決めましょう。構想を練らないでいきなり書き始めても別にいいのですが、その前にある程度の骨組みや、どういう具合に物語が進んでいくか、そういったことを決めておくと、より書きやすくなります。このあたりは、学校の作文と同じです。
　また、この段階でゲームの主なルールや方針を決めておきましょう。例えば、以下のようなことを、始めに考えると良いでしょう。

●ゲームをするのに、何か他の道具を使うか？
　・何も使わない
　・記録、メモ用に紙と鉛筆を使う
　・判定用にコインやサイコロを使う
　・その他
●分岐点での進み方はどうするか？
　・文章を読み、プレイヤーが好きな道を選ぶ
　・何らかの方法で判定を行い、その結果によって道が分かれる
　・プレイヤーにクイズを出題し、正解かどうかで道が分かれる
　・その他
●どのようなイベントをゲームに盛り込むか？
　・選択式クイズ
　・アイテムの入手、使用
　・お金の概念
　・敵との戦い
　・その他
●その他、特色として出したいことを自分の好みで
　
　道具については、何も使わないのが一番シンプルで分かりやすいのですが、ゲームとしてはやや平凡で面白みに欠けるものになります。複数のアイテムやお金、合い言葉や呪文の類を登場させるのであれば、メモ用紙（筆記具）は欠かせませんし、ゲームに戦闘や運の要素を盛り込むには、判定の道具は不可欠です。比較的簡単な判定であればコイン（確率２分の１の判定に最適、２枚以上使えばより高度な判定も可能）を、複雑な判定が必要であればサイコロ（６通りの判定が可能、複数の使用でさらに幅が広がる）が良いでしょう。さらに複雑なシステムを導入しようと思ったら、６面以外のダイスやトランプ等を使うこともできますが、それらの道具がプレイヤーの手元にない危険性もあります。
　分岐は、このゲームの最大の要素です。分岐があるからこそゲームとして成り立つのであり、それがなければただの小説です。文章を読んで好きな道を選ぶ方法がメインになると思いますが、そればかりだとゲームとしての面白みが薄くなり、また物語を作ることも難しくなります。何らかの判定を行う方法は、例えば何かのアイテムを持っているか、誰かに会ったことがあるか、などをプレイヤーに問う方法、コインが表か裏か、あるいはサイコロの目がある数値以上かどうかなどで結果を変える方法などがあります。運の要素を取り入れるとゲームの幅が広がりますが、あまりそればかりに頼りすぎると、単なる確率ゲームになってしまう恐れもあります。
　クイズは、単純にプレイヤーの知識のみを問うものと、ゲーム内でヒントを出しておくもの（例えば前の場面で合い言葉を出しておき、正しい合い言葉を選択させる）などがありますが、どのような問題を出すかは作者の考え方次第です。言葉（文字）を入力させる方法もあるにはありますが、正否の判定が難しく（同じ意味の答でも、漢字とひらがなの違い等、全て判定するのは難しい）あまり複雑な解答を要求すると単なる言葉探しになってしまう危険性もあるため、３つか４つの選択肢から選ぶ方法がおすすめです。
　アイテムは、出しても出さなくても良いのですが、出す場合はそれがアイテムであることを明確に示し、プレイヤーにメモ等で記録させる必要があります。また、そのアイテムがいつでも使えるのか、特定の場面でしか使えないのか、使うとなくなるのか、売却できるのか、なども考えておきましょう。お金はアイテムの一種とも考えられますが、あまり細かい金額を設定する必要はないでしょう。円、ドルなどの通常目にするようなお金を用いるなら、１００円単位か１０００円単位ぐらいで十分でしょう。他に、ゲームらしくするために独自に設定した単位を用いる方法や、銀貨１枚、金塊１個等を単位とする方法もあります。
　敵との戦いは、これをゲームのメインにすることもできますし、必要なければなくても構いません。単純な戦闘なら、あるアイテムを持っていれば勝ち、コインが表なら勝ち、などで構いませんし、より複雑なものにしたければ、サイコロの目が一定以上なら勝ち、何らかの条件（武器の所有等）を満たしていればサイコロの目にプラス修正、などのルールを決めると良いでしょう。さらに本格的な戦闘にするには、体力等のパラメータを用意する、使う武器によって修正値を変える、敵ごとに弱点や耐性等を設定する、魔法を使えるようにする、などの方法もあります。

　ここで、具体的な例として、本家びっぐちゃんのいろいろおしゃべりページに載っている「びっぐちゃんの冒険♪」の基本的なシステムを紹介します。

●タイトル　「びっぐちゃんの冒険♪」
●大まかなストーリー　魔女の「びっぐちゃん」が伝説のクッキーを求めて冒険に出る。場面は家の近く→森→街→北の山への道→魔王の城
●使う道具　筆記具、コイン
●分岐の方法　１：プレイヤーが好きな道を選ぶ　２：コインの表裏　３：アイテム　４：クイズ、戦い
●クイズの内容、形式　４択形式、プレイヤーの知識を問う、問題によってはあらかじめヒントを出す
●アイテム　最初に３つを選択させ、途中の場面で入手または喪失する
●お金　単位は円、１０００円を最小単位とする
●戦闘　１：クイズに正解すれば勝ち　２：コインを複数回投げ、表の数が一定以上なら勝ち（所持アイテムによるプラス修正あり）

　いきなりこれだけのことを決めるのは大変かと思いますので、まずは大まかな方針だけを決めて、あとの細かい部分は作りながら考えていくと良いでしょう。

５：ＨＴＭＬの基本を覚えよう　−その１−
　既にホームページを持っている皆さんには、分かりきったことかもしれませんが、これからホームページを作ろうとする人もいるかもしれませんので、ＨＴＭＬの基本を簡単に説明します。ホームページは、ＨＴＭＬというものを使って「記述」します。それには「タグ」と呼ばれるものを使います。まずはＨＴＭＬの骨組みだけを、簡単なサンプルで説明します。

<html>…ＨＴＭＬの始まりを表します。 <head>…ヘッド部分の始まりです。 <title>サンプル１</title>…タグで囲まれた「サンプル１」という文字を、タイトルにします。 　ヘッド部分には、主にタイトルや制作者の情報などを記述します。ＪａｖａＳｃｒｉｐｔなどの言語を使用する場合も、この中に記述します。必要なければヘッド部分全体を省略しても構いません。<br>…この内容は、画面にそのまま表示されます。<br>は改行を表します。 </head>…ヘッド部分の終わりです。 <body>…ボディ部分の始まりです。 　ボディ部分は、画面に表示されるメインの部分です。普通は、ホームページの内容の全てをこの部分に記述します。<br>…この内容も、画面にそのまま表示されます。 </body>…ボディ部分の終わりです。 </html>…ＨＴＭＬの終わりを表します。

　このようなＨＴＭＬを記述してホームページとしてアップし、それをブラウザで見ると、以下のようになります。

ヘッド部分には、主にタイトルや制作者の情報などを記述します。ＪａｖａＳｃｒｉｐｔなどの言語を使用する場合も、この中に記述します。必要なければヘッド部分全体を省略しても構いません。 　ボディ部分は、画面に表示されるメインの部分です。普通は、ホームページの内容の全てをこの部分に記述します。

　なお、タイトルは、画面上端の青く細長い部分に表示されます。また、先ほどの例では、白い画面に黒い文字でしたが、他にもいろいろな飾り付けができます。

<html> <head> <title>サンプル２</title> </head> <body bgcolor="ffff00">…bgcolorを指定すると、背景色を変えることができます。 　背景色を自由に変えることができます。<br> 　背景色は、２桁の１６進数を３つ並べて表記します。最初の２桁は赤の色の強さ、次の２桁は緑の色の強さ、最後の２桁は青の色の強さを表します。<br> 　この例では、赤と緑が２５５（最大）、青が０（最小）で、背景色は黄色になります。<br> 　他に、「bgcolor=yellow」のように、色の名前（英語）をそのまま指定する方法もあります。<br> </body> </html>

　ブラウザで見ると、以下のようになります。

背景色を自由に変えることができます。 　背景色は、２桁の１６進数を３つ並べて表記します。最初の２桁は赤の色の強さ、次の２桁は緑の色の強さ、最後の２桁は青の色の強さを表します。 　この例では、赤と緑が２５５（最大）、青が０（最小）で、背景色は黄色になります。 　他に、「bgcolor=yellow」のように、色の名前（英語）をそのまま指定する方法もあります。

６：ＨＴＭＬの基本を覚えよう　−その２−
　ＨＴＭＬでは、背景色だけでなく、文字そのものにも色をつけることができます。簡単な例を見てみましょう。

<html> <head> <title>サンプル３</title> </head> <body> 　文字色も自由に変えることができます。<br> 　背景色と同じように、６桁の１６進数、または色の英語名で指定します。文字色も自由に変えることができます。指定しなかった場合は、自動的に「黒」になります。<br> <font color="ff0000">これは赤です</font><br>…対象となる文字をタグで囲みます。 <font color="00ff00">これは緑です</font><br>…fontとcolorの間は、半角スペースです。 <font color="0000ff">これは青です</font><br>…６桁の１６進数で色を指定します。 <font color=red>これも赤です</font><br>…英語名の表記もできます。 <font color=green>これも緑です</font><br> <font color=blue>これも青です</font><br> これは指定がないので、黒です。<br> </body> </html>

　ブラウザで見ると、このように見えます。１６進数表記と英語表記で、色が若干異なる場合もあります。

文字色も自由に変えることができます。 　背景色と同じように、６桁の１６進数、または色の英語名で指定します。文字色も自由に変えることができます。指定しなかった場合は、自動的に「黒」になります。 これは赤です これは緑です これは青です これも赤です これも緑です これも青です これは指定がないので、黒です。

　文字の大きさ（サイズ）を変えることもできます。大きさは１〜７までの整数で指定します。数字が大きくなると、文字の大きさも大きくなります。

<html> <head> <title>サンプル４</title> </head> <body> 　文字の大きさも自由に変えることができます。指定しなかった時は、「３」になります。<br> <font size=1>これはサイズ１です</font><br>…対象となる文字をタグで囲みます。 <font size=2>これはサイズ２です</font><br> <font size=3>これはサイズ３です</font><br> <font size=4>これはサイズ４です</font><br> <font size=5>これはサイズ５です</font><br> <font size=6>これはサイズ６です</font><br> <font size=7>これはサイズ７です</font><br> これは指定がないので、サイズ３です。<br> <font size=3>これはサイズ指定した、サイズ３です（比較対照用）</font><br> </body> </html>

　ブラウザで見ると、このように見えます。

文字の大きさも自由に変えることができます。指定しなかった時は「３」になります。 これはサイズ１です これはサイズ２です これはサイズ３です これはサイズ４です これはサイズ５です これはサイズ６です これはサイズ７です これは指定がないので、サイズ３です。 これはサイズ指定した、サイズ３です（比較対照用）

　<font>タグでは、色とサイズを同時に指定することもできます。もちろん、別々に指定しても構いません。

<html> <head> <title>サンプル５</title> </head> <body> 　ひとつのタグで、色とサイズの両方を指定することができます。<br> <font size=5 color=red>これはサイズ５の赤い文字です</font><br>…対象となる文字をタグで囲みます。 　別々に指定することもできます。結果は、上の例と同じです。 <font size=5><font color=red>これはサイズ５の赤い文字です</font></font><br>…タグが２つあるので、２つ閉じます。 　別々に指定する場合は、このような使い方もできます。 <font size=5><font color=green>これは、サイズ５の緑の文字です。</font><br>…ここでタグをひとつだけ閉じます。 <font color=blue>これはサイズ５の、青い文字です。</font><br>…サイズ指定はまだ有効なので、色だけを指定します。 これはサイズ５の、色指定のない文字（黒）です。</font><br>…サイズ指定のタグを閉じます。 これはサイズも色も指定のない文字です。<br> </body> </html>

　ブラウザで見ると、このように見えます。

ひとつのタグで、色とサイズの両方を指定することができます。 これはサイズ５の赤い文字です 　別々に指定することもできます。結果は、上の例と同じです。<br> これはサイズ５の赤い文字です。 　別々に指定する場合は、このような使い方もできます。 これは、サイズ５の緑の文字です。 これはサイズ５の、青い文字です。 これはサイズ５の、色指定のない文字（黒）です。 これはサイズも色も指定のない文字です。

（…続く）