JavaScriptによるRPG制作 Volume.2

以前、インターネット上の動画を参考にして、
HSPで製作した自作RPGゲームを
JavaScriptとjQueryで書き直してみることにした。
ジャンル的には、シミュレーションRPGに近いと思われる。
他サイトへの無断転載及び、外部サイトから
このページへの直接リンクをすることは、禁止する。

09 10 11 12 13 14 15 16




第9講. 特殊攻撃(充放電システム)の実装・充電編

jsrpg009.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta name="robots" content="noindex,nofollow">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScriptによるRPG制作・第9講</title>
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="jsrpg009.js"></script>
</head>
<body bgcolor="#c0c0c0">
<center>
<h1>JavaScriptによるRPG制作・第9講</h1>

<form>
<table border="0" frame="void" rules="none">
<tr>
<td align="center"><span id="stage">ステージ:1</span></td>
<td align="center"><span id="HPenemy">敵HP:10</span></td>
<td align="center"><span>通常攻撃:</span></td>
</tr>
<tr>
<td align="center"><span id="HPplayer">HP:10</span></td>
<td align="center"><span id="ATKplayer">全蓄積エネルギー:0</span></td>
<td align="center"><span>
<input type="button" value="2ダメージを与え、2充電する" onclick="two()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message1"> </span></td>
<td align="center"><span>
<input type="button" value="3ダメージを与え、3充電する" onclick="three()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message2"> </span></td>
<td align="center"><span>
<input type="button" value="5ダメージを与え、5充電する" onclick="five()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message3"> </span></td>
<td align="center"><span>
<input type="button" value="7ダメージを与え、7充電する" onclick="seven()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message4"> </span></td>
<td align="center"><span> </span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="winlose"> </span></td>
<td align="center"><span> </span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="next"> </span></td>
<td align="center"><span>
<input type="button" value="次のステージへ" onclick="NextStage()">
</span></td>
</tr>
</table>
</form>

</center>
</body>
</html>

jsrpg009.js

var HPenemy = 10;
var HPplayer = 10;
var ATKenemy = 0; // 敵の攻撃力を初期化
var ATKplayer = 0; // プレイヤーの攻撃力を初期化
var stage = 1; // ステージ数

var power; // 技の威力

function ATKcalc(){ // 敵の攻撃力を計算する関数
  ATKenemy = 0; // 敵の攻撃力を初期化
  if (HPenemy % 2 == 0) {
    ATKenemy += 2;
  }
  // 敵のHPが2の倍数の時、敵の攻撃力が2上昇する。
  if (HPenemy % 3 == 0) {
    ATKenemy += 3;
  }
  // 敵のHPが3の倍数の時、敵の攻撃力が3上昇する。

  if (stage >= 3 && HPenemy % 5 == 0) {
    ATKenemy += 5;
  }
  // ステージ3以降、敵のHPが5の倍数の時、敵の攻撃力が5上昇する。
  if (stage >= 5 && HPenemy % 7 == 0) {
    ATKenemy += 7;
  }
  // ステージ5以降、敵のHPが7の倍数の時、敵の攻撃力が7上昇する。

}

function NextStage(){ // 勝利後のイベント処理をする関数
  if (HPenemy <= 0) {  // 敵のHPが0以下ならば、勝利。
    if (stage < 10) {
      stage += 1; // 次のステージへ
      HPenemy = stage * 10; // 次のステージの敵のHP
      HPplayer += stage * 10; // HPを加算
      $("#stage").text("ステージ:" + stage);
      $("#HPenemy").text("敵HP:" + HPenemy);
      $("#HPplayer").text("HP:" + HPplayer);
      $("#winlose").text("");
    }
  }
  $("#next").text("");
}

// メイン関数
function main(){
  if (HPenemy <= 0) { // 敵のHPが0以下ならば、勝利。
    $("#HPenemy").text("敵HP:0");
    $("#winlose").text("You win!"); // 勝利メッセージ
    $("#next").text("「次のステージへ」ボタンを押してください。");
  } else {
    $("#HPenemy").text("敵HP:" + HPenemy);
    ATKcalc();
    HPplayer -= ATKenemy;
 
    $("#HPplayer").text("HP:" + HPplayer);
    $("#message3").text("プレイヤーは " + ATKenemy + " のダメージを受けた");

    if (HPplayer <= 0) {  // プレイヤーのHPが0以下ならば、敗北。
      $("#HPplayer").text("HP:0");
      $("#winlose").text("You lose!"); // 敗北メッセージ
    }

  }
}

// 通常攻撃(コア)
function NormalAttack(power){
  if (HPplayer > 0 && HPenemy > 0 && stage <= 10){
    HPenemy -= power;  // 技の威力だけダメ―ジを与え、
    ATKplayer += power; // その数値分充電する。

    $("#HPenemy").text("敵HP:" + HPenemy);
    $("#ATKplayer").text("全蓄積エネルギー:" + ATKplayer);
    $("#message1").text("敵に " + power + " のダメージを与えた");
    $("#message2").text("エネルギーを " + power + " 充電した");

    main();
  }
}

// 通常攻撃
function two() { NormalAttack(2); }
function three() { NormalAttack(3); }

function five(){
  if (stage >= 3) {
    NormalAttack(5);
  } else {
    alert("ステージ数3未満では、この技を選択することができません。");
  }
}

function seven(){
  if (stage >= 5){
    NormalAttack(7);
  } else {
    alert("ステージ数5未満では、この技を選択することができません。");
  }
}

(解説) メイン関数の部分から通常攻撃(コア)の部分をを分離し、powerを通常攻撃の威力に、
ATKplayerを充電した全蓄積エネルギーにした。




第10講. 特殊攻撃(充放電システム)の実装・放電編

jsrpg010.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta name="robots" content="noindex,nofollow">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScriptによるRPG制作・第10講</title>
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="jsrpg010.js"></script>
</head>
<body bgcolor="#c0c0c0">
<center>
<h1>JavaScriptによるRPG制作・第10講</h1>

<form>
<table border="0" frame="void" rules="none">
<tr>
<td align="center"><span id="stage">ステージ:1</span></td>
<td align="center"><span id="HPenemy">敵HP:10</span></td>
<td align="center"><span>通常攻撃:</span></td>
</tr>
<tr>
<td align="center"><span id="HPplayer">HP:10</span></td>
<td align="center"><span id="ATKplayer">全蓄積エネルギー:0</span></td>
<td align="center"><span>
<input type="button" value="2ダメージを与え、2充電する" onclick="two()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message1"> </span></td>
<td align="center"><span>
<input type="button" value="3ダメージを与え、3充電する" onclick="three()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message2"> </span></td>
<td align="center"><span>
<input type="button" value="5ダメージを与え、5充電する" onclick="five()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message3"> </span></td>
<td align="center"><span>
<input type="button" value="7ダメージを与え、7充電する" onclick="seven()">
</span></td>
</tr>

<tr>
<td align="center" colspan="2"><span id="message4"> </span></td>
<td align="center"><span>特殊攻撃:</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="winlose"> </span></td>
<td align="center"><span>
<input type="button" value="全蓄積エネルギーを放電する" onclick="special1()">
</span></td>
</tr>

<tr>
<td align="center" colspan="2"><span id="next"> </span></td>
<td align="center"><span>
<input type="button" value="次のステージへ" onclick="NextStage()">
</span></td>
</tr>
</table>
</form>

</center>
</body>
</html>

jsrpg010.js

var HPenemy = 10;
var HPplayer = 10;
var ATKenemy = 0; // 敵の攻撃力を初期化
var ATKplayer = 0; // プレイヤーの攻撃力を初期化
var stage = 1; // ステージ数
var power; // 技の威力

function ATKcalc(){ // 敵の攻撃力を計算する関数
  ATKenemy = 0; // 敵の攻撃力を初期化
  if (HPenemy % 2 == 0) {
    ATKenemy += 2;
  }
  // 敵のHPが2の倍数の時、敵の攻撃力が2上昇する。
  if (HPenemy % 3 == 0) {
    ATKenemy += 3;
  }
  // 敵のHPが3の倍数の時、敵の攻撃力が3上昇する。

  if (stage >= 3 && HPenemy % 5 == 0) {
    ATKenemy += 5;
  }
  // ステージ3以降、敵のHPが5の倍数の時、敵の攻撃力が5上昇する。
  if (stage >= 5 && HPenemy % 7 == 0) {
    ATKenemy += 7;
  }
  // ステージ5以降、敵のHPが7の倍数の時、敵の攻撃力が7上昇する。

}

function NextStage(){ // 勝利後のイベント処理をする関数
  if (HPenemy <= 0) {  // 敵のHPが0以下ならば、勝利。
    if (stage < 10) {
      stage += 1; // 次のステージへ
      HPenemy = stage * 10; // 次のステージの敵のHP
      HPplayer += stage * 10; // HPを加算

      ATKplayer = 0; // プレイヤーの攻撃力を初期化

      $("#stage").text("ステージ:" + stage);
      $("#HPenemy").text("敵HP:" + HPenemy);
      $("#HPplayer").text("HP:" + HPplayer);

      $("#ATKplayer").text("全蓄積エネルギー:" + ATKplayer);
      // 現在の全蓄積エネルギー

      $("#winlose").text("");
    }
  }
  $("#next").text("");
}

// メイン関数
function main(){
  if (HPenemy <= 0) { // 敵のHPが0以下ならば、勝利。
    $("#HPenemy").text("敵HP:0");
    $("#winlose").text("You win!"); // 勝利メッセージ
    $("#next").text("「次のステージへ」ボタンを押してください。");
  } else {
    $("#HPenemy").text("敵HP:" + HPenemy);
    ATKcalc();
    HPplayer -= ATKenemy;
 
    $("#HPplayer").text("HP:" + HPplayer);
    $("#message3").text("プレイヤーは " + ATKenemy + " のダメージを受けた");

    if (HPplayer <= 0) {  // プレイヤーのHPが0以下ならば、敗北。
      $("#HPplayer").text("HP:0");
      $("#winlose").text("You lose!"); // 敗北メッセージ
    }

  }
}

// 通常攻撃(コア)
function NormalAttack(power){
  if (HPplayer > 0 && HPenemy > 0 && stage <= 10){
    HPenemy -= power;  // 技の威力だけダメ―ジを与え、
    ATKplayer += power; // その数値分充電する。

    $("#HPenemy").text("敵HP:" + HPenemy);
    $("#ATKplayer").text("全蓄積エネルギー:" + ATKplayer);
    $("#message1").text("敵に " + power + " のダメージを与えた");
    $("#message2").text("エネルギーを " + power + " 充電した");

    main();
  }
}

