JavaScriptによるRPG制作　Volume.1

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

00 01 02 03 04 05 06 07 08

第1講. Hellow World!のようなもの

jsrpg001.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制作・第1講</title>
</head>
<body bgcolor="#c0c0c0">
<center>
<h1>JavaScriptによるRPG制作・第1講</h1>

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

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

jsrpg001.html（新版）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="robots" content="noindex,nofollow">
<meta charset="utf-8" />
<title>JavaScriptによるRPG制作・第1講</title>
</head>
<body bgcolor="#c0c0c0">
<div style="text-align:center;">
<h1>JavaScriptによるRPG制作・第1講</h1>

<form>
<table border="0" frame="void" rules="none"
 style="margin-left:auto;margin-right:auto;text-align:center;">
<tr>
<td style="text-align:center;"><span id="stage">ステージ：1</span></td>
</tr>
<tr>
<td style="text-align:center;"><span id="HPplayer">HP：10</span></td>
</tr>
<tr>
<td style="text-align:center;"><span id="HPenemy">敵HP：10</span></td>
</tr>
</table>
</form>

</div>
</body>
</html>

（解説）　まずは、HP等を表示させるというだけのHellow World!のようなもの。
赤字は、追加部分や大規模な変更部分、青字は、移動や小規模な変更部分を表す(以降も同様)。

第2講. RPGの基本は、引き算

jsrpg002innertext.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制作・第2講</title>

<script language="JavaScript" type="text/javascript">
<!--
var HPenemy = 10;
var HPplayer = 10;
var ATKenemy = 2; // 敵の攻撃力を初期化
var ATKplayer = 3; // プレイヤーの攻撃力を初期化

var stage = 1; // ステージ数

function main(){
  if (HPplayer > 0 && HPenemy > 0){
    HPenemy -= ATKplayer;
    HPplayer -= ATKenemy;
    document.getElementById("HPplayer").innerText = ("HP：" + HPplayer);
    document.getElementById("HPenemy").innerText = ("敵HP：" + HPenemy);
  }
}
//-->
</script>

</head>
<body bgcolor="#c0c0c0">
<center>
<h1>JavaScriptによるRPG制作・第2講</h1>

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

<tr>
<td align="center"><span><input type="button" value="次へ" onclick="main()"></span></td>
</tr>

</table>
</form>

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

jsrpg002innertext.html（新版）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="robots" content="noindex,nofollow">
<meta charset="utf-8" />
<title>JavaScriptによるRPG制作・第2講</title>

<script type="text/javascript" language="JavaScript">
<!--
var HPenemy = 10;
var HPplayer = 10;
var ATKenemy = 2; // 敵の攻撃力を初期化
var ATKplayer = 3; // プレイヤーの攻撃力を初期化

var stage = 1; // ステージ数

var main = function(){
  if (HPplayer > 0 && HPenemy > 0){
    HPenemy -= ATKplayer;
    HPplayer -= ATKenemy;
    document.getElementById("HPplayer").innerText = ("HP：" + HPplayer);
    document.getElementById("HPenemy").innerText = ("敵HP：" + HPenemy);
  }
};
//-->
</script>

</head>
<body bgcolor="#c0c0c0">
<div style="text-align:center;">
<h1>JavaScriptによるRPG制作・第2講</h1>

<form>
<table border="0" frame="void" rules="none"
 style="margin-left:auto;margin-right:auto;text-align:center;">
<tr>
<td style="text-align:center;"><span id="stage">ステージ：1</span></td>
</tr>
<tr>
<td style="text-align:center;"><span id="HPplayer">HP：10</span></td>
</tr>
<tr>
<td style="text-align:center;"><span id="HPenemy">敵HP：10</span></td>
</tr>

<tr>
<td style="text-align:center;"><span><input type="button" value="次へ" onclick="main()"></span></td>
</tr>

</table>
</form>

</div>
</body>
</html>

jsrpg002textcontent.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制作・第2講</title>

<script language="JavaScript" type="text/javascript">
<!--
var HPenemy = 10;
var HPplayer = 10;
var ATKenemy = 2; // 敵の攻撃力を初期化
var ATKplayer = 3; // プレイヤーの攻撃力を初期化

var stage = 1; // ステージ数

function main(){
  if (HPplayer > 0 && HPenemy > 0){
    HPenemy -= ATKplayer;
    HPplayer -= ATKenemy;
    document.getElementById("HPplayer").textContent = ("HP：" + HPplayer);
    document.getElementById("HPenemy").textContent = ("敵HP：" + HPenemy);
  }
}
//-->
</script>

