sugoroku.htmlから改良を加えましょう。

【この時点の sugoroku.html を別枠で表示】

（省略）

<h3>すごろく２</h3>
<hr>
<p>名前を入れてから始めよう。</p>
<form name="form1">

（省略）

【改良点：注意書きの表記】

テーブルの上に文字を入れて、名前を入力するようにしてもらいましましょう。

<p></p>は１つの段落であることを示しています。
これがなくても文字列を表示できますが、<p>タグを使っておくと、段落が増えたときに見やすくなります。

（省略）

<script language="javascript">
img = new Array("★","◆","●","■");
koma = new Array();
goal = 20;

user_num = 0;
pre_num = 0;
pre_r = 0;
timer = 0;

restart();

function restart() {
user_num = 0;
pre_num = 0;
pre_r = 0;
timer = 0;

for (i=0; i<4; i++) {
document.getElementById("brd"+i).innerHTML = img[i];
koma[i] = 0;
}

sai_reset();
}

（省略）

【改良点：ゴールをしたあとのプレイヤーを変更する(1)】

ゴールをするとすごろくが初期化されます。
このとき、最初にサイコロを投げるプレイヤーも初期状態に戻りますが、毎回同じプレイヤーから始めると、最初のプレイヤーが有利という状況が続きます。
そこで、ゴールをしたら、次のプレイヤーから始めるようにしたいと思います。

また、 同時に２つの問題も発生しています。
１つは、複数で遊んでいると、2番目以降に赤い出目が残ったままになることです。
もう１つは、途中で0番目（一人目）の名前を消しても、ゴールすると0番目からサイコロがスタートしてしまうことです。

プレイヤーの順番を管理しているのは、変数user_numと変数pre_numです。
また、前の出目を管理するのに、変数pre_rを使っています。
ついでになりますが、変数timerも初期化の必要はないようです。
そこで、これら４つの変数をrestart()から外して、初期設定の最初の位置に戻しましょう。
緑を消して、青に移動します。

（省略）

function getNum(num) {
clearTimeout(timer);
document.getElementById("sai"+pre_num).innerHTML = pre_r;
pre_num = num;
pre_r = r;
document.getElementById("sai"+num).innerHTML = "<font color='#FF0000'>" + r + "</font>";
koma[num] += r;
var s = ""
for (i=0; i<koma[num]; i++) {
s += ".";
}
document.getElementById("brd"+num).innerHTML = s + img[num];
if (koma[num] < goal) {
sai_next();
} else {
goalin();
}
}

function sai_next() {
user_num++;
if (user_num == 4) user_num = 0;
if (koma[pre_num] < goal) {
var s = document.form1.elements["user"+user_num].value;
if (s != "") {
sai_reset();
} else {
if (user_num != pre_num) {
sai_next();
} else {
sai_reset();
}
}
} else {
goalin();
}
}

（省略）

【改良点：ゴールをしたあとのプレイヤーを変更する(2)】

先の処理だけでは、初期化はされませんが、ゴールをしたプレイヤーから新しいゲームが始まってしまいます。
これは変数user_numに対して、次のプレイヤーに回すという処理がされていないからです。

user_num++;
if (user_num == 4) user_num = 0;

この処理をする必要がありますが、sai_next()の中にこれがあります。
しかし、goalin()に飛ぶのはgeｔNum()の最後でした。
そこで、この部分を削除して、sai_next()の中でゴール判定をしたいと思います。

緑の部分を削除して青の位置に移動します。

移動したらif文を手直しします。変数numはgetNum()の中でしか使えないローカル変数なので、そのままではエラーが発生します。
getNum()の中で変数pre_numに変数numを移し替えてあるので、ここでは変数pre_numを使います。
変数user_numは、この直前で次のプレイヤーの番号に変わっているので使えません。

（省略）

function goalin() {
alert("ゴール！！\n優勝は" + document.form1.elements["user"+pre_num].value + "さんです。");
restart();
}

（省略）

【問題点：ゴールの表示の不具合】

先の修正によって、goalin()にも修正が必要になります。
変数user_numがsai_next()の処理によって次のプレイヤーになっているため、ゴールした人の名前が次のプレイヤーになってしまいました。

ここも変数pre_numに置き換えます。

（省略）

function sai_next() {
user_num++;
if (user_num == 4) user_num = 0;
var s = document.form1.elements["user"+user_num].value;
if (s == "" && user_num != pre_num) {
sai_next();
} else {
if (koma[pre_num] < goal) {
sai_reset();
} else {
goalin();
}
}
}

（省略）

【問題点：ゴール後の不具合(1)】