// 特殊攻撃
function special1(){
  if (HPplayer > 0 && HPenemy > 0 && stage <= 10){
    HPenemy -= ATKplayer; // 全蓄積エネルギーを放電する

    $("#HPenemy").text("敵HP:" + HPenemy);
    $("#ATKplayer").text("全蓄積エネルギー:" + 0);
    $("#message1").text("蓄積されていた全エネルギーを放電した");
    $("#message2").text("敵に " + ATKplayer + " のダメージを与えた");

    ATKplayer = 0; // プレイヤーの攻撃力を初期化

    main();
  }
}

// 通常攻撃
function two() { NormalAttack(2); }
function three() { NormalAttack(3); }

function five(){
  if (stage >= 3) {
    NormalAttack(5);
  } else {
    alert("ステージ数3未満では、この技を選択することができません。");
  }
}

function seven(){
  if (stage >= 5){
    NormalAttack(7);
  } else {
    alert("ステージ数5未満では、この技を選択することができません。");
  }
}

(解説) 第8講にて、上級ステージ用のコマンドを追加したが、
敵に大ダメージを与えるというほどではない。そこで、固定ダメージを与える
これらの「通常攻撃」に対して、「特殊攻撃」を実装したい。
技の効果は、通常攻撃の際に、敵に与えたダメージをエネルギーとして充電し、
特殊攻撃が選択されたとき、放電するというものである。
但し、蓄積されたエネルギーは、次のステージに繰り越されることはないものとする。




第11講. 敵の回復とエンディングの追加

jsrpg011.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta name="robots" content="noindex,nofollow">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScriptによるRPG制作・第11講</title>
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="jsrpg011.js"></script>
</head>
<body bgcolor="#c0c0c0">
<center>
<h1>JavaScriptによるRPG制作・第11講</h1>

<form>
<table border="0" frame="void" rules="none">
<tr>
<td align="center"><span id="stage">ステージ:1</span></td>
<td align="center"><span id="HPenemy">敵HP:10</span></td>
<td align="center"><span>通常攻撃:</span></td>
</tr>
<tr>
<td align="center"><span id="HPplayer">HP:10</span></td>
<td align="center"><span id="ATKplayer">全蓄積エネルギー:0</span></td>
<td align="center"><span>
<input type="button" value="2ダメージを与え、2充電する" onclick="two()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message1"> </span></td>
<td align="center"><span>
<input type="button" value="3ダメージを与え、3充電する" onclick="three()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message2"> </span></td>
<td align="center"><span>
<input type="button" value="5ダメージを与え、5充電する" onclick="five()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message3"> </span></td>
<td align="center"><span>
<input type="button" value="7ダメージを与え、7充電する" onclick="seven()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message4"> </span></td>
<td align="center"><span>特殊攻撃:</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="winlose"> </span></td>
<td align="center"><span>
<input type="button" value="全蓄積エネルギーを放電する" onclick="special1()">
</span></td>
</tr>

<tr>
<td align="center" colspan="2"><span id="ending"> </span></td>
<td align="center"><span> </span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="score"> </span></td>
<td align="center"><span> </span></td>
</tr>

<tr>
<td align="center" colspan="2"><span id="next"> </span></td>
<td align="center"><span>
<input type="button" value="次のステージへ" onclick="NextStage()">
</span></td>
</tr>
</table>
</form>

</center>
</body>
</html>

jsrpg011.js

var HPenemy = 10;
var HPplayer = 10;
var ATKenemy = 0; // 敵の攻撃力を初期化
var ATKplayer = 0; // プレイヤーの攻撃力を初期化
var stage = 1; // ステージ数
var power; // 技の威力

function ATKcalc(){ // 敵の攻撃力を計算する関数
  ATKenemy = 0; // 敵の攻撃力を初期化
  if (HPenemy % 2 == 0) {
    ATKenemy += 2;
  }
  // 敵のHPが2の倍数の時、敵の攻撃力が2上昇する。
  if (HPenemy % 3 == 0) {
    ATKenemy += 3;
  }
  // 敵のHPが3の倍数の時、敵の攻撃力が3上昇する。

  if (stage >= 3 && HPenemy % 5 == 0) {
    ATKenemy += 5;
  }
  // ステージ3以降、敵のHPが5の倍数の時、敵の攻撃力が5上昇する。
  if (stage >= 5 && HPenemy % 7 == 0) {
    ATKenemy += 7;
  }
  // ステージ5以降、敵のHPが7の倍数の時、敵の攻撃力が7上昇する。

}

function NextStage(){ // 勝利後のイベント処理をする関数
  if (HPenemy <= 0) {  // 敵のHPが0以下ならば、勝利。
    if (stage < 10) {
      stage += 1; // 次のステージへ
      HPenemy = stage * 10; // 次のステージの敵のHP
      HPplayer += stage * 10; // HPを加算
      ATKplayer = 0; // プレイヤーの攻撃力を初期化
      $("#stage").text("ステージ:" + stage);
      $("#HPenemy").text("敵HP:" + HPenemy);
      $("#HPplayer").text("HP:" + HPplayer);
      $("#ATKplayer").text("全蓄積エネルギー:" + ATKplayer);
      // 現在の全蓄積エネルギー
      $("#winlose").text("");

    } else {
      $("#ending").text("祝!ゲームクリア");
      $("#score").text("スコア:" + HPplayer);
      // エンディング
    }

  }
  $("#next").text("");
}

// メイン関数
function main(){
  if (HPenemy <= 0) { // 敵のHPが0以下ならば、勝利。
    $("#HPenemy").text("敵HP:0");
    $("#winlose").text("You win!"); // 勝利メッセージ
    $("#next").text("「次のステージへ」ボタンを押してください。");
  } else {

    ATKcalc();
    HPplayer -= ATKenemy; // 敵の攻撃によるダメージを受ける。
    $("#HPplayer").text("HP:" + HPplayer);
    $("#message3").text("プレイヤーは " + ATKenemy + " のダメージを受けた");

    HPenemy += ATKenemy; // 敵はその数値分HPを回復する。
    $("#HPenemy").text("敵HP:" + HPenemy);
    $("#message4").text("敵はHPを " + ATKenemy + " 回復した");
    // 敵がHPを回復した場合のメッセージ

    if (HPplayer <= 0) {  // プレイヤーのHPが0以下ならば、敗北。
      $("#HPplayer").text("HP:0");
      $("#winlose").text("You lose!"); // 敗北メッセージ
    }

  }
}

// 通常攻撃(コア)
function NormalAttack(power){
  if (HPplayer > 0 && HPenemy > 0 && stage <= 10){
    HPenemy -= power;  // 技の威力だけダメ―ジを与え、
    ATKplayer += power; // その数値分充電する。

    $("#HPenemy").text("敵HP:" + HPenemy);
    $("#ATKplayer").text("全蓄積エネルギー:" + ATKplayer);
    $("#message1").text("敵に " + power + " のダメージを与えた");
    $("#message2").text("エネルギーを " + power + " 充電した");

    main();
  }
}

// 特殊攻撃
function special1(){
  if (HPplayer > 0 && HPenemy > 0 && stage <= 10){
    HPenemy -= ATKplayer; // 全蓄積エネルギーを放電する

    $("#HPenemy").text("敵HP:" + HPenemy);
    $("#ATKplayer").text("全蓄積エネルギー:" + 0);
    $("#message1").text("蓄積されていた全エネルギーを放電した");
    $("#message2").text("敵に " + ATKplayer + " のダメージを与えた");

    ATKplayer = 0; // プレイヤーの攻撃力を初期化

    main();
  }
}

// 通常攻撃
function two() { NormalAttack(2); }
function three() { NormalAttack(3); }

function five(){
  if (stage >= 3) {
    NormalAttack(5);
  } else {
    alert("ステージ数3未満では、この技を選択することができません。");
  }
}

function seven(){
  if (stage >= 5){
    NormalAttack(7);
  } else {
    alert("ステージ数5未満では、この技を選択することができません。");
  }
}

(解説) 第10講において、プレイヤー側に特殊攻撃を実装したが、
その場合、敵側も強化しないと、ゲームバランスが崩壊するだろう。
そこで、プレイヤーが受けたダメージ分、敵のHPが回復するようにした。
(その為、ある状況では、第10講で実装した特殊攻撃を使わないと攻略できない。)
また、エンディングを追加し、その際に残ったHPをスコアとした。




第12講. 特殊攻撃(回復技)の追加

jsrpg012.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta name="robots" content="noindex,nofollow">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScriptによるRPG制作・第12講</title>
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="jsrpg012.js"></script>
</head>
<body bgcolor="#c0c0c0">
<center>
<h1>JavaScriptによるRPG制作・第12講</h1>

<form>
<table border="0" frame="void" rules="none">
<tr>
<td align="center"><span id="stage">ステージ:1</span></td>
<td align="center"><span id="HPenemy">敵HP:10</span></td>
<td align="center"><span>通常攻撃:</span></td>
</tr>
<tr>
<td align="center"><span id="HPplayer">HP:10</span></td>
<td align="center"><span id="ATKplayer">全蓄積エネルギー:0</span></td>
<td align="center"><span>
<input type="button" value="2ダメージを与え、2充電する" onclick="two()">
</span></td>
</tr>

<tr>
<td align="center" colspan="2"><span id=""> </span></td>
<td align="center"><span>
<input type="button" value="3ダメージを与え、3充電する" onclick="three()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id=""> </span></td>
<td align="center"><span>
<input type="button" value="5ダメージを与え、5充電する" onclick="five()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message1"> </span></td>
<td align="center"><span>
<input type="button" value="7ダメージを与え、7充電する" onclick="seven()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message2"> </span></td>
<td align="center"><span>
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message3"> </span></td>
<td align="center"><span>特殊攻撃:</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message4"> </span></td>
<td align="center"><span>
<input type="button" value="全蓄積エネルギーを放電する" onclick="special1()">
</span></td>
</tr>

<tr>
<td align="center" colspan="2"><span id="winlose"> </span></td>
<td align="center"><span>
<input type="button" value="エネルギーを使って回復する" onclick="special2()">
</span></td>
</tr>

<tr>
<td align="center" colspan="2"><span id="ending"> </span></td>
<td align="center"><span> </span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="score"> </span></td>
<td align="center"><span> </span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="next"> </span></td>
<td align="center"><span>
<input type="button" value="次のステージへ" onclick="NextStage()">
</span></td>
</tr>
</table>
</form>