</head>
<body bgcolor="#c0c0c0">
<center>
<h1>JavaScriptによるRPG制作・第2講</h1>

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

<tr>
<td align="center"><span><input type="button" value="次へ" onclick="main()"></span></td>
</tr>

</table>
</form>

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

jsrpg002textcontent.html（新版）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="robots" content="noindex,nofollow">
<meta charset="utf-8" />
<title>JavaScriptによるRPG制作・第2講</title>

<script type="text/javascript" language="JavaScript">
<!--
var HPenemy = 10;
var HPplayer = 10;
var ATKenemy = 2; // 敵の攻撃力を初期化
var ATKplayer = 3; // プレイヤーの攻撃力を初期化

var stage = 1; // ステージ数

var main = function(){
  if (HPplayer > 0 && HPenemy > 0){
    HPenemy -= ATKplayer;
    HPplayer -= ATKenemy;
    document.getElementById("HPplayer").textContent = ("HP：" + HPplayer);
    document.getElementById("HPenemy").textContent = ("敵HP：" + HPenemy);
  }
};
//-->
</script>

</head>
<body bgcolor="#c0c0c0">
<div style="text-align:center;">
<h1>JavaScriptによるRPG制作・第2講</h1>

<form>
<table border="0" frame="void" rules="none"
 style="margin-left:auto;margin-right:auto;text-align:center;">
<tr>
<td style="text-align:center;"><span id="stage">ステージ：1</span></td>
</tr>
<tr>
<td style="text-align:center;"><span id="HPplayer">HP：10</span></td>
</tr>
<tr>
<td style="text-align:center;"><span id="HPenemy">敵HP：10</span></td>
</tr>

<tr>
<td style="text-align:center;"><span><input type="button" value="次へ" onclick="main()"></span></td>
</tr>

</table>
</form>

</div>
</body>
</html>

（解説）　RPGの基本は、敵にダメージを与えたり、ダメージを受けたりという引き算である。
それをプレイヤーか敵か、どちらかが倒れるまで繰り返す。
敵の攻撃力やプレイヤーの攻撃力の数値は自由に変更して構わない。
但し、innerTextを使用した場合は、Google ChromeとInternet Explorerでしか、動作しないことに注意。
もし、Mozilla Firefoxで動かすのであれば、textContentと書く必要がある。

ブラウザ毎の各プロパティの実装状況を次の表に示しておく。

ブラウザ＼プロパティ	innerHTML	innerText	textContent
Internet Explorer	○	○	×
Mozilla Firefox	○	×	○
Google Chrome	○	○	○
Opera	○	○	○

但し、上記は2014年頃の情報なので、情報が古くなっているかも知れない。
※【追記】2020年時点での情報では、SafariやMicrosoft Edgeも含め、
ブラウザによる実装状況には殆ど差異が無いようだ。

第3講. JavaScriptの外部ファイル化
旧題：「第3講. JavaScriptの外部ファイル化とjQueryの使用」

jsrpg003.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制作・第3講</title>

<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="jsrpg003.js"></script>

</head>
<body bgcolor="#c0c0c0">
<center>
<h1>JavaScriptによるRPG制作・第3講</h1>

<form>
<table border="0" frame="void" rules="none">
<tr>
<td align="center"><span id="stage">ステージ：1</span></td>
</tr>
<tr>
<td align="center"><span id="HPplayer">HP：10</span></td>
</tr>
<tr>
<td align="center"><span id="HPenemy">敵HP：10</span></td>
</tr>
<tr>
<td align="center"><span><input type="button" value="次へ" onclick="main()"></span></td>
</tr>
</table>
</form>

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

jsrpg003.html（新版）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="robots" content="noindex,nofollow">
<meta charset="utf-8" />
<title>JavaScriptによるRPG制作・第3講</title>

<script type="text/javascript" language="JavaScript" src="jsrpg003.js"></script>

</head>
<body bgcolor="#c0c0c0">
<div style="text-align:center;">
<h1>JavaScriptによるRPG制作・第3講</h1>

<form>
<table border="0" frame="void" rules="none"
 style="margin-left:auto;margin-right:auto;text-align:center;">
<tr>
<td style="text-align:center;"><span id="stage">ステージ：1</span></td>
</tr>
<tr>
<td style="text-align:center;"><span id="HPplayer">HP：10</span></td>
</tr>
<tr>
<td style="text-align:center;"><span id="HPenemy">敵HP：10</span></td>
</tr>
<tr>
<td style="text-align:center;"><span><input type="button" value="次へ" onclick="main()"></span></td>
</tr>
</table>
</form>

