JavaScript Maniax

■RPGの戦闘シーンをつくる その3

攻撃コマンド入力。
前回の改良により稀に勝利することが出来るようになった勇者氏ですが、やはり完全オートバトルは鬱憤がたまります。
敵の攻撃はオート、自分の攻撃はコマンド選択式にしてゆくことで、例えば体力が少なかったら回復魔法をつかわせる等の計略的な戦闘を繰り広げることが出来ます。
前回の講義で、攻撃選択部分と実際の攻撃部分の関数をわけましたので、今度は攻撃選択部分を、自分の攻撃の場合と敵の攻撃の場合に分けます。
//--sample--
//window.setTimeout("main()",2000)  //変更前
//↓変更
if(af==0){                          //変更後
    window.setTimeout("mAttack()",2000)
}else{
    window.setTimeout("eAttack()",2000)
}
//--sample--
これまでmainとしていた敵味方共有の攻撃選択関数を、味方攻撃用のmAttackと敵攻撃用のeAttackという2つの関数に分けました。
敵攻撃の関数はこれまでどおりオートなので特に変更はありません。mainに記載していた内容を写します。
問題は味方攻撃の場合です。
ひとまず単純に、自分の攻撃番のときはキーが押されるまで関数を再帰して、キーが押されたらどの攻撃を行うか判断させてみようと思います。
//--sample--
function mAttack(){
    var m,kbn,ch;
    ch=0;
    kbn=0;

    //攻撃内容選択
    if(kCode[90]&&!kCode[88]&&!kCode[67]){m=mych.name+"の攻撃 ⇒ ";kbn=0;ch=1}
    if(!kCode[90]&&kCode[88]&&!kCode[67]){m=mych.name+"は攻撃呪文を唱えた ⇒ ";kbn=1;ch=1}
    if(!kCode[90]&&!kCode[88]&&kCode[67]){m=mych.name+"は回復呪文を唱えた ⇒ ";kbn=2;ch=1}

    if(ch){
        m="<BR>"+m;
        setMess(m);
        window.setTimeout("sub(" + kbn + ")",1000)
    }else{
        window.setTimeout("mAttack()",5)
    }
}
//--sample--
これで、キーが押されるまで関数mAttackが呼ばれ続け、キーが押されたらそれに従い関数subが呼ばれます。
上記例だと、[z]キーが攻撃、[x]キーが攻撃呪文、[c]キーが回復呪文となります。
折角ですので、この情報も画面上に出しましょう。

ただし、関数に
//--sample--
m="キーを押してください>>[z]攻撃/[x]攻撃呪文/[c]回復呪文";
if(document.all.t.innerHTML!="")m="<BR><BR>"+m;
setMess(m);
//--sample--
だけ追記するとどうなるか、想像してみてください。
再帰するたびにこの箇所を通りますので、画面上の文字はすぐこの文言のみになってしまいます。
再帰の場合と、他関数からよばれた初回の場合で処理を切り分ける必要があります。
//--sample--
function mAttack(no){
    〜〜中略〜〜
    if(no==0){
        m="キーを押してください>>[z]攻撃/[x]攻撃呪文/[c]回復呪文";
        if(document.all.t.innerHTML!="")m="<BR><BR>"+m;
        setMess(m);
    }
    〜〜中略〜〜
    if(ch){
        m="<BR>"+m;
        setMess(m);
        window.setTimeout("sub(" + kbn + ")",1000)
    }else{
        window.setTimeout("mAttack(1)",5)
    }
}
//--sample--
関数に引数が増えました。この関数を他から呼ぶ場合は引数に0を、再帰する場合のみ引数に1を渡すことで、初回のみメッセージ表示することができました。

[
sample-a] [DL]



応用編

思うように戦闘が出来るようにはなりましたが、キー入力方式がこのままではちょっとしょぼさが目立ちます。
折角ですから既成RPGのようにコマンドを選択する方式を作ってみましょう。
といっても新しいプログラム技術はとくにありません。
自分の攻撃選択関数にてカーソルキーの入力を受け、ローカル変数としてどの項目が選択されているかを保持してカーソルを移動させてやればよいのです。
//--sample--
function mAttack(no, sl){
    var m,kbn,ch,ar,p;
    ch=0;
    kbn=0;

    ar=new Array(3);ar[0]="攻撃";ar[1]="攻撃呪文";ar[2]="回復呪文";

    document.all.spnCom.innerHTML="=コマンド=<BR><BR>";
    for(var i=0;i<ar.length;i++){
        if(i==sl){
            ar[i]=">"+ar[i];
        }else{
            ar[i]=" "+ar[i];
        }
        ar[i]+="<BR>";
        document.all.spnCom.innerHTML+=ar[i];
    }

    if(kCode[38]>kCode[40]){
        sl--;
    }else if(kCode[38]<kCode[40]){
        sl++;
    }
    if(sl<0)sl=0;
    if(sl>=ar.length)sl=ar.length-1;

    document.all.tblCom.style.display="";

    //攻撃内容選択
    if(kCode[13]){
        switch(sl){
        case 0:m=mych.name+"の攻撃 ⇒ ";kbn=0;ch=1;break;
        case 1:m=mych.name+"は攻撃呪文を唱えた ⇒ ";kbn=1;ch=1;break;
        case 2:m=mych.name+"は回復呪文を唱えた ⇒ ";kbn=2;ch=1;break;}
    }

    if(ch){
        setMess(m);
        document.all.tblCom.style.display="none";
        window.setTimeout("sub(" + kbn + ")",1000)
    }else{
        window.setTimeout("mAttack(1, "+sl+")",20)
    }
}
//--sample--
戦闘メッセージとは別欄にコマンド選択欄を設けました。
枠線が欲しいので、tblComというテーブルタグの中にspnComというスパムタグを設定してあります。
<TABLE id="tblCom" cellspacing="1" style="width:150px; background-color:black; display:none">
<TR style="height:110px" valign=top>
<TD bgcolor="white"><SPAN id="spnCom" style="font-size:12px"></SPAN></TD>
</TR>
</TABLE>
またこのテーブルタグ自体、自分の攻撃の番以外は表示もさせないようにコマンド選択欄を表示したり隠したりしています。
「style.display」プロパティに空文字を入力すれば表示、「none」という文字列を入力させれば非表示になります。
ただしこれではキーを押した瞬間に再帰した回数だけ複数行すすんでしまいます。
押しっぱなしで連射されないよう、キーを一度はなしてからでないと動かないように改造します。
//--sample--
if(kCode[38]>kCode[40]){
    if(ky==0)sl--;
    ky=1;
}else if(kCode[38]<kCode[40]){
    if(ky==0)sl++;
    ky=1;
}else{
    ky=0;
}
//--sample--
このkyを引数に追加してやればよいのです。
function mAttack(no, sl, ky){

window.setTimeout("mAttack(1, "+sl+", "+ky+")",20)

さらに敵味方キャラクタを選択できるようにし、表示方法も変えてみたのが下記サンプルです。
コメントを多くつけてありますのでソースを参照してみてください。

ひとまず今回で、JavaScriptをつかったRPGの戦闘シーンの作成方法は終わりとさせて頂きたいと思います。


[sample-b] [DL]
[top] [index]
トップメニュー 基礎編 実践編 外部リンク