</center>
</body>
</html>

jsrpg012.js

var HPenemy = 10;
var HPplayer = 10;
var ATKenemy = 0; // 敵の攻撃力を初期化
var ATKplayer = 0; // プレイヤーの攻撃力を初期化
var stage = 1; // ステージ数
var power; // 技の威力

function ATKcalc(){ // 敵の攻撃力を計算する関数
  ATKenemy = 0; // 敵の攻撃力を初期化
  if (HPenemy % 2 == 0) {
    ATKenemy += 2;
  }
  // 敵のHPが2の倍数の時、敵の攻撃力が2上昇する。
  if (HPenemy % 3 == 0) {
    ATKenemy += 3;
  }
  // 敵のHPが3の倍数の時、敵の攻撃力が3上昇する。

  if (stage >= 3 && HPenemy % 5 == 0) {
    ATKenemy += 5;
  }
  // ステージ3以降、敵のHPが5の倍数の時、敵の攻撃力が5上昇する。
  if (stage >= 5 && HPenemy % 7 == 0) {
    ATKenemy += 7;
  }
  // ステージ5以降、敵のHPが7の倍数の時、敵の攻撃力が7上昇する。

}

function MessageClear(){ // メッセージをクリアする関数
  $("#message1").text("");
  $("#message2").text("");
  $("#message3").text("");
  $("#message4").text("");
}

function NextStage(){ // 勝利後のイベント処理をする関数
  if (HPenemy <= 0) {  // 敵のHPが0以下ならば、勝利。
    if (stage < 10) {
      stage += 1; // 次のステージへ
      HPenemy = stage * 10; // 次のステージの敵のHP
      HPplayer += stage * 10; // HPを加算
      ATKplayer = 0; // プレイヤーの攻撃力を初期化
      $("#stage").text("ステージ:" + stage);
      $("#HPenemy").text("敵HP:" + HPenemy);
      $("#HPplayer").text("HP:" + HPplayer);
      $("#ATKplayer").text("全蓄積エネルギー:" + ATKplayer);
      // 現在の全蓄積エネルギー
      $("#winlose").text("");
    } else {
      $("#ending").text("祝!ゲームクリア");
      $("#score").text("スコア:" + HPplayer);
      // エンディング
    }
  }
  $("#next").text("");
}

// メイン関数
function main(){
  if (HPenemy <= 0) { // 敵のHPが0以下ならば、勝利。
    $("#HPenemy").text("敵HP:0");
    $("#winlose").text("You win!"); // 勝利メッセージ
    $("#next").text("「次のステージへ」ボタンを押してください。");
  } else {

    ATKcalc();
    HPplayer -= ATKenemy; // 敵の攻撃によるダメージを受ける。
    $("#HPplayer").text("HP:" + HPplayer);
    $("#message3").text("プレイヤーは " + ATKenemy + " のダメージを受けた");

    HPenemy += ATKenemy; // 敵はその数値分HPを回復する。
    $("#HPenemy").text("敵HP:" + HPenemy);
    $("#message4").text("敵はHPを " + ATKenemy + " 回復した");
    // 敵がHPを回復した場合のメッセージ

    if (HPplayer <= 0) {  // プレイヤーのHPが0以下ならば、敗北。
      $("#HPplayer").text("HP:0");
      $("#winlose").text("You lose!"); // 敗北メッセージ
    }

  }
}

// 通常攻撃(コア)
function NormalAttack(power){
  if (HPplayer > 0 && HPenemy > 0 && stage <= 10){

    MessageClear();

    HPenemy -= power;  // 技の威力だけダメ―ジを与え、
    ATKplayer += power; // その数値分充電する。
    $("#HPenemy").text("敵HP:" + HPenemy);
    $("#ATKplayer").text("全蓄積エネルギー:" + ATKplayer);
    $("#message1").text("敵に " + power + " のダメージを与えた");
    $("#message2").text("エネルギーを " + power + " 充電した");

    main();
  }
}

// 特殊攻撃
function special1(){
  if (HPplayer > 0 && HPenemy > 0 && stage <= 10){

    MessageClear();

    HPenemy -= ATKplayer; // 全蓄積エネルギーを放電する
    $("#HPenemy").text("敵HP:" + HPenemy);
    $("#ATKplayer").text("全蓄積エネルギー:" + 0);
    $("#message1").text("蓄積されていた全エネルギーを放電した");
    $("#message2").text("敵に " + ATKplayer + " のダメージを与えた");
    ATKplayer = 0; // プレイヤーの攻撃力を初期化

    main();
  }
}

function special2(){
  if (HPplayer > 0 && HPenemy > 0 && stage <= 10){

    MessageClear();

    HPplayer += ATKplayer; // エネルギーを使って回復する
    $("#HPplayer").text("HP:" + HPplayer);
    $("#ATKplayer").text("全蓄積エネルギー:" + 0);
    $("#message1").text("蓄積されていた全エネルギーを吸収した");
    $("#message2").text("プレイヤーはHPを " + ATKplayer + " 回復した");
    ATKplayer = 0; // プレイヤーの攻撃力を初期化

    main();
  }
}

// 通常攻撃
function two() { NormalAttack(2); }
function three() { NormalAttack(3); }

function five(){
  if (stage >= 3) {
    NormalAttack(5);
  } else {
    alert("ステージ数3未満では、この技を選択することができません。");
  }
}

function seven(){
  if (stage >= 5){
    NormalAttack(7);
  } else {
    alert("ステージ数5未満では、この技を選択することができません。");
  }
}

(解説) 第10講において、特殊攻撃を実装したが、そのバリエーションを増やしたい。
ここで追加する回復技は、第10講で実装したエネルギーを、HPの回復に転用する。
また、次の準備の為に、ターン開始時にメッセージをクリアする関数を追加した。
これは、今後にメッセージの矛盾が起きないようにする為である。




第13講. 特殊攻撃(毒攻撃)の追加

jsrpg013.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta name="robots" content="noindex,nofollow">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScriptによるRPG制作・第13講</title>
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="jsrpg013.js"></script>
</head>
<body bgcolor="#c0c0c0">
<center>
<h1>JavaScriptによるRPG制作・第13講</h1>

<form>
<table border="0" frame="void" rules="none">
<tr>
<td align="center"><span id="stage">ステージ:1</span></td>
<td align="center"><span id="HPenemy">敵HP:10</span></td>
<td align="center"><span>通常攻撃:</span></td>
</tr>
<tr>
<td align="center"><span id="HPplayer">HP:10</span></td>
<td align="center"><span id="ATKplayer">全蓄積エネルギー:0</span></td>
<td align="center"><span>
<input type="button" value="2ダメージを与え、2充電する" onclick="two()">
</span></td>
</tr>
<tr>

<td align="center" colspan="2">
<span id="poison" style="background-color:#c0c0c0;color:#800080;"> </span>
</td>

<td align="center"><span>
<input type="button" value="3ダメージを与え、3充電する" onclick="three()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id=""> </span></td>
<td align="center"><span>
<input type="button" value="5ダメージを与え、5充電する" onclick="five()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message1"> </span></td>
<td align="center"><span>
<input type="button" value="7ダメージを与え、7充電する" onclick="seven()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message2"> </span></td>
<td align="center"><span>
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message3"> </span></td>
<td align="center"><span>特殊攻撃:</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message4"> </span></td>
<td align="center"><span>
<input type="button" value="全蓄積エネルギーを放電する" onclick="special1()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="winlose"> </span></td>
<td align="center"><span>
<input type="button" value="エネルギーを使って回復する" onclick="special2()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="ending"> </span></td>

<td align="center"><span>
<input type="button" value="敵に毒を与え、毒状態にする" onclick="special3()">
</span></td>

</tr>
<tr>
<td align="center" colspan="2"><span id="score"> </span></td>
<td align="center"><span> </span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="next"> </span></td>
<td align="center"><span>
<input type="button" value="次のステージへ" onclick="NextStage()">
</span></td>
</tr>
</table>
</form>

</center>
</body>
</html>

jsrpg013.js

var HPenemy = 10;
var HPplayer = 10;
var ATKenemy = 0; // 敵の攻撃力を初期化
var ATKplayer = 0; // プレイヤーの攻撃力を初期化
var stage = 1; // ステージ数
var power; // 技の威力

var PoisonCounter = 0; // ポイズンカウンター

function ATKcalc(){ // 敵の攻撃力を計算する関数
  ATKenemy = 0; // 敵の攻撃力を初期化
  if (HPenemy % 2 == 0) {
    ATKenemy += 2;
  }
  // 敵のHPが2の倍数の時、敵の攻撃力が2上昇する。
  if (HPenemy % 3 == 0) {
    ATKenemy += 3;
  }
  // 敵のHPが3の倍数の時、敵の攻撃力が3上昇する。

  if (stage >= 3 && HPenemy % 5 == 0) {
    ATKenemy += 5;
  }
  // ステージ3以降、敵のHPが5の倍数の時、敵の攻撃力が5上昇する。
  if (stage >= 5 && HPenemy % 7 == 0) {
    ATKenemy += 7;
  }
  // ステージ5以降、敵のHPが7の倍数の時、敵の攻撃力が7上昇する。

}

function MessageClear(){ // メッセージをクリアする関数
  $("#message1").text("");
  $("#message2").text("");
  $("#message3").text("");
  $("#message4").text("");
}

function NextStage(){ // 勝利後のイベント処理をする関数
  if (HPenemy <= 0) {  // 敵のHPが0以下ならば、勝利。

    PoisonCounter = 0; // ポイズンカウンターを0にする
    PoisonState();

    if (stage < 10) {
      stage += 1; // 次のステージへ
      HPenemy = stage * 10; // 次のステージの敵のHP
      HPplayer += stage * 10; // HPを加算
      ATKplayer = 0; // プレイヤーの攻撃力を初期化
      $("#stage").text("ステージ:" + stage);
      $("#HPenemy").text("敵HP:" + HPenemy);
      $("#HPplayer").text("HP:" + HPplayer);
      $("#ATKplayer").text("全蓄積エネルギー:" + ATKplayer);
      // 現在の全蓄積エネルギー
      $("#winlose").text("");
    } else {
      $("#ending").text("祝!ゲームクリア");
      $("#score").text("スコア:" + HPplayer);
      // エンディング
    }
  }
  $("#next").text("");
}

