これから、戦闘することを目標にして、プログラムを実装していく。まずは生命点の表示と更新を。 このように、理論的にあり得る味方最大数と敵最大数を表示できるようにしておいて、実際にから必要ない部分を表示しないという方針で考える。「魔獣王国の秘剣」では、味方最大数はピップと召還悪魔フレッドが味方になった場合の2人。敵最大数は25人の百姓と召還悪魔フレッドが敵になった場合の25+1人。愚直にhtmlでべた書きすればいい。
ピップ 生命点：48 /最大生命点： 48 (原点：48) ■■■■●||| フレッド 生命点：66 /最大生命点： 66 ■■■■■■●| 経験点：0 (経験点 20 = 1 永久生命点)
敵1の名前生命点：0 /最大生命点： 0 | 敵2の名前生命点：0 /最大生命点： 0 || 敵3の名前生命点：0 /最大生命点： 0 ||| 敵4の名前生命点：0 /最大生命点： 0 |||| 敵5の名前生命点：0 /最大生命点： 0 ● 敵6の名前生命点：0 /最大生命点： 0 ●| 敵7の名前生命点：0 /最大生命点： 0 ●|| 敵8の名前生命点：0 /最大生命点： 0 ●||| 敵9の名前生命点：0 /最大生命点： 0 ●|||| 敵10の名前生命点：0 /最大生命点： 0 ■ 敵11の名前生命点：0 /最大生命点： 0 ■| 敵12の名前生命点：0 /最大生命点： 0 ■|| 敵13の名前生命点：0 /最大生命点： 0 ■||| 敵14の名前生命点：0 /最大生命点： 0 ■|||| 敵15の名前生命点：0 /最大生命点： 0 ■● 敵16の名前生命点：0 /最大生命点： 0 ■●| 敵17の名前生命点：0 /最大生命点： 0 ■●|| 敵18の名前生命点：0 /最大生命点： 0 ■●||| 敵19の名前生命点：0 /最大生命点： 0 ■●|||| 敵20の名前生命点：0 /最大生命点： 0 ■■ 敵21の名前生命点：0 /最大生命点： 0 ■■| 敵22の名前生命点：0 /最大生命点： 0 ■■|| 敵23の名前生命点：0 /最大生命点： 0 ■■||| 敵24の名前生命点：0 /最大生命点： 0 ■■|||| 敵25の名前生命点：0 /最大生命点： 0 ■■● 敵26の名前生命点：0 /最大生命点： 0 ■■●|
これのhtmlのソースコードは下のようになる。idをたくさん付けるようにしている。後からJavaScriptで表示を変えたり、表示のon/offを切り替えるためだ。idの最後に_lineと命名しているのは、表示のon/offの目的。<span>で挟んでいるのは、挟んでいる内容を変える目的。
<div id="なんとか_line">ごちゃごちゃ</div> // 表示/非表示用
<span id= >ごちゃ</span> // 値の変更用
ユーザーに見せる敵の連番と、実際の配列の番号がずれているのがしんどい。 でも1から配列を始めると enemy.length が使いにくくなるので仕方ないかな。
<p id="Pip_LIFE_POINT_parag">
<div id="Pip_LIFE_POINT_line">
ピップ 生命点：<span id="Pip_LIFE_POINT">48</span>
<span id="Pip_LIFE POINT_slash">/最大生命点：</span>
<span id="Pip_max_LIFE_POINT">48</span>
(原点：<span id="Pip_starting_LIFE_POINT">48</span>)
<span id="Pip_LIFE_POINT_gauge">■■■■■●|||</span></div>
</p>
<p id="Fred_LIFE_POINT_parag">
<div id="Fred_LIFE_POINT_line">
フレッド 生命点：<span id="Fred_LIFE_POINT">66</span>
<span id="Fred_LIFE POINT_slash">/最大生命点：</span>
<span id="Fred_max_LIFE_POINT">66</span>
<span id="Fred_LIFE_POINT_gauge">■■■■■■●|</span></div>
</p>
<p id="Pip_EXPERIENCE_POINT_parag">
<div id="Pip_EXPERIENCE_POINT_line">
経験点：<span id="Pip_EXPERIENCE_POINT">0</span> (経験点 20 = 1 永久生命点)
</div>
</p>
<div id="enemy0_line">
<span id="enemy0_name">敵1の名前</span>生命点：<span id="enemy0_LIFE_POINT">0</span>
<span id="enemy0_LIFE_POINT_slash">/最大生命点：</span>
<span id="enemy0_max_LIFE_POINT">0</span>
<span id="enemy0_LIFE_POINT_gauge">|</span></div>
<div id="enemy1_line">
<span id="enemy1_name">敵2の名前</span>生命点：<span id="enemy1_LIFE_POINT">0</span>
<span id="enemy1_LIFE_POINT_slash">/最大生命点：</span>
<span id="enemy1_max_LIFE_POINT">0</span>
<span id="enemy1_LIFE_POINT_gauge">||</span></div>
<div id="enemy2_line">
<span id="enemy2_name">敵3の名前</span>生命点：<span id="enemy2_LIFE_POINT">0</span>
<span id="enemy2_LIFE_POINT_slash">/最大生命点：</span>
<span id="enemy2_max_LIFE_POINT">0</span>
<span id="enemy2_LIFE_POINT_gauge">|||</span></div>
<div id="enemy3_line">
<span id="enemy3_name">敵4の名前</span>生命点：<span id="enemy3_LIFE_POINT">0</span>
<span id="enemy3_LIFE_POINT_slash">/最大生命点：</span>
<span id="enemy3_max_LIFE_POINT">0</span>
<span id="enemy3_LIFE_POINT_gauge">||||</span></div>
<div id="enemy4_line">
<span id="enemy4_name">敵5の名前</span>生命点：<span id="enemy4_LIFE_POINT">0</span>
<span id="enemy4_LIFE_POINT_slash">/最大生命点：</span>
<span id="enemy4_max_LIFE_POINT">0</span>
<span id="enemy4_LIFE_POINT_gauge">●</span></div>
<div id="enemy5_line">
<span id="enemy5_name">敵6の名前</span>生命点：<span id="enemy5_LIFE_POINT">0</span>
<span id="enemy5_LIFE_POINT_slash">/最大生命点：</span>
<span id="enemy5_max_LIFE_POINT">0</span>
<span id="enemy5_LIFE_POINT_gauge">●|</span></div>
<div id="enemy6_line">
<span id="enemy6_name">敵7の名前</span>生命点：<span id="enemy6_LIFE_POINT">0</span>
<span id="enemy6_LIFE_POINT_slash">/最大生命点：</span>
<span id="enemy6_max_LIFE_POINT">0</span>
<span id="enemy6_LIFE_POINT_gauge">●||</span></div>
<div id="enemy7_line">
<span id="enemy7_name">敵8の名前</span>生命点：<span id="enemy7_LIFE_POINT">0</span>
<span id="enemy7_LIFE_POINT_slash">/最大生命点：</span>
<span id="enemy7_max_LIFE_POINT">0</span>
<span id="enemy7_LIFE_POINT_gauge">●|||</span></div>
<div id="enemy8_line">
<span id="enemy8_name">敵9の名前</span>生命点：<span id="enemy8_LIFE_POINT">0</span>
<span id="enemy8_LIFE_POINT_slash">/最大生命点：</span>
<span id="enemy8_max_LIFE_POINT">0</span>
<span id="enemy8_LIFE_POINT_gauge">●||||</span></div>
<div id="enemy9_line">
<span id="enemy9_name">敵10の名前</span>生命点：<span id="enemy9_LIFE_POINT">0</span>
<span id="enemy9_LIFE_POINT_slash">/最大生命点：</span>
<span id="enemy9_max_LIFE_POINT">0</span>
<span id="enemy9_LIFE_POINT_gauge">■</span></div>
<div id="enemy10_line">
<span id="enemy10_name">敵11の名前</span>生命点：<span id="enemy10_LIFE_POINT">0</span>
<span id="enemy10_LIFE_POINT_slash">/最大生命点：</span>
<span id="enemy10_max_LIFE_POINT">0</span>
<span id="enemy10_LIFE_POINT_gauge">■|</span></div>
<div id="enemy11_line">
<span id="enemy11_name">敵12の名前</span>生命点：<span id="enemy11_LIFE_POINT">0</span>
<span id="enemy11_LIFE_POINT_slash">/最大生命点：</span>
<span id="enemy11_max_LIFE_POINT">0</span>
<span id="enemy11_LIFE_POINT_gauge">■||</span></div>
<div id="enemy12_line">
<span id="enemy12_name">敵13の名前</span>生命点：<span id="enemy12_LIFE_POINT">0</span>
<span id="enemy12_LIFE_POINT_slash">/最大生命点：</span>
<span id="enemy12_max_LIFE_POINT">0</span>
<span id="enemy12_LIFE_POINT_gauge">■|||</span></div>
<div id="enemy13_line">
<span id="enemy13_name">敵14の名前</span>生命点：<span id="enemy13_LIFE_POINT">0</span>
<span id="enemy13_LIFE_POINT_slash">/最大生命点：</span>
<span id="enemy13_max_LIFE_POINT">0</span>
<span id="enemy13_LIFE_POINT_gauge">■||||</span></div>
<div id="enemy14_line">
<span id="enemy14_name">敵15の名前</span>生命点：<span id="enemy14_LIFE_POINT">0</span>
<span id="enemy14_LIFE_POINT_slash">/最大生命点：</span>
<span id="enemy14_max_LIFE_POINT">0</span>
<span id="enemy14_LIFE_POINT_gauge">■●</span></div>
<div id="enemy15_line">
<span id="enemy15_name">敵16の名前</span>生命点：<span id="enemy15_LIFE_POINT">0</span>
<span id="enemy15_LIFE_POINT_slash">/最大生命点：</span>
<span id="enemy15_max_LIFE_POINT">0</span>
<span id="enemy15_LIFE_POINT_gauge">■●|</span></div>
<div id="enemy16_line">
<span id="enemy16_name">敵17の名前</span>生命点：<span id="enemy16_LIFE_POINT">0</span>
<span id="enemy16_LIFE_POINT_slash">/最大生命点：</span>
<span id="enemy16_max_LIFE_POINT">0</span>
<span id="enemy16_LIFE_POINT_gauge">■●||</span></div>
<div id="enemy17_line">
<span id="enemy17_name">敵18の名前</span>生命点：<span id="enemy17_LIFE_POINT">0</span>
<span id="enemy17_LIFE_POINT_slash">/最大生命点：</span>
<span id="enemy17_max_LIFE_POINT">0</span>
<span id="enemy17_LIFE_POINT_gauge">■●|||</span></div>
<div id="enemy18_line">
<span id="enemy18_name">敵19の名前</span>生命点：<span id="enemy18_LIFE_POINT">0</span>
<span id="enemy18_LIFE_POINT_slash">/最大生命点：</span>
<span id="enemy18_max_LIFE_POINT">0</span>
<span id="enemy18_LIFE_POINT_gauge">■●||||</span></div>
<div id="enemy19_line">
<span id="enemy19_name">敵20の名前</span>生命点：<span id="enemy19_LIFE_POINT">0</span>
<span id="enemy19_LIFE_POINT_slash">/最大生命点：</span>
<span id="enemy19_max_LIFE_POINT">0</span>
<span id="enemy19_LIFE_POINT_gauge">■■</span></div>
<div id="enemy20_line">
<span id="enemy20_name">敵21の名前</span>生命点：<span id="enemy20_LIFE_POINT">0</span>
<span id="enemy20_LIFE_POINT_slash">/最大生命点：</span>
<span id="enemy20_max_LIFE_POINT">0</span>
<span id="enemy20_LIFE_POINT_gauge">■■|</span></div>
<div id="enemy21_line">
<span id="enemy21_name">敵22の名前</span>生命点：<span id="enemy21_LIFE_POINT">0</span>
<span id="enemy21_LIFE_POINT_slash">/最大生命点：</span>
<span id="enemy21_max_LIFE_POINT">0</span>
<span id="enemy21_LIFE_POINT_gauge">■■||</span></div>
<div id="enemy22_line">
<span id="enemy22_name">敵23の名前</span>生命点：<span id="enemy22_LIFE_POINT">0</span>
<span id="enemy22_LIFE_POINT_slash">/最大生命点：</span>
<span id="enemy22_max_LIFE_POINT">0</span>
<span id="enemy22_LIFE_POINT_gauge">■■|||</span></div>
<div id="enemy23_line">
<span id="enemy23_name">敵24の名前</span>生命点：<span id="enemy23_LIFE_POINT">0</span>
<span id="enemy23_LIFE_POINT_slash">/最大生命点：</span>
<span id="enemy23_max_LIFE_POINT">0</span>
<span id="enemy23_LIFE_POINT_gauge">■■||||</span></div>
<div id="enemy24_line">
<span id="enemy24_name">敵25の名前</span>生命点：<span id="enemy24_LIFE_POINT">0</span>
<span id="enemy24_LIFE_POINT_slash">/最大生命点：</span>
<span id="enemy24_max_LIFE_POINT">0</span>
<span id="enemy24_LIFE_POINT_gauge">■■●</span></div>
<div id="enemy25_line">
<span id="enemy25_name">敵26の名前</span>生命点：<span id="enemy25_LIFE_POINT">0</span>
<span id="enemy25_LIFE_POINT_slash">/最大生命点：</span>
<span id="enemy25_max_LIFE_POINT">0</span>
<span id="enemy25_LIFE_POINT_gauge">■■●|</span></div>
たとえば、ピップの生命点を5減らしたいときは、このようにすればよい。 Pip.LIFE_POINTがJavaScriptが持っているピップの生命点を表す変数、それに対応する htmlでのidは"Pip_LIFE_POINT"としている。
Pip.LIFE_POINT -= 5;
document.getElementById("Pip_LIFE_POINT").innerHTML = Pip.LIFE_POINT;
敵の生命点を変えたり、敵の名前を変えるには、それぞれ違う命令文が必要になる。でも、いちいち表示更新の関数を違うようにするのは面倒くさい。全員の生命点、最大生命点、敵の名前、生命点のゲージを更新する、update_LIFE_POINT() 関数を作ってしまって、何か生命点に変更があったら何も考えずに update_LIFE_POINT() を使えばいいようにしよう。
function update_LIFE_POINT() {
Pip.max_LIFE_POINT = Math.max(Pip.starting_LIFE_POINT + Math.floor(Pip.EXPERIENCE_POINT/20), Pip.max_LIFE_POINT);
document.getElementById("Pip_LIFE_POINT").innerHTML = Pip.LIFE_POINT;
document.getElementById("Pip_max_LIFE_POINT").innerHTML = Pip.max_LIFE_POINT;
document.getElementById("Pip_starting_LIFE_POINT").innerHTML = Pip.starting_LIFE_POINT;
document.getElementById("Pip_LIFE_POINT_gauge").innerHTML = LIFE_POINT_gauge(Pip.LIFE_POINT);
document.getElementById("Pip_EXPERIENCE_POINT").innerHTML = Pip.EXPERIENCE_POINT;
if (Fred.sumon === true) {
document.getElementById("Fred_LIFE_POINT_line").style.display = 'block'; // 表示
} else {
document.getElementById("Fred_LIFE_POINT_line").style.display = 'none'; // 非表示
}
document.getElementById("Fred_LIFE_POINT").innerHTML = Fred.LIFE_POINT;
document.getElementById("Fred_max_LIFE_POINT").innerHTML = Fred.max_LIFE_POINT;
document.getElementById("Fred_LIFE_POINT_gauge").innerHTML = LIFE_POINT_gauge(Fred.LIFE_POINT);
var i;
for(i = 0; i < enemy.length; i++) {
if (enemy[i].id_num === 0) {
document.getElementById("enemy" + i + "_line").style.display = 'none'; // 非表示
} else {
document.getElementById("enemy" + i + "_line").style.display = 'block'; // 表示
document.getElementById("enemy" + i + "_name").innerHTML = enemy[i].name;
document.getElementById("enemy" + i + "_LIFE_POINT").innerHTML = enemy[i].LIFE_POINT;
document.getElementById("enemy" + i + "_max_LIFE_POINT").innerHTML = enemy[i].max_LIFE_POINT;
document.getElementById("enemy" + i + "_LIFE_POINT_gauge").innerHTML = LIFE_POINT_gauge(enemy[i].LIFE_POINT);
}
}
}
function LIFE_POINT_gauge(LIFE_POINT) {
var gauge_str = "";
while(LIFE_POINT > 0) {
if (LIFE_POINT >= 100) {
gauge_str = gauge_str + "★"; // 生命点100点
LIFE_POINT -= 100;
} else if (LIFE_POINT >= 10) {
gauge_str = gauge_str + "■"; // 生命点10点
LIFE_POINT -= 10;
} else if (LIFE_POINT >= 5) {
gauge_str = gauge_str + "●"; // 生命点5点
LIFE_POINT -= 5;
} else if (LIFE_POINT >= 1) {
gauge_str = gauge_str + "|"; // 生命点1点
LIFE_POINT -= 1;
}
}
return gauge_str;
}
LIFE_POINT_gauge() 関数というのは、生命点を直感的に表示しただけ。数値だけで見せるのは目が疲れるので作った。