</div>
</body>
</html>

jsrpg003.js（旧版）

var HPenemy = 10;
var HPplayer = 10;
var ATKenemy = 2; // 敵の攻撃力を初期化
var ATKplayer = 3; // プレイヤーの攻撃力を初期化

var stage = 1; // ステージ数

function main(){
  if (HPplayer > 0 && HPenemy > 0){
    HPenemy -= ATKplayer;
    HPplayer -= ATKenemy;

    $("#HPplayer").text = ("HP：" + HPplayer);
    $("#HPenemy").text = ("敵HP：" + HPenemy);

  }
}

jsrpg003.js（新版）

var HPenemy = 10;
var HPplayer = 10;
var ATKenemy = 2; // 敵の攻撃力を初期化
var ATKplayer = 3; // プレイヤーの攻撃力を初期化

var stage = 1; // ステージ数

var main = function(){
  if (HPplayer > 0 && HPenemy > 0){
    HPenemy -= ATKplayer;
    HPplayer -= ATKenemy;

    document.getElementById("HPplayer").innerHTML = ("HP：" + HPplayer);
    document.getElementById("HPenemy").innerHTML = ("敵HP：" + HPenemy);

  }
};

（解説）　JavaScriptの部分は、外部ファイルとして読み込み、参照することができるようにした。
内容自体は、第2講のプログラムと全く変わらないが、~~今回は、jQueryを使用しているので、~~
Internet ExplorerやGoogle Chromeの他、Mozilla Firefox等でも、動作する筈である。

【追記】題名変更にもある通り、旧版ではjQueryを使用していたが、
第2講で述べた様に、ブラウザ毎の各プロパティの実装状況に
殆ど差異が無くなったため、新版ではinnerHTMLを使用することにした。

第4講. 技の選択

jsrpg004.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制作・第4講</title>
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="jsrpg004.js"></script>
</head>
<body bgcolor="#c0c0c0">
<center>
<h1>JavaScriptによるRPG制作・第4講</h1>

<form>
<table border="0" frame="void" rules="none">

<tr>
<td align="center"><span id="stage">ステージ：1</span></td>
<td align="center"><span>通常攻撃：</span></td>
</tr>
<tr>
<td align="center"><span id="HPplayer">HP：10</span></td>
<td align="center"><span>
<input type="button" value="2ダメージを与える" onclick="two()">
</span></td>
</tr>
<tr>
<td align="center"><span id="HPenemy">敵HP：10</span></td>
<td align="center"><span>
<input type="button" value="3ダメージを与える" onclick="three()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message1">　</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message2">　</span></td>
</tr>

</table>
</form>

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

jsrpg004.html（新版）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="robots" content="noindex,nofollow">
<meta charset="utf-8" />
<title>JavaScriptによるRPG制作・第4講</title>
<script type="text/javascript" language="JavaScript" src="jsrpg004.js"></script>
</head>
<body bgcolor="#c0c0c0">
<div style="text-align:center;">
<h1>JavaScriptによるRPG制作・第4講</h1>

<form>
<table border="0" frame="void" rules="none"
 style="margin-left:auto;margin-right:auto;text-align:center;">

<tr>
<td style="text-align:center;"><span id="stage">ステージ：1</span></td>
<td style="text-align:center;"><span>通常攻撃：</span></td>
</tr>
<tr>
<td style="text-align:center;"><span id="HPplayer">HP：10</span></td>
<td style="text-align:center;"><span>
<input type="button" value="2ダメージを与える" onclick="two()">
</span></td>
</tr>
<tr>
<td style="text-align:center;"><span id="HPenemy">敵HP：10</span></td>
<td style="text-align:center;"><span>
<input type="button" value="3ダメージを与える" onclick="three()">
</span></td>
</tr>
<tr>
<td style="text-align:center;" colspan="2"><span id="message1">　</span></td>
</tr>
<tr>
<td style="text-align:center;" colspan="2"><span id="message2">　</span></td>
</tr>

</table>
</form>

</div>
</body>
</html>

jsrpg004.js（旧版）

var HPenemy = 10;
var HPplayer = 10;
var ATKenemy = 2; // 敵の攻撃力を初期化

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

var stage = 1; // ステージ数