function PoisonState(){ // 毒状態を表示する関数
  if (PoisonCounter > 0) {
    $("#poison").text("敵は、毒状態(あと " + PoisonCounter + " ターン)");
    // ポイズンカウンターが0以外のとき、敵のHPが残っていれば、毒状態であることを表示する。
  } else {
    $("#poison").text("");
    document.bgColor = "#c0c0c0"; // 背景を銀色に戻す
  }
}

// メイン関数
function main(){
  if (HPenemy <= 0) { // 敵のHPが0以下ならば、勝利。
    $("#HPenemy").text("敵HP:0");
    $("#winlose").text("You win!"); // 勝利メッセージ
    $("#next").text("「次のステージへ」ボタンを押してください。");
  } else {

    ATKcalc();
    HPplayer -= ATKenemy; // 敵の攻撃によるダメージを受ける。
    $("#HPplayer").text("HP:" + HPplayer);
    $("#message3").text("プレイヤーは " + ATKenemy + " のダメージを受けた");

    if (PoisonCounter > 0) {
      HPenemy -= ATKenemy; // ポイズンカウンターが0以外の場合は、敵は毒によるダメージを受ける。
      $("#HPenemy").text("敵HP:" + HPenemy);
      $("#message4").text("敵は毒により " + ATKenemy + " のダメージを受けた");
      // 敵が毒によるダメージを受けた場合のメッセージ
      PoisonCounter -= 1; // ポイズンカウンターを1減らす
    } else {
      HPenemy += ATKenemy; // ポイズンカウンターが0の場合は敵はその数値分HPを回復する。
      $("#HPenemy").text("敵HP:" + HPenemy);
      $("#message4").text("敵はHPを " + ATKenemy + " 回復した");
      // 敵がHPを回復した場合のメッセージ
    }
    if (HPenemy <= 0) {  // 敵のHPが0以下ならば、勝利。
      $("#HPenemy").text("敵HP:0");
      $("#winlose").text("You win!"); // 勝利メッセージ
      $("#next").text("「次のステージへ」ボタンを押してください。");
    }
    // 敵が毒のダメージで力尽きた場合にも、
    // 戦闘を継続させずに、次のステージへ行く為の処理

    if (HPplayer <= 0) {  // プレイヤーのHPが0以下ならば、敗北。
      $("#HPplayer").text("HP:0");
      $("#winlose").text("You lose!"); // 敗北メッセージ
    }

  }
}

// 通常攻撃(コア)
function NormalAttack(power){
  if (HPplayer > 0 && HPenemy > 0 && stage <= 10){
    MessageClear();

    PoisonState();

    HPenemy -= power;  // 技の威力だけダメ―ジを与え、
    ATKplayer += power; // その数値分充電する。
    $("#HPenemy").text("敵HP:" + HPenemy);
    $("#ATKplayer").text("全蓄積エネルギー:" + ATKplayer);
    $("#message1").text("敵に " + power + " のダメージを与えた");
    $("#message2").text("エネルギーを " + power + " 充電した");

    main();
  }
}

// 特殊攻撃
function special1(){
  if (HPplayer > 0 && HPenemy > 0 && stage <= 10){
    MessageClear();

    PoisonState();

    HPenemy -= ATKplayer; // 全蓄積エネルギーを放電する
    $("#HPenemy").text("敵HP:" + HPenemy);
    $("#ATKplayer").text("全蓄積エネルギー:" + 0);
    $("#message1").text("蓄積されていた全エネルギーを放電した");
    $("#message2").text("敵に " + ATKplayer + " のダメージを与えた");
    ATKplayer = 0; // プレイヤーの攻撃力を初期化

    main();
  }
}

function special2(){
  if (HPplayer > 0 && HPenemy > 0 && stage <= 10){
    MessageClear();

    PoisonState();

    HPplayer += ATKplayer; // エネルギーを使って回復する
    $("#HPplayer").text("HP:" + HPplayer);
    $("#ATKplayer").text("全蓄積エネルギー:" + 0);
    $("#message1").text("蓄積されていた全エネルギーを吸収した");
    $("#message2").text("プレイヤーはHPを " + ATKplayer + " 回復した");
    ATKplayer = 0; // プレイヤーの攻撃力を初期化

    main();
  }
}

function special3(){
  if (HPplayer > 0 && HPenemy > 0 && stage <= 10) {
    MessageClear();

    PoisonState();

    PoisonCounter = stage + 1; // ポイズンカウンターにはステージ数+1を代入
    $("#poison").text("敵は、毒状態(あと " + PoisonCounter + " ターン)");
    $("#message1").text("敵を毒状態にした");
    document.bgColor = "#800080"; // 背景を紫色にする

    main();
  }
}

// 通常攻撃
function two() { NormalAttack(2); }
function three() { NormalAttack(3); }

function five(){
  if (stage >= 3) {
    NormalAttack(5);
  } else {
    alert("ステージ数3未満では、この技を選択することができません。");
  }
}

function seven(){
  if (stage >= 5){
    NormalAttack(7);
  } else {
    alert("ステージ数5未満では、この技を選択することができません。");
  }
}

(解説) 第10講、第12講において、特殊攻撃を実装したが、
これに加えてさらに、毒攻撃を追加する。
毒攻撃は、敵を毒状態にする(背景色が紫になる)が、
数ターン経過後に自然治癒する(背景色が元に戻る)ものとする。
ステージが進むにつれて、敵のHPが多くなるので、毒状態はポイズンカウンターで表され、
ステージ数プラス1(ステージ1だと、すぐに元に戻ってしまうので)ターンとした。
第11講で、敵はプレイヤーが受けたダメージ分HPを回復するようになったが、
毒状態の時は、回復せずに、さらにその数値分のダメージを受けるものとする。
つまり、毒によるダメージで敵のHPが尽きる可能性があるので、その場合も、
戦闘を継続させずに、次のステージへ行く為の処理がなされなければならない。




第14講. 最終ステージ(ボス面)の追加

jsrpg014.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta name="robots" content="noindex,nofollow">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScriptによるRPG制作・第14講</title>
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="jsrpg014.js"></script>
</head>
<body bgcolor="#c0c0c0">
<center>
<h1>JavaScriptによるRPG制作・第14講</h1>

<form>
<table border="0" frame="void" rules="none">
<tr>
<td align="center"><span id="stage">ステージ:1</span></td>
<td align="center"><span id="HPenemy">敵HP:10</span></td>
<td align="center"><span>通常攻撃:</span></td>

<td align="center"><span>
<input type="button" value="13ダメージを与え、13充電する" onclick="thirteen()">
</span></td>

</tr>
<tr>
<td align="center"><span id="HPplayer">HP:10</span></td>
<td align="center"><span id="ATKplayer">全蓄積エネルギー:0</span></td>
<td align="center"><span>
<input type="button" value="2ダメージを与え、2充電する" onclick="two()">
</span></td>

<td align="center"><span>
<input type="button" value="17ダメージを与え、17充電する" onclick="seventeen()">
</span></td>

</tr>
<tr>
<td align="center" colspan="2">
<span id="poison" style="background-color:#c0c0c0;color:#800080;"> </span>
</td>
<td align="center"><span>
<input type="button" value="3ダメージを与え、3充電する" onclick="three()">
</span></td>

<td align="center"><span>
<input type="button" value="19ダメージを与え、19充電する" onclick="nineteen()">
</span></td>

</tr>
<tr>
<td align="center" colspan="2"><span id=""> </span></td>
<td align="center"><span>
<input type="button" value="5ダメージを与え、5充電する" onclick="five()">
</span></td>

<td align="center"><span>
<input type="button" value="23ダメージを与え、23充電する" onclick="twentythree()">
</span></td>

</tr>
<tr>
<td align="center" colspan="2"><span id="message1"> </span></td>
<td align="center"><span>
<input type="button" value="7ダメージを与え、7充電する" onclick="seven()">
</span></td>

<td align="center"><span>
<input type="button" value="29ダメージを与え、29充電する" onclick="twentynine()">
</span></td>

</tr>
<tr>
<td align="center" colspan="2"><span id="message2"> </span></td>

<td align="center"><span>
<input type="button" value="11ダメージを与え、11充電する" onclick="eleven()">
</span></td>
<td align="center"><span>
<input type="button" value="31ダメージを与え、31充電する" onclick="thirtyone()">
</span></td>

</tr>
<tr>
<td align="center" colspan="2"><span id="message3"> </span></td>
<td align="center" colspan="2"><span> <hr> </span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message4"> </span></td>
<td align="center"><span>特殊攻撃:</span></td>
<td align="center"><span>
<input type="button" value="敵に毒を与え、毒状態にする" onclick="special3()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="winlose"> </span></td>
<td align="center"><span>
<input type="button" value="全蓄積エネルギーを放電する" onclick="special1()">
</span></td>
<td align="center"><span> </span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="ending"> </span></td>
<td align="center"><span>
<input type="button" value="エネルギーを使って回復する" onclick="special2()">
</span></td>
<td align="center"><span> </span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="score"> </span></td>
<td align="center" colspan="2"><span> <hr> </span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="next"> </span></td>
<td align="center" colspan="2"><span>
<input type="button" value="次のステージへ" onclick="NextStage()">
</span></td>
</tr>

</table>
</form>

</center>
</body>
</html>

jsrpg014.js

var HPenemy = 10;
var HPplayer = 10;
var ATKenemy = 0; // 敵の攻撃力を初期化
var ATKplayer = 0; // プレイヤーの攻撃力を初期化
var stage = 1; // ステージ数
var power; // 技の威力
var PoisonCounter = 0; // ポイズンカウンター

