【JavaScript】テキストアドベンチャーゲームのシステムを作りかけてみました
どうも！LSSです！！
先日、このブログに
という記事を書きました。
で、考えていたんですが、
「容易にシステムとなるスクリプトをコピペできて、誰でもカンタンに項目を増やせるようなWebゲームブックシステムを公開したら…誰かゲームブック作ってくれないかな？」
とｗ
で、とりあえず、作ってみました！
サンプル
コード
<style><!--
#gamen{border:2px solid #aaccff;}
.sntk{text-decoration:underline #ffaaff;}
--></style>
<div id="gamen"> </div>
<script>// <![CDATA[
hstr=[0];
st=[];
st[0]={
text:'あなたは今、門の前にいます。',
sentaku:[
{goto:1,sttext:'門を叩く'}
,
{goto:2,sttext:'門を押し開ける'}
]};
st[1]={
text:'叩いてみましたが、何の反応もない…。',
sentaku:[
{goto:1,sttext:'さらに門を叩く'}
,
{goto:0,sttext:'もう一度考えてみる'}
]};
st[2]={
text:'強引に押し開けようとした！しかし開かなかった…。',
sentaku:[
{goto:1,sttext:'門を叩く'}
,
{goto:0,sttext:'もう一度考えてみる'}
]};
gamen.addEventListener('click',clk,false);
gw();
function clk(e){
a=e.srcElement.id;
if(a.match(/s[0-9]+/)){hstr.push(st[hstr[hstr.length-1]].sentaku[parseInt(a.substr(1))].goto);gw();}
}
function gw(){
txt='';
for(i=0;i<hstr.length;i++){
txt+=st[hstr[i]].text+'<br/>';
}
for(i=0;i<st[hstr[hstr.length-1]].sentaku.length;i++){
txt+='<span id="s'+i+'" class="sntk">'+st[hstr[hstr.length-1]].sentaku[i].sttext+'</span><br/>';
}
gamen.innerHTML=txt;
}
// ]]></script>
サンプルはあくまでサンプル
３つの項目の中で堂々巡りするだけのお話となっていますｗ
st[項目番号]={
text:'表示される文章',
sentaku:[
{goto:選択肢を選んだ場合の行先項目番号,sttext:'選択肢文章'}
,
{goto:選択肢を選んだ場合の行先項目番号,sttext:'選択肢文章'}
]};
という形式で項目をいくつでも作成できます。（項目番号はカブらないようにする必要があります。）
選択肢は
{goto:選択肢を選んだ場合の行先項目番号,sttext:'選択肢文章'}
の部分で、サンプルでは２つづつ用意していますが、カンマで区切る事で３つでも４つでも用意できます。（１つでもOK）
例えば４つ選択肢を用意するなら、
st[項目番号]={
text:'表示される文章',
sentaku:[
{goto:選択肢を選んだ場合の行先項目番号,sttext:'選択肢文章'}
,
{goto:選択肢を選んだ場合の行先項目番号,sttext:'選択肢文章'}
,
{goto:選択肢を選んだ場合の行先項目番号,sttext:'選択肢文章'}
,
{goto:選択肢を選んだ場合の行先項目番号,sttext:'選択肢文章'}
]};
のように書く事になります。
また「表示される文章」の中にHTMLタグを使う事もでき、例えば
text:'あいうえお<br/>かきくけこ',
のように書くと、
あいうえお
かきくけこ
と表示されます。
と、作ってはみたものの…
データ形式が分かり辛いかもですね^^;;;
このままゲームブックにする事は可能ではありますが、もっと簡単にする必要がある…かな？？
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
