テンプレートを使った
フォーム入力型リドルゲームの作り方

はじめに

このページでは、RccScript (リドルゲーム用JavaScript)とHTML&CSSのテンプレートを使って、
「問題を表示させて、答えを入力すると次のページに行ける」という非常にシンプルなリドルゲームの作り方を解説します。
JavaScriptを使うと言ってもあらかじめ用意してあるものを組み込むだけなので、プログラムを書く必要はありません。
このテンプレートを元に作ったリドルゲームはJavaScriptが必須になります。

ここではリドルとして遊べるwebページの作り方だけを解説してますので、
問題を作る上での注意点等は鳳ナオさんの『初歩的なリドルの作り方』も参照して下さい。
JavaScriptを使わない、HTMLだけの単純なリドルの作り方についても説明があります。

HTMLやCSSの説明は最小限…というかほとんどしてませんので、
もっと凝ったページが作りたい場合は他のサイトを参照して下さい。

このページに関する間違いや不具合や質問などはBBSの方にお願いします。

必要なもの

あった方が良いもの

それでは、さっそく作っていきましょう。
ここではサンプルである『動物リドル』を例に作り方を解説していきます。

準備

まず最初に下のテンプレートをダウンロードして下さい。

riddle_template.zip (RccScript version 0.4 同梱)

解凍すると'myRiddle'というフォルダがあると思いますので、好きな名前に変更して下さい。
英数字のみを使った方が良いと思います (自分で分かるなら1とか2だけでもok)。
ここではとりあえずmyRiddleのままにしておきます。

myRiddleフォルダの中を見ると

の6つが入っていると思いますので、
まずはrccscript.jsをテキストエディタで開きます。

開いたら最初の方にある
titleString: 'Title ',
と書かれた行を探して'Title 'の部分をこれから作るリドルゲームの名前に変えて下さい。
(ここに書いた文字列+ページ番号がタイトルバーに表示されます)
ここでは'動物リドル Q'にしておきます。
titleString: '動物リドル Q',
「Q」が付けてあるのはタイトルバーに「動物リドル Q1」のように表示させたいからです。
変更出来たら保存して閉じます。

次に00_template.htmlをテキストエディタで開き、
<h1>Page <span id="rcc_pageNo"></span></h1>
と書いてある行を探して下さい (上から20行目ぐらいです)。
これは問題ページで問題番号を表示する部分です (このままの状態だとPage 1のように表示されます)。
'Page'の部分を表示させたい文字に変更して下さい。
ここでは Q1 のような表示にしたいので、下のように変更します。
<h1>Q<span id="rcc_pageNo"></span></h1>
変更できたら保存して閉じます。

次は問題ページを作っていきます。

問題ページ作成

問題に画像を使いたい場合は

まずは画像ファイルを用意します (ここではwho.pngという画像を使ってみます)。
用意した画像を問題ページのhtmlファイルと同じフォルダに入れて、
画像を表示させたい位置に<img src="who.png">と書けば画像が表示されます。
これだけでも問題なく表示されるはずですが、
出来れば横のサイズ(width)と縦のサイズ(height)と
画像が表示されなかった時のためにalt属性を指定しておいた方が良いです。
<img src="who.png" width="82" height="76" alt="who">
さらにtitle属性を指定すると
<img src="who.png" width="82" height="76" alt="who" title="Who is she?">
マウスポインタを画像に合わせた時に文字がポップアップします。
who

隠し文字 (反転すると見られる) を使いたい場合は

隠したい文字を<span class="apatetic"></span>で囲みます。
<span class="apatetic">隠したい文字</span>
反転させてみてください→隠したい文字
これはスタイルシートを使って文字の色を変えているだけです。
スタイルシートに関してはこのページの最後の方でちょっとだけ説明してます。

まずは00_template.htmlをコピーして、01_start.htmlという名前にします。

01_start.htmlを開いて、
<!-- ここに問題文を書きます -->
と書かれた行を探して、 (その行を消してから) 文字通りそこに問題文を書いていきます。

<p class="riddle">
「ねずみ」と「とら」の間にいる動物は?<br>
ひらがなで答えてね。
</p>

HTMLでは<body>と</body>に囲まれた部分がブラウザの画面に表示されます。
<p>と</p>で囲まれた部分は段落です。
class="riddle"というのは後でスタイルを指定するために付けてます。
とりあえず、問題は<p class="riddle">と</p>の間に書くとだけ覚えておいて下さい。
<br>は改行です。これは必ず半角で打って下さい。
HTMLではソース上で改行してあってもブラウザ上では一行で表示されるので、
改行したい場所に<br>を書きます (<p>と</p>の前後は勝手に改行されます)。

一応これで最初のページは完成ですので、保存して閉じて下さい。