function ATKcalc(){ // 敵の攻撃力を計算する関数
  ATKenemy = 0; // 敵の攻撃力を初期化
  if (HPenemy % 2 == 0) {
    ATKenemy += 2;
  }
  // 敵のHPが2の倍数の時、敵の攻撃力が2上昇する。
  if (HPenemy % 3 == 0) {
    ATKenemy += 3;
  }
  // 敵のHPが3の倍数の時、敵の攻撃力が3上昇する。

  if (stage >= 3 && HPenemy % 5 == 0) {
    ATKenemy += 5;
  }
  // ステージ3以降、敵のHPが5の倍数の時、敵の攻撃力が5上昇する。
  if (stage >= 5 && HPenemy % 7 == 0) {
    ATKenemy += 7;
  }
  // ステージ5以降、敵のHPが7の倍数の時、敵の攻撃力が7上昇する。

  if (stage > 10 && HPenemy % 11 == 0) {
    ATKenemy += 11;
  }
  // 最終ボス戦の時、敵のHPが11の倍数の時、敵の攻撃力が11上昇する。
  if (stage > 10 && HPenemy % 13 == 0) {
    ATKenemy += 13;
  }
  // 最終ボス戦の時、敵のHPが13の倍数の時、敵の攻撃力が13上昇する。
  if (stage > 10 && HPenemy % 17 == 0) {
    ATKenemy += 17;
  }
  // 最終ボス戦の時、敵のHPが17の倍数の時、敵の攻撃力が17上昇する。
  if (stage > 10 && HPenemy % 19 == 0) {
    ATKenemy += 19;
  }
  // 最終ボス戦の時、敵のHPが19の倍数の時、敵の攻撃力が19上昇する。

  if (stage > 10 && HPenemy % 23 == 0) {
    ATKenemy += 23;
  }
  // 最終ボス戦時のみ、敵のHPが23の倍数の時、敵の攻撃力が23上昇する。
  if (stage > 10 && HPenemy % 29 == 0) {
    ATKenemy += 29;
  }
  // 最終ボス戦時のみ、敵のHPが29の倍数の時、敵の攻撃力が29上昇する。
  if (stage > 10 && HPenemy % 31 == 0) {
    ATKenemy += 31;
  }
  // 最終ボス戦時のみ、敵のHPが31の倍数の時、敵の攻撃力が31上昇する。

}

function MessageClear(){ // メッセージをクリアする関数
  $("#message1").text("");
  $("#message2").text("");
  $("#message3").text("");
  $("#message4").text("");
}

function NextStage(){ // 勝利後のイベント処理をする関数
  if (HPenemy <= 0) {  // 敵のHPが0以下ならば、勝利。

      $("#winlose").text("");
      ATKplayer = 0; // プレイヤーの攻撃力を初期化
      $("#ATKplayer").text("全蓄積エネルギー:" + ATKplayer);
      // 現在の全蓄積エネルギー

      PoisonCounter = 0; // ポイズンカウンターを0にする
      PoisonState();

    if (stage < 10) {
      stage += 1; // 次のステージへ
      HPenemy = stage * 10; // 次のステージの敵のHP
      HPplayer += stage * 10; // HPを加算
      $("#stage").text("ステージ:" + stage);
      $("#HPenemy").text("敵HP:" + HPenemy);
      $("#HPplayer").text("HP:" + HPplayer);

    } else if (stage == 10) {
      stage = 100; // 最終ボス戦のステージへ
      HPenemy = 1000; // 最終ボスのHP
      $("#stage").text("最終ボス戦");
      $("#HPenemy").text("敵HP:" + HPenemy);

    } else {
      $("#ending").text("祝!ゲームクリア");
      $("#score").text("スコア:" + HPplayer);
      // エンディング
    }
  }
  $("#next").text("");
}

function PoisonState(){ // 毒状態を表示する関数
  if (PoisonCounter > 0) {
    $("#poison").text("敵は、毒状態(あと " + PoisonCounter + " ターン)");
    // ポイズンカウンターが0以外のとき、敵のHPが残っていれば、毒状態であることを表示する。
  } else {
    $("#poison").text("");
    document.bgColor = "#c0c0c0"; // 背景を銀色に戻す
  }
}

// メイン関数
function main(){
  if (HPenemy <= 0) { // 敵のHPが0以下ならば、勝利。
    $("#HPenemy").text("敵HP:0");
    $("#winlose").text("You win!"); // 勝利メッセージ
    $("#next").text("「次のステージへ」ボタンを押してください。");
  } else {

    ATKcalc();
    HPplayer -= ATKenemy; // 敵の攻撃によるダメージを受ける。
    $("#HPplayer").text("HP:" + HPplayer);
    $("#message3").text("プレイヤーは " + ATKenemy + " のダメージを受けた");

    if (PoisonCounter > 0) {
      HPenemy -= ATKenemy; // ポイズンカウンターが0以外の場合は、敵は毒によるダメージを受ける。
      $("#HPenemy").text("敵HP:" + HPenemy);
      $("#message4").text("敵は毒により " + ATKenemy + " のダメージを受けた");
      // 敵が毒によるダメージを受けた場合のメッセージ
      PoisonCounter -= 1; // ポイズンカウンターを1減らす
    } else {
      HPenemy += ATKenemy; // ポイズンカウンターが0の場合は敵はその数値分HPを回復する。
      $("#HPenemy").text("敵HP:" + HPenemy);
      $("#message4").text("敵はHPを " + ATKenemy + " 回復した");
      // 敵がHPを回復した場合のメッセージ
    }
    if (HPenemy <= 0) {  // 敵のHPが0以下ならば、勝利。
      $("#HPenemy").text("敵HP:0");
      $("#winlose").text("You win!"); // 勝利メッセージ
      $("#next").text("「次のステージへ」ボタンを押してください。");
    }
    // 敵が毒のダメージで力尽きた場合にも、
    // 戦闘を継続させずに、次のステージへ行く為の処理

    if (HPplayer <= 0) {  // プレイヤーのHPが0以下ならば、敗北。
      $("#HPplayer").text("HP:0");
      $("#winlose").text("You lose!"); // 敗北メッセージ
    }

  }
}

// 通常攻撃(コア)
function NormalAttack(power){

  if (HPplayer > 0 && HPenemy > 0 && stage <= 100){

    MessageClear();
    PoisonState();

    HPenemy -= power;  // 技の威力だけダメ―ジを与え、
    ATKplayer += power; // その数値分充電する。
    $("#HPenemy").text("敵HP:" + HPenemy);
    $("#ATKplayer").text("全蓄積エネルギー:" + ATKplayer);
    $("#message1").text("敵に " + power + " のダメージを与えた");
    $("#message2").text("エネルギーを " + power + " 充電した");

    main();
  }
}

// 特殊攻撃
function special1(){

  if (HPplayer > 0 && HPenemy > 0 && stage <= 100){

    MessageClear();
    PoisonState();

    HPenemy -= ATKplayer; // 全蓄積エネルギーを放電する
    $("#HPenemy").text("敵HP:" + HPenemy);
    $("#ATKplayer").text("全蓄積エネルギー:" + 0);
    $("#message1").text("蓄積されていた全エネルギーを放電した");
    $("#message2").text("敵に " + ATKplayer + " のダメージを与えた");
    ATKplayer = 0; // プレイヤーの攻撃力を初期化

    main();
  }
}

function special2(){

  if (HPplayer > 0 && HPenemy > 0 && stage <= 100){

    MessageClear();
    PoisonState();

    HPplayer += ATKplayer; // エネルギーを使って回復する
    $("#HPplayer").text("HP:" + HPplayer);
    $("#ATKplayer").text("全蓄積エネルギー:" + 0);
    $("#message1").text("蓄積されていた全エネルギーを吸収した");
    $("#message2").text("プレイヤーはHPを " + ATKplayer + " 回復した");
    ATKplayer = 0; // プレイヤーの攻撃力を初期化

    main();
  }
}

function special3(){

  if (HPplayer > 0 && HPenemy > 0 && stage <= 100) {

    MessageClear();
    PoisonState();

    PoisonCounter = stage + 1; // ポイズンカウンターにはステージ数+1を代入
    $("#poison").text("敵は、毒状態(あと " + PoisonCounter + " ターン)");
    $("#message1").text("敵を毒状態にした");
    document.bgColor = "#800080"; // 背景を紫色にする

    main();
  }
}

// 通常攻撃
function two() { NormalAttack(2); }
function three() { NormalAttack(3); }

function five(){
  if (stage >= 3) {
    NormalAttack(5);
  } else {
    alert("ステージ数3未満では、この技を選択することができません。");
  }
}

function seven(){
  if (stage >= 5){
    NormalAttack(7);
  } else {
    alert("ステージ数5未満では、この技を選択することができません。");
  }
}

function eleven(){
  if (stage > 10){
    NormalAttack(11);
  } else {
    alert("最終ボス戦以外では、この技を選択することができません。");
  }
}

function thirteen(){
  if (stage > 10){
    NormalAttack(13);
  } else {
    alert("最終ボス戦以外では、この技を選択することができません。");
  }
}

function seventeen(){
  if (stage > 10){
    NormalAttack(17);
  } else {
    alert("最終ボス戦以外では、この技を選択することができません。");
  }
}

function nineteen(){
  if (stage > 10){
    NormalAttack(19);
  } else {
    alert("最終ボス戦以外では、この技を選択することができません。");
  }
}

function twentythree(){
  if (stage > 10){
    NormalAttack(23);
  } else {
    alert("最終ボス戦以外では、この技を選択することができません。");
  }
}

function twentynine(){
  if (stage > 10){
    NormalAttack(29);
  } else {
    alert("最終ボス戦以外では、この技を選択することができません。");
  }
}

function thirtyone(){
  if (stage > 10){
    NormalAttack(31);
  } else {
    alert("最終ボス戦以外では、この技を選択することができません。");
  }
}

(解説) 最終ステージは、プログラム内では、ステージ100という扱いだが、
NextStage関数内のif-else系の構文において、「最終ボス戦」等と表示されるように
jQueryでステージ欄の文字を置換した。最終ステージでは、最終ボスのHPが1000と多いので、
プレイヤー側・敵側双方共に、通常攻撃の威力が大きい技が増えて、技の量が多いので、
HTML側も整理した。もし、ボス戦のみデバッグしたい場合は、変数宣言時の初期化のところで、
敵のHPを1000、ステージ数を100、プレイヤーのHPは500等として、プログラムを変更すればよい。




第15講. ダメージ半減技の追加

jsrpg015.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta name="robots" content="noindex,nofollow">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScriptによるRPG制作・第15講</title>
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="jsrpg015.js"></script>
</head>
<body bgcolor="#c0c0c0">
<center>
<h1>JavaScriptによるRPG制作・第15講</h1>

<form>
<table border="0" frame="void" rules="none">
<tr>
<td align="center"><span id="stage">ステージ:1</span></td>
<td align="center"><span id="HPenemy">敵HP:10</span></td>
<td align="center"><span>通常攻撃:</span></td>
<td align="center"><span>
<input type="button" value="13ダメージを与え、13充電する" onclick="thirteen()">
</span></td>
</tr>
<tr>
<td align="center"><span id="HPplayer">HP:10</span></td>
<td align="center"><span id="ATKplayer">全蓄積エネルギー:0</span></td>
<td align="center"><span>
<input type="button" value="2ダメージを与え、2充電する" onclick="two()">
</span></td>
<td align="center"><span>
<input type="button" value="17ダメージを与え、17充電する" onclick="seventeen()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2">
<span id="poison" style="background-color:#c0c0c0;color:#800080;"> </span>
</td>
<td align="center"><span>
<input type="button" value="3ダメージを与え、3充電する" onclick="three()">
</span></td>
<td align="center"><span>
<input type="button" value="19ダメージを与え、19充電する" onclick="nineteen()">
</span></td>
</tr>
<tr>