プレイヤーが一人のときに、次の段が次のプレイヤーになってしまい、名前がないのにサイコロが回ってしまいます。
原因は、goalin()を実行するときに、sai_next()を繰り返し実行しないため、次のプレイヤーを正しく設定できていないからです。

そこで、sai_next()の中を整理して、if文を１つにまとめます。名前が空欄（s == ""）で現在と次のプレイヤーが同じでない（user_num != pre_num）ときに、もう一度sai_next()を実行し、それ以外のときにゴールの判定を行って、sai_reset()とgoalin()に分岐させます。

（省略）

function goalin() {
alert("ゴール！！\n優勝は" + document.form1.elements["user"+pre_num].value + "さんです。");
if (user_num == pre_num) pre_r = 0;
restart();
}

（省略）

【問題点：ゴール後の不具合(2)】

ゴールの後、同じプレイヤーの順番にはなったが、サイコロが回転しません。
そこで、プレイヤーが一人の場合を判断して、サイコロを回転させます。

goalin()の中でrestart()に飛ぶ前に処理を入れましょう。
変数user_numと変数pre_numが同じときが、プレイヤーが一人だと判断できますので、そのときに変数pre_rを「0」にします。
変数pre_rが「0」のときは、sai_start()でサイコロが回ります。

【この時点の sugoroku.html を別枠で表示】

【イベントを発生させる方法を考える】

プレイヤーが止まった位置は配列変数komaで管理しているので、イベントを配列変数で用意してコマ毎にイベントの内容を書いておきましょう。コマ数を参照して、その位置にあるイベントを実行します。

まずはイベントを管理する変数を考えます。
配列変数の名前に「event」は予約語で使えないため「ev」とします。
イベントの内容は「ev[koma[num]]」で取り出すことになります。

次に各イベントの内容を考えます。
あるコマに止まると、「何コマ進む」「何コマ戻る」という表示をして、コマをその数だけ動かします。
メッセージを表示して何かを指示することもできますが、ここは単純に「進む」「戻る」のイベントだけを行います。
例えば、10コマ目のイベントならば「ev[10]」を参照します。
このとき、「ev[10] = "５マス進む"」ならば、「alert(ev[10])」を使えばそのまま表示することができます。
しかし、文章では実際にイベントを処理するのは難しいのです。 文章のままでは、足し算引き算ができません。

では、実際にはどのようにすると良いのでしょうか。
イベントを数字で考え、そこから文章を作るようにします。
例えば、「ev[10] = 5」とします。これなら、「koma[num] += ev[10]」として、コマ数に足し算することができます。また、「alert(ev[10]+"マス進む")」を実行すれば「5マス進む」と表示されます。
このようにイベントを数字で管理するのが一番良い方法になります。
進む場合は普通に数字を書きますが、戻る場合は「-」を付けて負の数とします。これも足し算でできます。負の数を足すと引き算になるので、同じ計算式で足し算と引き算ができるという利点があります。

あと、イベントがないマスも必要になります。
これも数字で管理できます。「ev[5] = 0」とすればうまくいきそうです。

（省略）

<script language="javascript">
img = new Array("★","◆","●","■");
koma = new Array();
ev = new Array(0,0,2,0,5,0,-3,-5,0,3,0,-2,2,-5,0,-2,0,2,-2,0);
goal = 20;

restart();

（省略）

【改良点：イベントを発生させる(1)】

まずは変数goalを確認します。 数字を変更している場合は、「goal = 20」にします。

コマ数は、0がスタート、20がゴールになりますので、イベントが必要なのはその間にある19個のマスです。

配列変数evの初期設定で19個の数値をイベントとして「,」で区切って並べます。
文字列ではないので数字を「""」で囲む必要はありません。

イベントを呼び出すときの注意点を先に考えておきましょう。

1コマ進むと、1番目のマスに止まります。しかし、配列変数は0番から始まるので、「1番目のマス」は「0番目」と考えなければいけません。

具体的に考えると判りやすくなります。
コマが5マス進んだとき、「koma[num] = 5」です。このとき、「ev[4]」からイベントを取ってくるということです。

これを１つにまとめて考えると「ev[koma[num]-1]が、コマ数に対応したイベントになります。変数numはプレイヤーの番号です。

（省略）

function getNum(num) {
clearTimeout(timer);
document.getElementById("sai"+pre_num).innerHTML = pre_r;
pre_num = num;
pre_r = r;
document.getElementById("sai"+num).innerHTML = "<font color='#FF0000'>" + r + "</font>";
koma[num] += r;
move_koma();
sai_next();
}