function main(ATKplayer){

  if (HPplayer > 0 && HPenemy > 0){
    HPenemy -= ATKplayer;
    HPplayer -= ATKenemy;

    $("#HPplayer").text("HP：" + HPplayer);
    $("#HPenemy").text("敵HP：" + HPenemy);

    $("#message1").text("敵に " + ATKplayer + " のダメージを与えた");
    $("#message2").text("プレイヤーは " + ATKenemy + " のダメージを受けた");

  }
}

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

jsrpg004.js（新版）

var HPenemy = 10;
var HPplayer = 10;
var ATKenemy = 2; // 敵の攻撃力を初期化

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

var stage = 1; // ステージ数

var main = function(ATKplayer){

  if (HPplayer > 0 && HPenemy > 0){
    HPenemy -= ATKplayer;
    HPplayer -= ATKenemy;

    document.getElementById("HPplayer").innerHTML = ("HP：" + HPplayer);
    document.getElementById("HPenemy").innerHTML = ("敵HP：" + HPenemy);

    document.getElementById("message1").innerHTML = ("敵に " + ATKplayer + " のダメージを与えた");
    document.getElementById("message2").innerHTML = ("プレイヤーは " + ATKenemy + " のダメージを受けた");

  }
};

// 通常攻撃
var two = function() { main(2); };
var three = function() { main(3); };

（解説）　プレイヤーの攻撃力ATKplayerを仮引数として、main関数側に与えることによって、
ボタンを増やすことで、技を選択できるようにした。
また、敵に与えたダメージやプレイヤーが受けたダメージの表示を追加した。

第5講. 勝利判定と敗北判定

jsrpg005.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制作・第5講</title>
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="jsrpg005.js"></script>
</head>
<body bgcolor="#c0c0c0">
<center>
<h1>JavaScriptによるRPG制作・第5講</h1>

<form>
<table border="0" frame="void" rules="none">
<tr>
<td align="center"><span id="stage">ステージ：1</span></td>
<td align="center"><span>通常攻撃：</span></td>
</tr>
<tr>
<td align="center"><span id="HPplayer">HP：10</span></td>
<td align="center"><span>
<input type="button" value="2ダメージを与える" onclick="two()">
</span></td>
</tr>
<tr>
<td align="center"><span id="HPenemy">敵HP：10</span></td>
<td align="center"><span>
<input type="button" value="3ダメージを与える" onclick="three()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message1">　</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message2">　</span></td>
</tr>

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

</table>
</form>

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

jsrpg005.html（新版）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="robots" content="noindex,nofollow">
<meta charset="utf-8" />
<title>JavaScriptによるRPG制作・第5講</title>
<script type="text/javascript" language="JavaScript" src="jsrpg005.js"></script>
</head>
<body bgcolor="#c0c0c0">
<div style="text-align:center;">
<h1>JavaScriptによるRPG制作・第5講</h1>

<form>
<table border="0" frame="void" rules="none"
 style="margin-left:auto;margin-right:auto;text-align:center;">
<tr>
<td style="text-align:center;"><span id="stage">ステージ：1</span></td>
<td style="text-align:center;"><span>通常攻撃：</span></td>
</tr>
<tr>
<td style="text-align:center;"><span id="HPplayer">HP：10</span></td>
<td style="text-align:center;"><span>
<input type="button" value="2ダメージを与える" onclick="two()">
</span></td>
</tr>
<tr>
<td style="text-align:center;"><span id="HPenemy">敵HP：10</span></td>
<td style="text-align:center;"><span>
<input type="button" value="3ダメージを与える" onclick="three()">
</span></td>
</tr>
<tr>
<td style="text-align:center;" colspan="2"><span id="message1">　</span></td>
</tr>
<tr>
<td style="text-align:center;" colspan="2"><span id="message2">　</span></td>
</tr>

<tr>
<td style="text-align:center;" colspan="2"><span id="winlose">　</span></td>
</tr>

</table>
</form>

</div>
</body>
</html>

jsrpg005.js（旧版）

var HPenemy = 10;
var HPplayer = 10;

var ATKenemy = 3; // 敵の攻撃力を初期化

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

function main(ATKplayer){
  if (HPplayer > 0 && HPenemy > 0){

    HPenemy -= ATKplayer;
    $("#message1").text("敵に " + ATKplayer + " のダメージを与えた");

    if (HPenemy <= 0) { // 敵のHPが0以下ならば、勝利。
      $("#HPenemy").text("敵HP：0");
      $("#winlose").text("You win!"); // 勝利メッセージ
    } else {
      $("#HPenemy").text("敵HP：" + HPenemy);

      HPplayer -= ATKenemy;
      $("#message2").text("プレイヤーは " + ATKenemy + " のダメージを受けた");

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

    }

  }
}

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