<td align="center" colspan="2">
<span id="barrier" style="background-color:#c0c0c0;color:#ff0000;"> </span>
</td>

<td align="center"><span>
<input type="button" value="5ダメージを与え、5充電する" onclick="five()">
</span></td>
<td align="center"><span>
<input type="button" value="23ダメージを与え、23充電する" onclick="twentythree()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message1"> </span></td>
<td align="center"><span>
<input type="button" value="7ダメージを与え、7充電する" onclick="seven()">
</span></td>
<td align="center"><span>
<input type="button" value="29ダメージを与え、29充電する" onclick="twentynine()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message2"> </span></td>
<td align="center"><span>
<input type="button" value="11ダメージを与え、11充電する" onclick="eleven()">
</span></td>
<td align="center"><span>
<input type="button" value="31ダメージを与え、31充電する" onclick="thirtyone()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message3"> </span></td>
<td align="center" colspan="2"><span> <hr> </span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message4"> </span></td>
<td align="center"><span>特殊攻撃:</span></td>
<td align="center"><span>
<input type="button" value="敵に毒を与え、毒状態にする" onclick="special3()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="winlose"> </span></td>
<td align="center"><span>
<input type="button" value="全蓄積エネルギーを放電する" onclick="special1()">
</span></td>

<td align="center"><span>
<input type="button" value="ダメージを半減させる結界を発動する" onclick="special4()">
</span></td>

</tr>
<tr>
<td align="center" colspan="2"><span id="ending"> </span></td>
<td align="center"><span>
<input type="button" value="エネルギーを使って回復する" onclick="special2()">
</span></td>
<td align="center"><span> </span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="score"> </span></td>
<td align="center" colspan="2"><span> <hr> </span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="next"> </span></td>
<td align="center" colspan="2"><span>
<input type="button" value="次のステージへ" onclick="NextStage()">
</span></td>
</tr>
</table>
</form>

</center>
</body>
</html>

jsrpg015.js

var HPenemy = 10;
var HPplayer = 10;
var ATKenemy = 0; // 敵の攻撃力を初期化
var ATKplayer = 0; // プレイヤーの攻撃力を初期化
var stage = 1; // ステージ数
var power; // 技の威力
var PoisonCounter = 0; // ポイズンカウンター

var BarrierCounter = 0; // バリアカウンター

function ATKcalc(){ // 敵の攻撃力を計算する関数
  ATKenemy = 0; // 敵の攻撃力を初期化
  if (HPenemy % 2 == 0) {
    ATKenemy += 2;
  }
  // 敵のHPが2の倍数の時、敵の攻撃力が2上昇する。
  if (HPenemy % 3 == 0) {
    ATKenemy += 3;
  }
  // 敵のHPが3の倍数の時、敵の攻撃力が3上昇する。

  if (stage >= 3 && HPenemy % 5 == 0) {
    ATKenemy += 5;
  }
  // ステージ3以降、敵のHPが5の倍数の時、敵の攻撃力が5上昇する。
  if (stage >= 5 && HPenemy % 7 == 0) {
    ATKenemy += 7;
  }
  // ステージ5以降、敵のHPが7の倍数の時、敵の攻撃力が7上昇する。

  if (stage > 10 && HPenemy % 11 == 0) {
    ATKenemy += 11;
  }
  // 最終ボス戦の時、敵のHPが11の倍数の時、敵の攻撃力が11上昇する。
  if (stage > 10 && HPenemy % 13 == 0) {
    ATKenemy += 13;
  }
  // 最終ボス戦の時、敵のHPが13の倍数の時、敵の攻撃力が13上昇する。
  if (stage > 10 && HPenemy % 17 == 0) {
    ATKenemy += 17;
  }
  // 最終ボス戦の時、敵のHPが17の倍数の時、敵の攻撃力が17上昇する。
  if (stage > 10 && HPenemy % 19 == 0) {
    ATKenemy += 19;
  }
  // 最終ボス戦の時、敵のHPが19の倍数の時、敵の攻撃力が19上昇する。

  if (stage > 10 && HPenemy % 23 == 0) {
    ATKenemy += 23;
  }
  // 最終ボス戦時のみ、敵のHPが23の倍数の時、敵の攻撃力が23上昇する。
  if (stage > 10 && HPenemy % 29 == 0) {
    ATKenemy += 29;
  }
  // 最終ボス戦時のみ、敵のHPが29の倍数の時、敵の攻撃力が29上昇する。
  if (stage > 10 && HPenemy % 31 == 0) {
    ATKenemy += 31;
  }
  // 最終ボス戦時のみ、敵のHPが31の倍数の時、敵の攻撃力が31上昇する。
}

function BarrierState(){ // 結界を表示する関数
  if (BarrierCounter > 0) {
    $("#barrier").text("結界が発動中(あと " + BarrierCounter + " ターン)");
    // バリアカウンターが0以外のとき、結界が発動中であることを表示する。
  } else {
    $("#barrier").text("");
  }
}

function MessageClear(){ // メッセージをクリアする関数
  $("#message1").text("");
  $("#message2").text("");
  $("#message3").text("");
  $("#message4").text("");
  if (BarrierCounter == 0 && PoisonCounter == 0) {
    document.bgColor = "#c0c0c0";
    // ポイズンカウンターとバリアカウンターが
    // 共に0の場合は、背景を銀色に戻す。
  }
}

function NextStage(){ // 勝利後のイベント処理をする関数
  if (HPenemy <= 0) {  // 敵のHPが0以下ならば、勝利。

      $("#winlose").text("");
      ATKplayer = 0; // プレイヤーの攻撃力を初期化
      $("#ATKplayer").text("全蓄積エネルギー:" + ATKplayer);
      // 現在の全蓄積エネルギー
      PoisonCounter = 0; // ポイズンカウンターを0にする
      PoisonState();

      BarrierCounter = 0; // バリアカウンターを0にする
      BarrierState();
      document.bgColor = "#c0c0c0";

    if (stage < 10) {
      stage += 1; // 次のステージへ
      HPenemy = stage * 10; // 次のステージの敵のHP
      HPplayer += stage * 10; // HPを加算
      $("#stage").text("ステージ:" + stage);
      $("#HPenemy").text("敵HP:" + HPenemy);
      $("#HPplayer").text("HP:" + HPplayer);

    } else if (stage == 10) {
      stage = 100; // 最終ボス戦のステージへ
      HPenemy = 1000; // 最終ボスのHP
      $("#stage").text("最終ボス戦");
      $("#HPenemy").text("敵HP:" + HPenemy);

    } else {
      $("#ending").text("祝!ゲームクリア");
      $("#score").text("スコア:" + HPplayer);
      // エンディング
    }
  }
  $("#next").text("");
}

function PoisonState(){ // 毒状態を表示する関数
  if (PoisonCounter > 0) {
    $("#poison").text("敵は、毒状態(あと " + PoisonCounter + " ターン)");
    // ポイズンカウンターが0以外のとき、敵のHPが残っていれば、毒状態であることを表示する。
  } else {
    $("#poison").text("");
  }
}

// メイン関数
function main(){
  if (HPenemy <= 0) { // 敵のHPが0以下ならば、勝利。
    $("#HPenemy").text("敵HP:0");
    $("#winlose").text("You win!"); // 勝利メッセージ
    $("#next").text("「次のステージへ」ボタンを押してください。");
  } else {
    ATKcalc();

    if (BarrierCounter > 0) {
      ATKenemy =  parseInt( ATKenemy / 2); // 敵の攻撃力を半減させる。
      // JavaScriptでは、自動で実数化されてしまうので、整数化する。
      BarrierCounter -= 1; // バリアカウンターを1減らす
    }

    HPplayer -= ATKenemy; // 敵の攻撃によるダメージを受ける。
    $("#HPplayer").text("HP:" + HPplayer);
    $("#message3").text("プレイヤーは " + ATKenemy + " のダメージを受けた");

    if (PoisonCounter > 0) {
      HPenemy -= ATKenemy; // ポイズンカウンターが0以外の場合は、敵は毒によるダメージを受ける。
      $("#HPenemy").text("敵HP:" + HPenemy);
      $("#message4").text("敵は毒により " + ATKenemy + " のダメージを受けた");
      // 敵が毒によるダメージを受けた場合のメッセージ
      PoisonCounter -= 1; // ポイズンカウンターを1減らす
    } else {
      HPenemy += ATKenemy; // ポイズンカウンターが0の場合は敵はその数値分HPを回復する。
      $("#HPenemy").text("敵HP:" + HPenemy);
      $("#message4").text("敵はHPを " + ATKenemy + " 回復した");
      // 敵がHPを回復した場合のメッセージ
    }
    if (HPenemy <= 0) {  // 敵のHPが0以下ならば、勝利。
      $("#HPenemy").text("敵HP:0");
      $("#winlose").text("You win!"); // 勝利メッセージ
      $("#next").text("「次のステージへ」ボタンを押してください。");
    }
    // 敵が毒のダメージで力尽きた場合にも、
    // 戦闘を継続させずに、次のステージへ行く為の処理

    if (HPplayer <= 0) {  // プレイヤーのHPが0以下ならば、敗北。
      $("#HPplayer").text("HP:0");
      $("#winlose").text("You lose!"); // 敗北メッセージ
    }

  }
}

// 通常攻撃(コア)
function NormalAttack(power){
  if (HPplayer > 0 && HPenemy > 0 && stage <= 100){
    MessageClear();
    PoisonState();

    BarrierState();

    HPenemy -= power;  // 技の威力だけダメ―ジを与え、
    ATKplayer += power; // その数値分充電する。
    $("#HPenemy").text("敵HP:" + HPenemy);
    $("#ATKplayer").text("全蓄積エネルギー:" + ATKplayer);
    $("#message1").text("敵に " + power + " のダメージを与えた");
    $("#message2").text("エネルギーを " + power + " 充電した");

    main();
  }
}