function move_koma {
var s = ""
for (i=0; i<koma[pre_num]; i++) {
s += ".";
}
document.getElementById("brd"+pre_num).innerHTML = s + img[pre_num];
}

（省略）

【改良点：イベントを発生させる(2)】

コマを進めるとイベントが発生するので、getNum()にその処理を追加したいと思います。

イベントを処理する前にコマを進めますが、イベントが発生すると、そのときもコマを進めなければなりません。
そこで、コマを進める処理を１つのユーザー関数にまとめておきます。

move_koma()を作って、青の部分を移動し、元の場所から呼び出します。呼び出した後は、続きの処理に戻ってきます。

move_koma()の中では変数numが使えませんので、ここも変数pre_numに書き換えます。

（省略）

function getNum(num) {
clearTimeout(timer);
document.getElementById("sai"+pre_num).innerHTML = pre_r;
pre_num = num;
pre_r = r;
document.getElementById("sai"+num).innerHTML = "<font color='#FF0000'>" + r + "</font>";
koma[num] += r;
move_koma();
check_event();
sai_next();
}

function check_event() {
var n = ev[koma[pre_num]-1];
if (n > 0) alert(n+"マス進む");
if (n < 0) alert(n*-1+"マス戻る");
koma[pre_num] += n;
move_koma();
}

（省略）

【改良点：イベントを発生させる(3)】

イベントを扱うユーザー関数check_eventを作ります。

まず、getNum()では、move_koma()とsai_next()の間から呼び出すようにします。

それでは、check_event()の内容を見ていきましょう。

1行目でロカール変数nに、コマ数に対応したイベントを取り出しています。
変数pre_numがプレイヤーの番号で、そのプレイヤーのコマ数が配列変数komaに入っています。
後はコマ数に対応させるためにそこから「-1」をしたのがイベントのマスの番号になっています。

次に２つのif文で進むときと戻るときのイベントをメッセージで表示しています。

配列変数evが0のときは何もしない。
0より大きいときと、0より小さいときにメッセージを表示する。

1つ目のif文は「n > 0」なので、正の数の場合です。

2つ目のif文は「n < 0」で、負の数の場合になっています。
このときの実行命令で「n*-1」という計算をしています。これは、「-5」を「5」という表示にするためです。

if文でメッセージを表示したあと、イベントの分だけコマ数を足しています。

そして、もう一度move_koma()を呼び出して、コマの位置を書き換えます。

（省略）

function check_event() {
var n = ev[koma[pre_num]-1];
if (n) {
if (n > 0) alert(n+"マス進む");
if (n < 0) alert(n*-1+"マス戻る");
koma[pre_num] += n;
move_koma();
}
}

（省略）

【問題点：ゴールしたときにエラーが発生】

ここで動作テストをすると、ゴールしたときにそれまでと違う現象が起こります。
ゴールしたと同時にコマの位置が最初の状態に戻ってしまうのです。
これはcheck_event()を追加するまでは起きていなかったので、その中に問題があると考えます。

「document.title = n」をcheck_event()の最後に入れてテストをしてみると、配列変数evが「undefined」となっていました。
これは存在しない配列変数を呼び出そうとしているのです。

配列変数evは最初に19個設定しました。そのため要素として指定できるのは「0」〜「18」になります。
ところが、ゴールをするとkoma[pre_num]が20以上の数値になるため、「-1」をしても「19」以上になり、配列変数evが存在しない要素を指定してしまいます。
これがエラーの原因となっています。

そこで、if文を使って、変数nに正しく数字が入っているか判断させています。

【この時点の sugoroku.html を別枠で表示】

（省略）

<script language="javascript">
img = new Array("★","◆","●","■");
koma = new Array();
ev = new Array(0,0,2,0,5,0,-3,-5,0,3,0,-2,2,-5,0,-2,0,2,-2,0,3,-3,0,5,0,-3,-2,0,2,0,3,0,2,0,-3,2,0,-2,0,5,0,-3,0,-2,0,0,-3,0,0);
goal = ev.length+1;

restart();

（省略）

【改良点：コマ数を増やす】

コマ数を増やすにはどうすれば良いでしょうか。

配列変数evの初期設定で、要素を増やせば良いのです。
このとき、goalの数値もそれに応じて変更が必要になります。

コマ数が増えると、それを数えてgoal位置を決めるのに非常に手間がかかってしまいます。
そこで、「ev.length」を使って要素数を取得し、これに１を足して自動的にゴール位置を決めます。

（省略）