jsrpg005.js（新版）

var HPenemy = 10;
var HPplayer = 10;

var ATKenemy = 3; // 敵の攻撃力を初期化

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

var main = function(ATKplayer){
  if (HPplayer > 0 && HPenemy > 0){

    HPenemy -= ATKplayer;
    document.getElementById("message1").innerHTML = ("敵に " + ATKplayer + " のダメージを与えた");

    if (HPenemy <= 0) { // 敵のHPが0以下ならば、勝利。
      document.getElementById("HPenemy").innerHTML = ("敵HP：0");
      document.getElementById("winlose").innerHTML = ("You win!"); // 勝利メッセージ
    } else {
      document.getElementById("HPenemy").innerHTML = ("敵HP：" + HPenemy);

      HPplayer -= ATKenemy;
      document.getElementById("message2").innerHTML = ("プレイヤーは " + ATKenemy + " のダメージを受けた");

      if (HPplayer <= 0) {  // プレイヤーのHPが0以下ならば、敗北。
        document.getElementById("HPplayer").innerHTML = ("HP：0");
        document.getElementById("winlose").innerHTML = ("You lose!"); // 敗北メッセージ
      } else {
        document.getElementById("HPplayer").innerHTML = ("HP：" + HPplayer);
      }

    }

  }
};

// 通常攻撃
var two = function() { main(2); };
var three = function() { main(3); };

（解説）　勝利判定は、if-else文を用い、既に敵を倒したプレイヤーが
ダメージを受けることがないようにしなければならない。
さらに、オーバーキルになった場合に、HPがマイナスにならない表示にした。

第6講. 敵の攻撃パターン

jsrpg006.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制作・第6講</title>
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="jsrpg006.js"></script>
</head>
<body bgcolor="#c0c0c0">
<center>
<h1>JavaScriptによるRPG制作・第6講</h1>

<form>
<table border="0" frame="void" rules="none">
<tr>
<td align="center"><span id="stage">ステージ：1</span></td>
<td align="center"><span>通常攻撃：</span></td>
</tr>
<tr>
<td align="center"><span id="HPplayer">HP：10</span></td>
<td align="center"><span>
<input type="button" value="2ダメージを与える" onclick="two()">
</span></td>
</tr>
<tr>
<td align="center"><span id="HPenemy">敵HP：10</span></td>
<td align="center"><span>
<input type="button" value="3ダメージを与える" onclick="three()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message1">　</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message2">　</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="winlose">　</span></td>
</tr>
</table>
</form>

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

jsrpg006.html（新版）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="robots" content="noindex,nofollow">
<meta charset="utf-8" />
<title>JavaScriptによるRPG制作・第6講</title>
<script type="text/javascript" language="JavaScript" src="jsrpg006.js"></script>
</head>
<body bgcolor="#c0c0c0">
<div style="text-align:center;">
<h1>JavaScriptによるRPG制作・第6講</h1>

<form>
<table border="0" frame="void" rules="none"
 style="margin-left:auto;margin-right:auto;text-align:center;">
<tr>
<td style="text-align:center;"><span id="stage">ステージ：1</span></td>
<td style="text-align:center;"><span>通常攻撃：</span></td>
</tr>
<tr>
<td style="text-align:center;"><span id="HPplayer">HP：10</span></td>
<td style="text-align:center;"><span>
<input type="button" value="2ダメージを与える" onclick="two()">
</span></td>
</tr>
<tr>
<td style="text-align:center;"><span id="HPenemy">敵HP：10</span></td>
<td style="text-align:center;"><span>
<input type="button" value="3ダメージを与える" onclick="three()">
</span></td>
</tr>
<tr>
<td style="text-align:center;" colspan="2"><span id="message1">　</span></td>
</tr>
<tr>
<td style="text-align:center;" colspan="2"><span id="message2">　</span></td>
</tr>
<tr>
<td style="text-align:center;" colspan="2"><span id="winlose">　</span></td>
</tr>
</table>
</form>

</div>
</body>
</html>

jsrpg006.js（旧版）

var HPenemy = 10;
var HPplayer = 10;

var ATKenemy = 0; // 敵の攻撃力を初期化

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

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