// 特殊攻撃
function special1(){
  if (HPplayer > 0 && HPenemy > 0 && stage <= 100){
    MessageClear();
    PoisonState();

    BarrierState();

    HPenemy -= ATKplayer; // 全蓄積エネルギーを放電する
    $("#HPenemy").text("敵HP:" + HPenemy);
    $("#ATKplayer").text("全蓄積エネルギー:" + 0);
    $("#message1").text("蓄積されていた全エネルギーを放電した");
    $("#message2").text("敵に " + ATKplayer + " のダメージを与えた");
    ATKplayer = 0; // プレイヤーの攻撃力を初期化

    main();
  }
}

function special2(){
  if (HPplayer > 0 && HPenemy > 0 && stage <= 100){
    MessageClear();
    PoisonState();

    BarrierState();

    HPplayer += ATKplayer; // エネルギーを使って回復する
    $("#HPplayer").text("HP:" + HPplayer);
    $("#ATKplayer").text("全蓄積エネルギー:" + 0);
    $("#message1").text("蓄積されていた全エネルギーを吸収した");
    $("#message2").text("プレイヤーはHPを " + ATKplayer + " 回復した");
    ATKplayer = 0; // プレイヤーの攻撃力を初期化

    main();
  }
}

function special3(){
  if (HPplayer > 0 && HPenemy > 0 && stage <= 100) {
    MessageClear();
    PoisonState();

    BarrierState();

    PoisonCounter = stage + 1; // ポイズンカウンターにはステージ数+1を代入
    $("#poison").text("敵は、毒状態(あと " + PoisonCounter + " ターン)");
    $("#message1").text("敵を毒状態にした");
    document.bgColor = "#800080"; // 背景を紫色にする

    main();
  }
}

function special4(){
  if (HPplayer > 0 && HPenemy > 0 && stage <= 100) {
    MessageClear();
    PoisonState();

    BarrierState();

    BarrierCounter = stage + 1; // バリアカウンターにはステージ数+1を代入
    $("#barrier").text("結界が発動中(あと " + BarrierCounter + " ターン)");
    $("#message1").text("ダメージを半減させる結界を発動した");
    document.bgColor = "#ff0000"; // 背景を赤色にする

    main();
  }
}

// 通常攻撃
function two() { NormalAttack(2); }
function three() { NormalAttack(3); }

function five(){
  if (stage >= 3) {
    NormalAttack(5);
  } else {
    alert("ステージ数3未満では、この技を選択することができません。");
  }
}

function seven(){
  if (stage >= 5){
    NormalAttack(7);
  } else {
    alert("ステージ数5未満では、この技を選択することができません。");
  }
}

function eleven(){
  if (stage > 10){
    NormalAttack(11);
  } else {
    alert("最終ボス戦以外では、この技を選択することができません。");
  }
}

function thirteen(){
  if (stage > 10){
    NormalAttack(13);
  } else {
    alert("最終ボス戦以外では、この技を選択することができません。");
  }
}

function seventeen(){
  if (stage > 10){
    NormalAttack(17);
  } else {
    alert("最終ボス戦以外では、この技を選択することができません。");
  }
}

function nineteen(){
  if (stage > 10){
    NormalAttack(19);
  } else {
    alert("最終ボス戦以外では、この技を選択することができません。");
  }
}

function twentythree(){
  if (stage > 10){
    NormalAttack(23);
  } else {
    alert("最終ボス戦以外では、この技を選択することができません。");
  }
}

function twentynine(){
  if (stage > 10){
    NormalAttack(29);
  } else {
    alert("最終ボス戦以外では、この技を選択することができません。");
  }
}

function thirtyone(){
  if (stage > 10){
    NormalAttack(31);
  } else {
    alert("最終ボス戦以外では、この技を選択することができません。");
  }
}

(解説) 第13講では、毒攻撃を実装する際に、ポイズンカウンターを導入したが、
これは、数ターンに限定される効果を持つ技全てに応用できる。
例えば、ここではその応用として、ダメージ半減技を追加してみることにする。この技は、数ターンの間、
敵の攻撃力を半減させることによって、プレイヤーが受けるダメージを半減させる、というものである。
さらに、これに伴う敵のHP回復の数値も半減する。但し、敵の攻撃力が奇数の場合、
敵の攻撃力の変数は整数型で宣言されているので、端数は切り捨てられる(parseIntを使用する)。
また、敵を毒状態にしている場合は、敵が毒により受けるダメージも同様に半減されてしまう。




第16講. 中ボス戦の追加

jsrpg016.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta name="robots" content="noindex,nofollow">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScriptによるRPG制作・第16講</title>
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="jsrpg016.js"></script>
</head>
<body bgcolor="#c0c0c0">
<center>
<h1>JavaScriptによるRPG制作・第16講</h1>

<form>
<table border="0" frame="void" rules="none">
<tr>
<td align="center"><span id="stage">ステージ:1</span></td>
<td align="center"><span id="HPenemy">敵HP:10</span></td>
<td align="center"><span>通常攻撃:</span></td>
<td align="center"><span>
<input type="button" value="13ダメージを与え、13充電する" onclick="thirteen()">
</span></td>
</tr>
<tr>
<td align="center"><span id="HPplayer">HP:10</span></td>
<td align="center"><span id="ATKplayer">全蓄積エネルギー:0</span></td>
<td align="center"><span>
<input type="button" value="2ダメージを与え、2充電する" onclick="two()">
</span></td>
<td align="center"><span>
<input type="button" value="17ダメージを与え、17充電する" onclick="seventeen()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2">
<span id="poison" style="background-color:#c0c0c0;color:#800080;"> </span>
</td>
<td align="center"><span>
<input type="button" value="3ダメージを与え、3充電する" onclick="three()">
</span></td>
<td align="center"><span>
<input type="button" value="19ダメージを与え、19充電する" onclick="nineteen()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2">
<span id="barrier" style="background-color:#c0c0c0;color:#ff0000;"> </span>
</td>
<td align="center"><span>
<input type="button" value="5ダメージを与え、5充電する" onclick="five()">
</span></td>
<td align="center"><span>
<input type="button" value="23ダメージを与え、23充電する" onclick="twentythree()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message1"> </span></td>
<td align="center"><span>
<input type="button" value="7ダメージを与え、7充電する" onclick="seven()">
</span></td>
<td align="center"><span>
<input type="button" value="29ダメージを与え、29充電する" onclick="twentynine()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message2"> </span></td>
<td align="center"><span>
<input type="button" value="11ダメージを与え、11充電する" onclick="eleven()">
</span></td>
<td align="center"><span>
<input type="button" value="31ダメージを与え、31充電する" onclick="thirtyone()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message3"> </span></td>
<td align="center" colspan="2"><span> <hr> </span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message4"> </span></td>
<td align="center"><span>特殊攻撃:</span></td>
<td align="center"><span>
<input type="button" value="敵に毒を与え、毒状態にする" onclick="special3()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="winlose"> </span></td>
<td align="center"><span>
<input type="button" value="全蓄積エネルギーを放電する" onclick="special1()">
</span></td>
<td align="center"><span>
<input type="button" value="ダメージを半減させる結界を発動する" onclick="special4()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="ending"> </span></td>
<td align="center"><span>
<input type="button" value="エネルギーを使って回復する" onclick="special2()">
</span></td>
<td align="center"><span> </span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="score"> </span></td>
<td align="center" colspan="2"><span> <hr> </span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="next"> </span></td>
<td align="center" colspan="2"><span>
<input type="button" value="次のステージへ" onclick="NextStage()">
</span></td>
</tr>
</table>
</form>

</center>
</body>
</html>

jsrpg016.js

var HPenemy = 10;
var HPplayer = 10;
var ATKenemy = 0; // 敵の攻撃力を初期化
var ATKplayer = 0; // プレイヤーの攻撃力を初期化
var stage = 1; // ステージ数
var power; // 技の威力
var PoisonCounter = 0; // ポイズンカウンター
var BarrierCounter = 0; // バリアカウンター

function ATKcalc(){ // 敵の攻撃力を計算する関数
  ATKenemy = 0; // 敵の攻撃力を初期化
  if (HPenemy % 2 == 0) {
    ATKenemy += 2;
  }
  // 敵のHPが2の倍数の時、敵の攻撃力が2上昇する。
  if (HPenemy % 3 == 0) {
    ATKenemy += 3;
  }
  // 敵のHPが3の倍数の時、敵の攻撃力が3上昇する。

  if (stage >= 3 && HPenemy % 5 == 0) {
    ATKenemy += 5;
  }
  // ステージ3以降、敵のHPが5の倍数の時、敵の攻撃力が5上昇する。
  if (stage >= 5 && HPenemy % 7 == 0) {
    ATKenemy += 7;
  }
  // ステージ5以降、敵のHPが7の倍数の時、敵の攻撃力が7上昇する。

  if (stage >= 50 && HPenemy % 11 == 0) {
    ATKenemy += 11;
  }
  // 中ボス戦及び、最終ボス戦の時、敵のHPが11の倍数の時、敵の攻撃力が11上昇する。
  if (stage >= 50 && HPenemy % 13 == 0) {
    ATKenemy += 13;
  }
  // 中ボス戦及び、最終ボス戦の時、敵のHPが13の倍数の時、敵の攻撃力が13上昇する。
  if (stage >= 50 && HPenemy % 17 == 0) {
    ATKenemy += 17;
  }
  // 中ボス戦及び、最終ボス戦の時、敵のHPが17の倍数の時、敵の攻撃力が17上昇する。
  if (stage >= 50 && HPenemy % 19 == 0) {
    ATKenemy += 19;
  }
  // 中ボス戦及び、最終ボス戦の時、敵のHPが19の倍数の時、敵の攻撃力が19上昇する。

  if (stage >= 100 && HPenemy % 23 == 0) {
    ATKenemy += 23;
  }
  // 最終ボス戦時のみ、敵のHPが23の倍数の時、敵の攻撃力が23上昇する。
  if (stage >= 100 && HPenemy % 29 == 0) {
    ATKenemy += 29;
  }
  // 最終ボス戦時のみ、敵のHPが29の倍数の時、敵の攻撃力が29上昇する。
  if (stage >= 100 && HPenemy % 31 == 0) {
    ATKenemy += 31;
  }
  // 最終ボス戦時のみ、敵のHPが31の倍数の時、敵の攻撃力が31上昇する。
}

function BarrierState(){ // 結界を表示する関数
  if (BarrierCounter > 0) {
    $("#barrier").text("結界が発動中(あと " + BarrierCounter + " ターン)");
    // バリアカウンターが0以外のとき、結界が発動中であることを表示する。
  } else {
    $("#barrier").text("");
  }
}