function check_event() {
var n = ev[koma[pre_num]-1];
if (n) {
koma[pre_num] += n;
if (koma[pre_num] <= 0) {
alert("スタートに戻る");
koma[pre_num] = 0;
} else {
if (n > 0) alert(n+"マス進む");
if (n < 0) alert(n*-1+"マス戻る");
}
move_koma();
}
}

（省略）

【改良点：スタートに戻る】

将来考えられる問題点として、コマ数を戻しすぎてマイナスになったときの対処を考えます。

現時点では、戻すイベントが発生した場合にコマ数がマイナスになってしまった場合、エラーが発生します。配列の要素は「0」から始まりますので、マイナスというものはありません。
例えば、１つ進んだところに「-5」があると、配列変数komaは「-4」になってしまいます。
もちろん、イベントを作る段階で計算して作業をすれば良いのですが、スタートまでコマを戻すときには面倒ですし、気づかないところでこの不具合が発生する可能性もあります。
そこで、コマ数がマイナスになる場合、戻る位置を「0」にして、すべて「スタートに戻る」という処理にしたいと思います。

まず、配列変数komaの足し算をメッセージよりも先に行います。青の位置に移動します。
次にif文を使って、条件式でコマ数が「0」以下であることを調べます。真ならば、次の2行で「スタートに戻る」ことを表示して、コマ数を「0」にしています。偽ならば、先に書いた２つのif文を実行します。

（省略）

//ev = new Array(0,0,2,0,5,0,-3,-5,0,3,0,-2,2,-5,0,-2,0,2,-2,0,3,-3,0,5,0,-3,-2,0,2,0,3,0,2,0,-3,2,0,-2,0,5,0,-3,0,-2,0,0,-3,0,0);
ev = new Array(0,0,2,0,5,0,-3,-99,0,3,0,-2,2,-5,0,-2,0,2,-99,0,3,-3,0,5,0,-3,-2,0,2,0,3,0,2,0,-3,2,0,-2,0,5,0,-3,0,-2,0,0,-3,0,0);

（省略）

【複数の設定を切り換える】

テストをする場合など、条件を替えて複数のパターンを検証したいときに、その度にデータや命令文を書き換えるのは面倒です。

そこで、コメントアウトの機能を使って、複数の設定を切り換えると便利です。
コメントアウトとは、「//」を書いた所から行の最後までが注釈として扱われ、命令文として無視される状態になります。
そのため、条件を替えた複数の命令文やデータを用意して、「//」と付けたり外したりすることで処理や設定を切り換えます。

（省略）

img = new Array("★","◆","●","■");
ato = ".";
//ev = new Array(0,0,2,0,5,0,-3,-5,0,3,0,-2,2,-5,0,-2,0,2,-2,0,3,-3,0,5,0,-3,-2,0,2,0,3,0,2,0,-3,2,0,-2,0,5,0,-3,0,-2,0,0,-3,0,0);
ev = new Array(0,0,2,0,5,0,-3,-99,0,3,0,-2,2,-5,0,-2,0,2,-99,0,3,-3,0,5,0,-3,-2,0,2,0,3,0,2,0,-3,2,0,-2,0,5,0,-3,0,-2,0,0,-3,0,0);

koma = new Array();
goal = ev.length+1;

（省略）

function move_koma() {
var s = ""
for (i=0; i<koma[pre_num]; i++) {
s += ato;
}
document.getElementById("brd"+pre_num).innerHTML = s + img[pre_num];
}

（省略）

【改良点：改良や修正をしやすくする工夫(1)】

さて、突然ですが、コマの移動跡には「.」を使っていますが、これを変更するにはどうすれば良いでしょうか？

プログラムを沢山書いていると、細かな変更をするにも、それがどこにあるのか探すのは大変です。
また、配布して利用者の環境に応じて書き換えが必要な場合や、利用者が改良しやすいようにしたい場合の工夫があります。

コマの移動跡に使っている「.」はmove_koma()の中で設定しています。これを探すのはとても面倒ですが、これを変更するのはとても簡単です。
こういう手軽に出来る変更箇所は、利用者が変更しやすいように判りやすくしておきたいものです。

そこで、このような環境設定やユーザー設定の項目を初期設定の前に用意します。
すでに配列変数imgや配列変数evは初期設定の最初に用意してあります。
ここを少し整理して、変更が許されるものを上に、変更して欲しくないものを下に置き換えます。配列変数komaは配列変数evよりも下になりました。

そして、変数atoを用意して、ここに「.」を入れます。
move_koma()内の「"."」の部分は「ato」に変更します。
こうすることで、奥にあった修正箇所を手前に引き出すことができます。
一件無駄な変数のように見えますが、ソースを開くとすぐ見える位置にあるので、利用者の利便性だけでなく、テストやメンテナンスもしやすくなります。