function main(ATKplayer){
  if (HPplayer > 0 && HPenemy > 0){

    HPenemy -= ATKplayer;
    $("#message1").text("敵に " + ATKplayer + " のダメージを与えた");

    if (HPenemy <= 0) { // 敵のHPが0以下ならば、勝利。
      $("#HPenemy").text("敵HP：0");
      $("#winlose").text("You win!"); // 勝利メッセージ
    } else {
      $("#HPenemy").text("敵HP：" + HPenemy);

      ATKcalc();

      HPplayer -= ATKenemy;
      $("#message2").text("プレイヤーは " + ATKenemy + " のダメージを受けた");

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

    }

  }
}

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

jsrpg006.js（新版）

var HPenemy = 10;
var HPplayer = 10;

var ATKenemy = 0; // 敵の攻撃力を初期化

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

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

var main = function(ATKplayer){
  if (HPplayer > 0 && HPenemy > 0){

    HPenemy -= ATKplayer;
    document.getElementById("message1").innerHTML = ("敵に " + ATKplayer + " のダメージを与えた");

    if (HPenemy <= 0) { // 敵のHPが0以下ならば、勝利。
      document.getElementById("HPenemy").innerHTML = ("敵HP：0");
      document.getElementById("winlose").innerHTML = ("You win!"); // 勝利メッセージ
    } else {
      document.getElementById("HPenemy").innerHTML = ("敵HP：" + HPenemy);

      ATKcalc();

      HPplayer -= ATKenemy;
      document.getElementById("message2").innerHTML = ("プレイヤーは " + ATKenemy + " のダメージを受けた");

      if (HPplayer <= 0) {  // プレイヤーのHPが0以下ならば、敗北。
        document.getElementById("HPplayer").innerHTML = ("HP：0");
        document.getElementById("winlose").innerHTML = ("You lose!"); // 敗北メッセージ
      } else {
        document.getElementById("HPplayer").innerHTML = ("HP：" + HPplayer);
      }

    }

  }
};

// 通常攻撃
var two = function() { main(2); };
var three = function() { main(3); };

（解説）　これまでは、敵の攻撃力は一定であり、プレイヤーの被ダメージを軽減するには、
常に最もダメージの大きな技を選択し続ける、「攻撃は最大の防御」しか選択肢がなかった。
そこで、敵のHPが2の倍数ならば2、3の倍数ならば3、両者の公倍数ならば5のダメージを
受けることにすれば、その攻撃パターンを先読みして、プレイヤー側にも技を選択する
意義が生じることになるだろう。

第7講. 勝利後、次のステージへ行く場合のイベント処理

jsrpg007.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制作・第7講</title>
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="jsrpg007.js"></script>
</head>
<body bgcolor="#c0c0c0">
<center>
<h1>JavaScriptによるRPG制作・第7講</h1>

<form>
<table border="0" frame="void" rules="none">
<tr>
<td align="center"><span id="stage">ステージ：1</span></td>
<td align="center"><span>通常攻撃：</span></td>
</tr>
<tr>
<td align="center"><span id="HPplayer">HP：10</span></td>
<td align="center"><span>
<input type="button" value="2ダメージを与える" onclick="two()">
</span></td>
</tr>
<tr>
<td align="center"><span id="HPenemy">敵HP：10</span></td>
<td align="center"><span>
<input type="button" value="3ダメージを与える" onclick="three()">
</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message1">　</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="message2">　</span></td>
</tr>
<tr>
<td align="center" colspan="2"><span id="winlose">　</span></td>
</tr>

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

</table>
</form>

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

jsrpg007.html（新版）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="robots" content="noindex,nofollow">
<meta charset="utf-8" />
<title>JavaScriptによるRPG制作・第7講</title>
<script type="text/javascript" language="JavaScript" src="jsrpg007.js"></script>
</head>
<body bgcolor="#c0c0c0">
<div style="text-align:center;">
<h1>JavaScriptによるRPG制作・第7講</h1>

<form>
<table border="0" frame="void" rules="none"
 style="margin-left:auto;margin-right:auto;text-align:center;">
<tr>
<td style="text-align:center;"><span id="stage">ステージ：1</span></td>
<td style="text-align:center;"><span>通常攻撃：</span></td>
</tr>
<tr>
<td style="text-align:center;"><span id="HPplayer">HP：10</span></td>
<td style="text-align:center;"><span>
<input type="button" value="2ダメージを与える" onclick="two()">
</span></td>
</tr>
<tr>
<td style="text-align:center;"><span id="HPenemy">敵HP：10</span></td>
<td style="text-align:center;"><span>
<input type="button" value="3ダメージを与える" onclick="three()">
</span></td>
</tr>
<tr>
<td style="text-align:center;" colspan="2"><span id="message1">　</span></td>
</tr>
<tr>
<td style="text-align:center;" colspan="2"><span id="message2">　</span></td>
</tr>
<tr>
<td style="text-align:center;" colspan="2"><span id="winlose">　</span></td>
</tr>