では、2ページ目も作ってみましょう。
2ページ目のファイル名は「02_前の問題の答え.html」になります。
ただし「前の問題の答え」はフォームに入力することで、
ひらがなとカタカナはヘボン式ローマ字に、漢字はUTF-8の英数字にエンコードされますので、
どのようなファイル名になるかは↓にあるフォームで実際に確認してみて下さい。
漢字を使った長い答えはファイル名がかなり長くなってしまいます(^^;

ここにファイル名が表示されます。

例えば、最初のページの答えが「うし」だった場合、上のフォームに入力してみると
xx_ushi.htmlと表示されますので、2ページ目は「02_ushi.html」にすれば良いわけです。
最初のページと同じように00_templateをコピーして、02_ushi.htmlファイルを作ります。
02_ushi.htmlを作ったら、01_start.htmlをブラウザで開いてみて下さい。
答えを入力して次のページへ進めたら成功です。

このようにして次々と問題ページを作って行きます。

ゴールページ作成

順番に問題ページを作ったら最後にゴールページを作ります。
例えば問題が全部で10問の場合はゴールページのファイル名は「11_10問目の答え.html」のはずです。
ここでは10問目の答えが「ムササビ」だったとします (ゴールのファイル名は11_musasabi.htmlになります)。

まずは00_goal.htmlを11_musasabi.htmlにリネームします (コピーの必要はありません)。
11_musasabi.htmlを開いて
<title>おめでとうございます!</title>
という行を探して、この「おめでとうございます!」を好きな言葉に変更します。
これはタイトルバーに表示されます。

次に
<h1>クリアです!</h1>
の「クリアです!」も好きな言葉に変更して下さい。
これはページの一番上に表示されます。

後は
<!-- ここにメッセージを書きます -->
の場所にその行を消してからメッセージを書きます。

下の方にある

<div id="rcc_banner">
 <a href="http://rccmembers.web.fc2.com/public/rccscript/index.html" target="_blank">
  <img src="rs-banner_l.png" alt="powerd by RccScript" width="135" height="40">
 </a>
</div>

この部分はRccScriptのバナー表示とページへのリンクです。
消してしまっても全然問題ありません(^^

変更が完了したら保存してファイルを閉じます。

入り口ページ作成

最後に入り口ページを作ります。

entrance.htmlをテキストエディタで開いて
<title>My Riddle Game</title>
<h1>My Riddle Game</h1>
の「My Riddle Game」の部分にご自分のリドルゲームの名前を入れて下さい。

後は
<-- ここにリドルの説明とか注意とか -->
の部分に (その行を消してから) ご挨拶なり説明なり注意を書いて行きます。
長くなる場合は段落に分けた方が見やすいです。
段落に分けるには<p></p>を使います (class="riddle"は必要ありません)。

<p>
 最初の段落をここに書いていく。
</p>
<p>
 次の段落はここに書く。
</p>

編集が終わったら保存してファイルを閉じて下さい。

これで一応すべてのページを作り終わりました。
entrance.htmlをブラウザで開いて遊んでみて下さい。
きちんと出来ていればゴールまで行けるはずです。

でも、真っ白の背景に黒文字では寂しいので、次はスタイル (見た目) を変更します。

スタイルの変更

ページのスタイル (見た目) を変更するにはCSS (Cascading Style Sheets) ファイルを編集します。
入り口ページから問題ページ、ゴールページ、すべてのページで共通のCSSファイルを読み込んでいるので
ひとつのファイルをいじるだけですべてのページのスタイルが変更できます。
ここでは簡単に背景色と文字色と文字の大きさの変更だけを説明します。
詳しいことは「スタイルシート」で検索して調べてみて下さい(^^;

それではstyle.cssをテキストエディタで開いて下さい。
body{ と } に囲まれたところがあるはずです、

body {
  background-color: #ffffff;
  color: #000000;
}

ここでHTMLファイルの<body></body>に囲まれた部分のスタイルを指定しています。
つまり表示されるページ全体のスタイルです。
background-colorで背景色、colorで文字色を指定します。
最初は#ffffff (白) と#000000 (黒) になっています。
例えば、このページと同じにするには#ddddccと#000000を指定します。
色と数字との対応は「カラーコード」で検索すると簡単に調べられます。

body {
  background-color: #ddddcc;
  color: #000000;
}

bodyの背景色を変更した場合は.apateticの文字色を同じ色に変更して下さい。重要!
これは隠し文字を使うために必要です。

.apatetic {
  color: #ddddcc;
}

apateticの前にある. (ドット) を誤って消してしまわないように注意して下さい。
. (ドット) が付いているものはclass属性に対するスタイル指定です。
この場合はclass="apatetic"が指定されたすべての要素に効力が及びます (意味不明なら気にしなくてもokです)。
それと、同じにするのはbodyの背景色と.apateticの文字色なので間違えないようにして下さい。

次に問題番号の部分 (ページの一番上) の文字色を変えてみましょう。
h1{ と } で囲まれているのがその部分です。

h1 {
  color: #993333;
}

最後に問題部分も変更してみます。
問題部分は.riddleで指定されているところです。
今度は文字の大きさを変えてみます。

.riddle {
  font-size: 120%;
}

フォントサイズは色々な指定の仕方がありますが%で指定するのが無難なようです。
この場合は元のフォントサイズと比べて120%の大きさになります。

最後に

これで一応「リドルゲーム」は完成です!
ファイルのアップロードの仕方等は他のサイトを参照して下さい。
それと公開前にはテストプレイもお忘れなく!

このページの解説を元に作ったサンプルゲームはこちらから遊べます。
解説しなかったこと (フレームとかヒントとか) も使っているのでソースを見て参考にして下さい。
ソースの下の方にあるJavaScriptはfc2で自動挿入されるものなので気にしないで下さい。

RccScriptの詳しい説明はRccScriptのページをご覧下さい。
ここでは使っていない機能や設定があります。

inserted by FC2 system