「〜」「>」「_」「)」など、変数atoの中身を色々替えて遊んでみましょう。

（省略）

//コマ
img = new Array("★","◆","●","■");
//移動跡
ato = ".";
//イベント（コマ数は自動取得）
//ev = new Array(0,0,2,0,5,0,-3,-5,0,3,0,-2,2,-5,0,-2,0,2,-2,0,3,-3,0,5,0,-3,-2,0,2,0,3,0,2,0,-3,2,0,-2,0,5,0,-3,0,-2,0,0,-3,0,0);
ev = new Array(0,0,2,0,5,0,-3,-99,0,3,0,-2,2,-5,0,-2,0,2,-99,0,3,-3,0,5,0,-3,-2,0,2,0,3,0,2,0,-3,2,0,-2,0,5,0,-3,0,-2,0,0,-3,0,0);

//以下は変更不可
koma = new Array();
goal = ev.length+1;

（省略）

【改良点：改良や修正をしやすくする工夫(2)】

もう１つ、コメントアウトを使って注釈を付けると、ソースの内容がとても判りやすくなります。

言葉で説明できるので、説明書を用意する必要もないくらい判りやすくできます。
注釈は自由に書けますので、修正の方法を書いておいたり、記号の意味を説明したり、設定にはない命令や修正日を残しておいたりと、色々工夫できます。

（省略）

function check_event() {
var n = ev[koma[pre_num]-1];
if (n) {
koma[pre_num] += n;
var s = document.form1.elements["user"+pre_num].value + "さん\n";
if (koma[pre_num] <= 0) {
alert(s+"スタートに戻る");
koma[pre_num] = 0;
} else {
if (n > 0) alert(s+n+"マス進む");
if (n < 0) alert(s+n*-1+"マス戻る");
}
move_koma();
}
}

（省略）

【改良点：ダイアログに名前を追加】

ダイアログボックス（アラート）に対象のプレイヤーの名前を表示させましょう。

ユーザー関数check_event()にあるalert()でプレイヤーの名前を表示します。
ユーザー名はフォームから取得して、変数sに入れます。

alert()が３つありますので、ここに変数ｓを付け足します。

【この時点の sugoroku.html を別枠で表示】

（省略）

function check_event() {
var n = ev[koma[pre_num]-1];
var s = "";
if (n) {
koma[pre_num] += n;
if (koma[pre_num] <= 0) {
s = "スタートに戻る";
koma[pre_num] = 0;
} else {
if (n > 0) s = n+"マス進む";
if (n < 0) s = n*-1+"マス戻る";
}
if (s != "") {
alert(document.form1.elements["user"+pre_num].value + "さん\n" + s);
move_koma();
}
}
}

（省略）

【改良点：アラートの整理】

alert()が3ヶ所にありますので、これを１つにまとめてみましょう。

変数sを空で用意して、alert()の位置で文字列を入れます。
変数sが空でなければ、alert()が必要だということなので、それをif文で判断するという流れに変更してあります。

move_koma()は新しいif文の中に入れましたが、今まで通り外にあっても問題はありません。
ただ、イベントが発生したかどうかをif文で判断しているので、いらないときに余計なプログラムを動かさないという意味はあります。

（省略）

function check_event() {
var n = ev[koma[pre_num]-1];
var s = "";
if (n) {
koma[pre_num] += n;
if (koma[pre_num] <= 0) {
s = "スタートに戻る";
koma[pre_num] = 0;
} else {
if (n > 0) s = n+"マス進む";
if (n < 0) s = n*-1+"マス戻る";
}
if (s != "") {
alert(img[pre_num] + document.form1.elements["user"+pre_num].value + "さん\n" + s);
move_koma();
}
}
}

function goalin() {
alert("ゴール！！\n優勝は" + img[pre_num] + document.form1.elements["user"+pre_num].value + "さんです。");
if (user_num == pre_num) pre_r = 0;
restart();
}

（省略）

【改良点：アラートにコマの表示を追加】

ダイアログボックスに名前を表示させましたが、コマも表示させましょう。
ただし、配列変数imgの初期設定でコマにタグを使用して色を着けたり、画像を使っている場合、それらは表示されません。タグがそのまま文字列として表示されてしまいます。

check_event()の先ほど名前を追加した部分の直前にコマの表示を入れます。

goalin()にもダイアログがありますので、こちらにもコマの表示を追加しましょう。

配列変数imgにはコマの絵柄が入っており、変数pre_numに直前のプレイヤーの番号が入っています。

【この時点の sugoroku.html を別枠で表示】