<tr>
<td style="text-align:center;"><span id="next">　</span></td>
<td style="text-align:center;"><span>
<input type="button" value="次のステージへ" onclick="NextStage()">
</span></td>
</tr>

</table>
</form>

</div>
</body>
</html>

jsrpg007.js（旧版）

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

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

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(ATKplayer){
  if (HPplayer > 0 && HPenemy > 0){

    HPenemy -= ATKplayer;
    $("#message1").text("敵に " + ATKplayer + " のダメージを与えた");

    if (HPenemy <= 0) { // 敵のHPが0以下ならば、勝利。
      $("#HPenemy").text("敵HP：0");
      $("#winlose").text("You win!"); // 勝利メッセージ

      $("#next").text("「次のステージへ」ボタンを押してください。");

    } else {
      $("#HPenemy").text("敵HP：" + HPenemy);
      ATKcalc();
      HPplayer -= ATKenemy;
      $("#message2").text("プレイヤーは " + ATKenemy + " のダメージを受けた");

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

    }

  }
}

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

jsrpg007.js（新版）

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

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

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

var main = function(ATKplayer){
  if (HPplayer > 0 && HPenemy > 0){

    HPenemy -= ATKplayer;
    document.getElementById("message1").innerHTML = ("敵に " + ATKplayer + " のダメージを与えた");

    if (HPenemy <= 0) { // 敵のHPが0以下ならば、勝利。
      document.getElementById("HPenemy").innerHTML = ("敵HP：0");
      document.getElementById("winlose").innerHTML = ("You win!"); // 勝利メッセージ

      document.getElementById("next").innerHTML = ("「次のステージへ」ボタンを押してください。");

    } else {
      document.getElementById("HPenemy").innerHTML = ("敵HP：" + HPenemy);
      ATKcalc();
      HPplayer -= ATKenemy;
      document.getElementById("message2").innerHTML = ("プレイヤーは " + ATKenemy + " のダメージを受けた");

      if (HPplayer <= 0) {  // プレイヤーのHPが0以下ならば、敗北。
        document.getElementById("HPplayer").innerHTML = ("HP：0");
        document.getElementById("winlose").innerHTML = ("You lose!"); // 敗北メッセージ
      } else {
        document.getElementById("HPplayer").innerHTML = ("HP：" + HPplayer);
      }

    }

  }
};

// 通常攻撃
var two = function() { main(2); };
var three = function() { main(3); };

（解説）　勝利後、次のステージへ行けるようにするには、
敵のHPが0になったとき、ステージ数を変更する関数を作ればよい。
また、次のステージに進むにつれて、敵のHPを強化しておく。
プレイヤーのHPも減ったままではなく、ステージクリアボーナス分を加算する。
ただ、デバッグの際には、時間短縮の為に、最大ステージ数を5ぐらいに減らしてもよい。

第8講. 上級ステージでのみ使用できるコマンドの追加

jsrpg008.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制作・第8講</title>
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="jsrpg008.js"></script>
</head>
<body bgcolor="#c0c0c0">
<center>
<h1>JavaScriptによるRPG制作・第8講</h1>

<form>
<table border="0" frame="void" rules="none">
<tr>
<td align="center"><span id="stage">ステージ：1</span></td>
<td align="center"><span>通常攻撃：</span></td>
</tr>
<tr>
<td align="center"><span id="HPplayer">HP：10</span></td>
<td align="center"><span>
<input type="button" value="2ダメージを与える" onclick="two()">
</span></td>
</tr>
<tr>
<td align="center"><span id="HPenemy">敵HP：10</span></td>
<td align="center"><span>
<input type="button" value="3ダメージを与える" onclick="three()">
</span></td>
</tr>

<tr>
<td align="center"><span id="message1">　</span></td>
<td align="center"><span>
<input type="button" value="5ダメージを与える" onclick="five()">
</span></td>
</tr>
<tr>
<td align="center"><span id="message2">　</span></td>
<td align="center"><span>
<input type="button" value="7ダメージを与える" onclick="seven()">
</span></td>
</tr>

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

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