function NextStage(){ // 勝利後のイベント処理をする関数
  if (HPenemy <= 0) {  // 敵のHPが0以下ならば、勝利。

      $("#winlose").text("");
      ATKplayer = 0; // プレイヤーの攻撃力を初期化
      $("#ATKplayer").text("全蓄積エネルギー:" + ATKplayer);
      // 現在の全蓄積エネルギー
      PoisonCounter = 0; // ポイズンカウンターを0にする
      BarrierCounter = 0; // バリアカウンターを0にする

      TurnStart();

    if (stage < 5 || (stage > 5 && stage < 10)) {

      stage += 1; // 次のステージへ
      HPenemy = stage * 10; // 次のステージの敵のHP
      HPplayer += stage * 10; // HPを加算
      $("#stage").text("ステージ:" + stage);
      $("#HPenemy").text("敵HP:" + HPenemy);
      $("#HPplayer").text("HP:" + HPplayer);

    } else if (stage == 5) {
      stage = 50; // 中ボス戦のステージへ
      HPenemy = 500; // 中ボスのHP
      $("#stage").text("中ボス戦");
      $("#HPenemy").text("敵HP:" + HPenemy);

    } else if (stage == 10) {
      stage = 100; // 最終ボス戦のステージへ
      HPenemy = 1000; // 最終ボスのHP
      $("#stage").text("最終ボス戦");
      $("#HPenemy").text("敵HP:" + HPenemy);

    } else if (stage == 50) {
      stage = 6; // 中ボスを倒した後は、ステージ6へ
      HPenemy = stage * 10; // 次のステージの敵のHP
      HPplayer += stage * 10; // HPを加算
      $("#stage").text("ステージ:" + stage);
      $("#HPenemy").text("敵HP:" + HPenemy);
      $("#HPplayer").text("HP:" + HPplayer);

    } else {
      $("#ending").text("祝!ゲームクリア");
      $("#score").text("スコア:" + HPplayer);
      // エンディング
    }
  }
  $("#next").text("");
}

function PoisonState(){ // 毒状態を表示する関数
  if (PoisonCounter > 0) {
    $("#poison").text("敵は、毒状態(あと " + PoisonCounter + " ターン)");
    // ポイズンカウンターが0以外のとき、敵のHPが残っていれば、毒状態であることを表示する。
  } else {
    $("#poison").text("");
  }
}

function TurnStart(){ // ターン開始時の処理をする関数
  $("#message1").text("");
  $("#message2").text("");
  $("#message3").text("");
  $("#message4").text("");
  if (BarrierCounter == 0 && PoisonCounter == 0) {
    document.bgColor = "#c0c0c0";
    // ポイズンカウンターとバリアカウンターが
    // 共に0の場合は、背景を銀色に戻す。
  }
  PoisonState();
  BarrierState();
}

// メイン関数
function main(){
  if (HPenemy <= 0) { // 敵のHPが0以下ならば、勝利。
    $("#HPenemy").text("敵HP:0");
    $("#winlose").text("You win!"); // 勝利メッセージ
    $("#next").text("「次のステージへ」ボタンを押してください。");
  } else {
    ATKcalc();
    if (BarrierCounter > 0) {
      ATKenemy =  parseInt( ATKenemy / 2); // 敵の攻撃力を半減させる。
      // JavaScriptでは、自動で実数化されてしまうので、整数化する。
      BarrierCounter -= 1; // バリアカウンターを1減らす
    }
    HPplayer -= ATKenemy; // 敵の攻撃によるダメージを受ける。
    $("#HPplayer").text("HP:" + HPplayer);
    $("#message3").text("プレイヤーは " + ATKenemy + " のダメージを受けた");

    if (PoisonCounter > 0) {
      HPenemy -= ATKenemy; // ポイズンカウンターが0以外の場合は、敵は毒によるダメージを受ける。
      $("#HPenemy").text("敵HP:" + HPenemy);
      $("#message4").text("敵は毒により " + ATKenemy + " のダメージを受けた");
      // 敵が毒によるダメージを受けた場合のメッセージ
      PoisonCounter -= 1; // ポイズンカウンターを1減らす
    } else {
      HPenemy += ATKenemy; // ポイズンカウンターが0の場合は敵はその数値分HPを回復する。
      $("#HPenemy").text("敵HP:" + HPenemy);
      $("#message4").text("敵はHPを " + ATKenemy + " 回復した");
      // 敵がHPを回復した場合のメッセージ
    }
    if (HPenemy <= 0) {  // 敵のHPが0以下ならば、勝利。
      $("#HPenemy").text("敵HP:0");
      $("#winlose").text("You win!"); // 勝利メッセージ
      $("#next").text("「次のステージへ」ボタンを押してください。");
    }
    // 敵が毒のダメージで力尽きた場合にも、
    // 戦闘を継続させずに、次のステージへ行く為の処理

    if (HPplayer <= 0) {  // プレイヤーのHPが0以下ならば、敗北。
      $("#HPplayer").text("HP:0");
      $("#winlose").text("You lose!"); // 敗北メッセージ
    }

  }
}

// 通常攻撃(コア)
function NormalAttack(power){
  if (HPplayer > 0 && HPenemy > 0 && stage <= 100){

    TurnStart();

    HPenemy -= power;  // 技の威力だけダメ―ジを与え、
    ATKplayer += power; // その数値分充電する。
    $("#HPenemy").text("敵HP:" + HPenemy);
    $("#ATKplayer").text("全蓄積エネルギー:" + ATKplayer);
    $("#message1").text("敵に " + power + " のダメージを与えた");
    $("#message2").text("エネルギーを " + power + " 充電した");

    main();
  }
}

// 特殊攻撃
function special1(){
  if (HPplayer > 0 && HPenemy > 0 && stage <= 100){

    TurnStart();

    HPenemy -= ATKplayer; // 全蓄積エネルギーを放電する
    $("#HPenemy").text("敵HP:" + HPenemy);
    $("#ATKplayer").text("全蓄積エネルギー:" + 0);
    $("#message1").text("蓄積されていた全エネルギーを放電した");
    $("#message2").text("敵に " + ATKplayer + " のダメージを与えた");
    ATKplayer = 0; // プレイヤーの攻撃力を初期化

    main();
  }
}

function special2(){
  if (HPplayer > 0 && HPenemy > 0 && stage <= 100){

    TurnStart();

    HPplayer += ATKplayer; // エネルギーを使って回復する
    $("#HPplayer").text("HP:" + HPplayer);
    $("#ATKplayer").text("全蓄積エネルギー:" + 0);
    $("#message1").text("蓄積されていた全エネルギーを吸収した");
    $("#message2").text("プレイヤーはHPを " + ATKplayer + " 回復した");
    ATKplayer = 0; // プレイヤーの攻撃力を初期化

    main();
  }
}

function special3(){
  if (HPplayer > 0 && HPenemy > 0 && stage <= 100) {

    TurnStart();

    PoisonCounter = stage + 1; // ポイズンカウンターにはステージ数+1を代入
    $("#poison").text("敵は、毒状態(あと " + PoisonCounter + " ターン)");
    $("#message1").text("敵を毒状態にした");
    document.bgColor = "#800080"; // 背景を紫色にする

    main();
  }
}

function special4(){
  if (HPplayer > 0 && HPenemy > 0 && stage <= 100) {

    TurnStart();

    BarrierCounter = stage + 1; // バリアカウンターにはステージ数+1を代入
    $("#barrier").text("結界が発動中(あと " + BarrierCounter + " ターン)");
    $("#message1").text("ダメージを半減させる結界を発動した");
    document.bgColor = "#ff0000"; // 背景を赤色にする

    main();
  }
}

// 通常攻撃
function two() { NormalAttack(2); }
function three() { NormalAttack(3); }

function five(){
  if (stage >= 3) {
    NormalAttack(5);
  } else {
    alert("ステージ数3未満では、この技を選択することができません。");
  }
}

function seven(){
  if (stage >= 5){
    NormalAttack(7);
  } else {
    alert("ステージ数5未満では、この技を選択することができません。");
  }
}

function eleven(){
  if (stage >= 50){
    NormalAttack(11);
  } else {
    alert("中ボス戦・最終ボス戦以外では、この技を選択することができません。");
  }
}

function thirteen(){
  if (stage >= 50){
    NormalAttack(13);
  } else {
    alert("中ボス戦・最終ボス戦以外では、この技を選択することができません。");
  }
}

function seventeen(){
  if (stage >= 50){
    NormalAttack(17);
  } else {
    alert("中ボス戦・最終ボス戦以外では、この技を選択することができません。");
  }
}

function nineteen(){
  if (stage >= 50){
    NormalAttack(19);
  } else {
    alert("中ボス戦・最終ボス戦以外では、この技を選択することができません。");
  }
}

function twentythree(){
  if (stage >= 100){
    NormalAttack(23);
  } else {
    alert("最終ボス戦以外では、この技を選択することができません。");
  }
}

function twentynine(){
  if (stage >= 100){
    NormalAttack(29);
  } else {
    alert("最終ボス戦以外では、この技を選択することができません。");
  }
}

function thirtyone(){
  if (stage >= 100){
    NormalAttack(31);
  } else {
    alert("最終ボス戦以外では、この技を選択することができません。");
  }
}

(解説) このゲームは、最終ボス戦までに、ステージが10もあり、
単調な作業に陥りがちであるので、ステージ5クリア後に、中ボス戦を追加したい。
第14講では、最終ステージは、ステージ100という扱いだったので、
中ボス戦のステージは、ステージ数を50とすることにした。

中ボスは、HP500の敵として定義する。通常の敵のHPは、
ステージ数の10倍として定義されていたから、中ボス戦のステージ数を50とし、
同様に最終ボスのHPが1000であることから、最終ボス戦のステージ数は100とした。
中ボス戦時に使える通常攻撃は8種類とし、最終ボス戦時は11種類とする。
敵の攻撃力の上昇も、これと同様の基準に対応させる。

最も大きく仕様を変更する必要があるのは、勝利後のイベント処理をする関数の部分である。
ステージ1から4及び、6から9をクリアしたときは、単に次のステージへ進むだけであるが、
ステージ5をクリアしたときは、ステージ50へ進んで、中ボス戦を行い、
中ボス戦に勝利後は、ステージ6に進み、ステージ10をクリアしたときは、
ステージ100へ進んで、最終ボス戦を行い、最終ボス戦に勝利後は、エンディングを迎える。

また、ターン開始時の共通する処理を行う関数として、MessageClear関数をTurnStart関数に変更した。




Shadow Academy トップへ戻る

inserted by FC2 system