jsrpg008.html（新版）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="robots" content="noindex,nofollow">
<meta charset="utf-8" />
<title>JavaScriptによるRPG制作・第8講</title>
<script type="text/javascript" language="JavaScript" src="jsrpg008.js"></script>
</head>
<body bgcolor="#c0c0c0">
<div style="text-align:center;">
<h1>JavaScriptによるRPG制作・第8講</h1>

<form>
<table border="0" frame="void" rules="none"
 style="margin-left:auto;margin-right:auto;text-align:center;">
<tr>
<td style="text-align:center;"><span id="stage">ステージ：1</span></td>
<td style="text-align:center;"><span>通常攻撃：</span></td>
</tr>
<tr>
<td style="text-align:center;"><span id="HPplayer">HP：10</span></td>
<td style="text-align:center;"><span>
<input type="button" value="2ダメージを与える" onclick="two()">
</span></td>
</tr>
<tr>
<td style="text-align:center;"><span id="HPenemy">敵HP：10</span></td>
<td style="text-align:center;"><span>
<input type="button" value="3ダメージを与える" onclick="three()">
</span></td>
</tr>

<tr>
<td style="text-align:center;"><span id="message1">　</span></td>
<td style="text-align:center;"><span>
<input type="button" value="5ダメージを与える" onclick="five()">
</span></td>
</tr>
<tr>
<td style="text-align:center;"><span id="message2">　</span></td>
<td style="text-align:center;"><span>
<input type="button" value="7ダメージを与える" onclick="seven()">
</span></td>
</tr>

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

</div>
</body>
</html>

jsrpg008.js（旧版）

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

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(ATKplayer){
  if (HPplayer > 0 && HPenemy > 0){

    HPenemy -= ATKplayer;
    $("#message1").text("敵に " + ATKplayer + " のダメージを与えた");

    if (HPenemy <= 0) { // 敵のHPが0以下ならば、勝利。
      $("#HPenemy").text("敵HP：0");
      $("#winlose").text("You win!"); // 勝利メッセージ

      $("#next").text("「次のステージへ」ボタンを押してください。");

    } else {
      $("#HPenemy").text("敵HP：" + HPenemy);
      ATKcalc();
      HPplayer -= ATKenemy;
      $("#message2").text("プレイヤーは " + ATKenemy + " のダメージを受けた");

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

    }

  }
}

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

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

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

jsrpg008.js（新版）

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

var ATKcalc = function(){ // 敵の攻撃力を計算する関数
  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上昇する。

};

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

var main = function(ATKplayer){
  if (HPplayer > 0 && HPenemy > 0){

    HPenemy -= ATKplayer;
    document.getElementById("message1").innerHTML = ("敵に " + ATKplayer + " のダメージを与えた");

    if (HPenemy <= 0) { // 敵のHPが0以下ならば、勝利。
      document.getElementById("HPenemy").innerHTML = ("敵HP：0");
      document.getElementById("winlose").innerHTML = ("You win!"); // 勝利メッセージ

      document.getElementById("next").innerHTML = ("「次のステージへ」ボタンを押してください。");

    } else {
      document.getElementById("HPenemy").innerHTML = ("敵HP：" + HPenemy);
      ATKcalc();
      HPplayer -= ATKenemy;
      document.getElementById("message2").innerHTML = ("プレイヤーは " + ATKenemy + " のダメージを受けた");

      if (HPplayer <= 0) {  // プレイヤーのHPが0以下ならば、敗北。
        document.getElementById("HPplayer").innerHTML = ("HP：0");
        document.getElementById("winlose").innerHTML = ("You lose!"); // 敗北メッセージ
      } else {
        document.getElementById("HPplayer").innerHTML = ("HP：" + HPplayer);
      }

    }

  }
};

// 通常攻撃
var two = function() { main(2); };
var three = function() { main(3); };

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

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

（解説）　ステージが進むにつれて、敵のHPが多くなるので、
与えるダメージが少なければ、敵のHPがなかなか減らない。
そこで、上級ステージでのみ使用できるコマンドを追加する。
ステージ数が規定値に満たない状態でボタンを押すと、アラートが出るようにした。
また、プレイヤー側だけが強化されると、ゲームバランスが崩壊するので、
上級ステージにのみ、プレイヤー側の強化に対応する形で、敵の攻撃力も強化した。

JavaScriptによるRPG制作 Volume.1

jsrpg000.html（旧版）

jsrpg000.html（新版）