ＳＴＥＰ３では、ゲーム画面をだいたい完成させて、ＪａｖａＳｃｒｉｐｔを使って３０枚のカードを並べてみますにゃ。できあがるものはこれですにゃ。
ＳＴＥＰ２で作ったＨＴＭＬに、いろいろ書き加えていきますにゃ。前回までとおなじように青い文字の部分を書き加えるんですけど、今回はちょっと多いですから、３回に分けますにゃ。まずは、ここまで作ってみましょにゃ。キーボードで入力してもいいんですけど、コピー→貼り付けでも大丈夫ですにゃ。書き換えたら、保存してアップロードして、見に行ってくださいにゃ。こういうものができていると思いますにゃ。
<html>
<head>
<title>神経衰弱♪</title>
<script language="JavaScript">
<!--
// メイン
function main()
{
a=document.hyoji.h1.value*1;
b=document.hyoji.h2.value*1;
ans=a+b;
c="『 "+a+" + "+b+" = "+ans+" です』";
document.hyoji.text1.value=c;
}
// マウスクリック処理
function pic(n)
{
c=""+n+"番目のカードをクリックしましたにゃ";
document.hyoji.h1.value=c;
}
// -->
</script>
</head>
<body bgcolor="A0FFA0">
<form name="hyoji">
<table border=1>
<tr>
<td colspan=2 bgcolor="FFC0C0">
<font size=6 color="0000FF">神経衰弱♪</font>
<input type=button name="st1" value="開始" onClick=main()>
</td>
</tr>
<tr>
<td bgcolor="00FFFF" align=center valign=top>
※ここにカードを表示しますにゃ
<table border=0 cellspacing=0 cellpadding=0>
<tr>
<td><img src="./card-0.gif"></td>
<td><img src="./card-1.gif"></td>
<td><img src="./card-2.gif"></td>
<td><img src="./card-3.gif"></td>
<td><img src="./card-4.gif"></td>
<td><img src="./card-5.gif"></td>
<td><img name="img0" src="./card-10.gif" onClick="pic(0)"></td>
<td><img name="img1" src="./card-10.gif" onClick="pic(1)"></td>
<td><img name="img2" src="./card-10.gif" onClick="pic(2)"></td>
<td><img name="img3" src="./card-10.gif" onClick="pic(3)"></td>
<td><img name="img4" src="./card-10.gif" onClick="pic(4)"></td>
<td><img name="img5" src="./card-10.gif" onClick="pic(5)"></td>
</tr>
<tr>
<td><img src="./card-6.gif"></td>
<td><img src="./card-7.gif"></td>
<td><img src="./card-8.gif"></td>
<td><img src="./card-9.gif"></td>
<td><img src="./card-10.gif"></td>
<td><img src="./card-0.gif"></td>
<td><img name="img6" src="./card-10.gif" onClick="pic(6)"></td>
<td><img name="img7" src="./card-10.gif" onClick="pic(7)"></td>
<td><img name="img8" src="./card-10.gif" onClick="pic(8)"></td>
<td><img name="img9" src="./card-10.gif" onClick="pic(9)"></td>
<td><img name="img10" src="./card-10.gif" onClick="pic(10)"></td>
<td><img name="img11" src="./card-10.gif" onClick="pic(11)"></td>
</tr>
<tr>
<td><img name="img12" src="./card-10.gif" onClick="pic(12)"></td>
<td><img name="img13" src="./card-10.gif" onClick="pic(13)"></td>
<td><img name="img14" src="./card-10.gif" onClick="pic(14)"></td>
<td><img name="img15" src="./card-10.gif" onClick="pic(15)"></td>
<td><img name="img16" src="./card-10.gif" onClick="pic(16)"></td>
<td><img name="img17" src="./card-10.gif" onClick="pic(17)"></td>
</tr>
<tr>
<td><img name="img18" src="./card-10.gif" onClick="pic(18)"></td>
<td><img name="img19" src="./card-10.gif" onClick="pic(19)"></td>
<td><img name="img20" src="./card-10.gif" onClick="pic(20)"></td>
<td><img name="img21" src="./card-10.gif" onClick="pic(21)"></td>
<td><img name="img22" src="./card-10.gif" onClick="pic(22)"></td>
<td><img name="img23" src="./card-10.gif" onClick="pic(23)"></td>
</tr>
<tr>
<td><img name="img24" src="./card-10.gif" onClick="pic(24)"></td>
<td><img name="img25" src="./card-10.gif" onClick="pic(25)"></td>
<td><img name="img26" src="./card-10.gif" onClick="pic(26)"></td>
<td><img name="img27" src="./card-10.gif" onClick="pic(27)"></td>
<td><img name="img28" src="./card-10.gif" onClick="pic(28)"></td>
<td><img name="img29" src="./card-10.gif" onClick="pic(29)"></td>
</tr>
</table>
</td>
<td bgcolor="FFFFA0" valign=top>
※ここには、いろんな情報を表示しますにゃ<br>
<input type=text size=40 name="h1" value=""><br>
<input type=text size=40 name="h2" value=""><br>
</td>
</tr>
<tr>
<td colspan=2 bgcolor="C0C0C0">
※ここは、本当は必要にゃいんですけど、作ってる途中で<br>いろいろ表示する場所ですにゃ<br>
<textarea cols=80 rows=10 name="text1"></textarea>
</td>
</tr>
</table><br>
<font size=4>
あなたの名前
<a href="http://bigchan.sakura.ne.jp/index.html">ホームページ</a>
</font>
</body>
</html>
カードが３０枚になりましたにゃ。カードの表示はこれでだいたい終わりですにゃ。「※ここにカードを表示しますにゃ」はもうわかっていることですから消しますにゃ。「開始」をクリックすると、ＳＴＥＰ２とおなじ結果になりますにゃ。ここでは、カードの画像をクリック（マウスで左クリック）してくださいにゃ。「○枚目のカードをクリックしましたにゃ」っていう表示が出たら、成功ですにゃ。そのカードが何枚目かっていうのは、「左上の角のカードを０枚目として数え始める」「右に進んで、１回目→２枚目…５枚目」「上から２段目の左から順に、６枚目→７枚目…１１枚目」「上から３段目の左から順に、１２枚目→１３枚目…」ちょっと飛ばして「一番下の段の左から順に、２４枚目→２５枚目…最後は右下の角のカードで２９枚目」ですにゃ。最初はちょっとわかりにくいかもしれませんけど、今は最初は１枚目じゃにゃくて０枚目ってことだけでも覚えてくださいにゃ。この後、追加した部分の解説をしますにゃ。別にわからにゃくてもいいっていう人は読み飛ばしてくださいにゃ。
・「// メイン」
わかりやすいように、注釈行を付けましたにゃ。ＳＴＥＰ２で説明した通り、この行はプログラム内では無視されますから、あってもにゃくても何の影響もありませんにゃ。
・「// マウスクリック処理」
さっきとおなじ注釈行ですにゃ。見やすくするために、その前に空行を入れていますにゃ。
・「function pic(n)」「{」「}」
「pic」という名前の関数（わたしはサブルーチンとして使っていますにゃ）の始まりと終わりですにゃ。呼び出されると、「{」と「}」で囲まれた部分を実行しますにゃ。「(n)」は、この関数が呼び出された時に何か受け取ったらそれを変数nとして扱うっていう意味ですにゃ。何を受け取るのかは、あとで出てきますにゃ。picは「pick up」の略で、わたしが勝手に付けた名前ですにゃ。
・「c=""+n+"番目のカードをクリックしましたにゃ";」
変数c（ここでは結果を表示するための文字列）を作りますにゃ。「c=""」から始めるのは、これは数値じゃにゃくて文字列っていうことをわかりやすくしているだけで、省略しても大丈夫ですにゃ。「+n」で、function picが呼び出された時に受け取ったものをくっつけますにゃ。最後に「+"番目の…"」の説明を追加しますにゃ。
・「document.hyoji.h1.value=c;」
今作った変数cの値（文字列）を表示しますにゃ。
・「name="img0"」
この画像に「img0」という名前を付けるっていう意味ですにゃ。名前は、今のところ必要にゃいんですけど、あとでプログラムを書き足して行く時に必要になってきますにゃ。
・「"./card-10.gif"」
ＳＴＥＰ２では、最初からカードの表の画像を表示していましたにゃ。ここでは実際にゲームが始まる前の状態を作りますから、３０個の画像は全部カードの裏の画像になりますにゃ。
・「onClick="pic(0)"」
この画像がクリックされた時、関数picを呼び出して実行する、その時に引数として「0」を渡すっていう意味ですにゃ。関数を呼び出して実行するのは「開始」ボタンの時とおなじですにゃ。引数は、正しい日本語としては「いんすう」と読むんですけど、「因数」と区別するために「ひきすう」と読むこともあるっていうか、そのほうが一般的かもしれませんにゃ。わたしのパソコンでは「いんすう」では変換できず、「ひきすう」で変換できましたにゃ。どっちでも意味はおなじですにゃ。function pic(n)の「n」として渡される（関数が受け取る）値が引数で、ここでは「0」という数値ですにゃ。文字列を渡すこともできますし、必要にゃい場合は省略しても大丈夫ですにゃ。後で出てくるんですけど、複数の値を引数として渡すこともできますにゃ。
・「name="img1"」「onClick="pic(1)"」
画像の名前と引数が変わるだけで、あとはおなじですから、この後の説明は省略しますにゃ。
ゲーム画面の続きを作りますにゃ。青い文字の部分を追加してくださいにゃ。関係にゃいところは省略していますにゃ。保存してアップロードして見に行ってみてくださいにゃ。こういうものができていると思いますにゃ。
<html>
<head>
<title>神経衰弱♪</title>
<script language="JavaScript">
<!--
var player=new Array(2);
// メイン
function main()
{
a=document.hyoji.h1.value*1;
b=document.hyoji.h2.value*1;
ans=a+b;
c="『 "+a+" + "+b+" = "+ans+" です』";
player[0]=document.hyoji.player1.value*1;
player[1]=document.hyoji.player2.value*1;
gametype=document.hyoji.gmt.value*1;
lcrule=document.hyoji.lc.value*1;
c="プレイヤー１は "+player[0]+" です\n";
c=c+"プレイヤー２は "+player[1]+" です\n";
c=c+"ゲームタイプは "+gametype+" です\n";
c=c+"ラッキーカードのルールは "+lcrule+" です\n";
document.hyoji.text1.value=c;
}
// マウスクリック処理
function pic(n)
{
c=""+n+"番目のカードをクリックしましたにゃ";
document.hyoji.h1.value=c;
}
// -->
</script>
</head>
<body bgcolor="A0FFA0">
<form name="hyoji">
<table border=1>
<tr>
<td colspan=2 bgcolor="FFC0C0">
<font size=6 color="0000FF">神経衰弱♪</font>
<input type=button name="st1" value="開始" onClick=main()>
<input type=text size=8 name="tm" value="0分0秒">
</td>
</tr>
<td bgcolor="FFFFA0" valign=top>
※ここには、いろんな情報を表示しますにゃ<br>
先攻：
<select name="player1">
<option value=0>人間</option>
<option value=1>ＣＯＭ Ｌｖ１</option>
<option value=2>ＣＯＭ Ｌｖ２</option>
<option value=3>ＣＯＭ Ｌｖ３</option>
<option value=4>ＣＯＭ Ｌｖ４</option>
<option value=5>ＣＯＭ Ｌｖ５</option>
</select>
得点：<input type=text size=4 name="sc1" value="0点"><br>
後攻：
<select name="player2">
<option value=0>人間</option>
<option value=1>ＣＯＭ Ｌｖ１</option>
<option value=2>ＣＯＭ Ｌｖ２</option>
<option value=3>ＣＯＭ Ｌｖ３</option>
<option value=4>ＣＯＭ Ｌｖ４</option>
<option value=5>ＣＯＭ Ｌｖ５</option>
</select>
得点：<input type=text size=4 name="sc2" value="0点"><br>
ＧＡＭＥ：
<select name="gmt">
<option value=0>Ａ</option>
<option value=1>Ｂ</option>
<option value=2>Ｃ</option>
<option value=3>Ｄ</option>
</select>
ラッキーカード：
<select name="lc">
<option value=0>なし</option>
<option value=1>＋１点</option>
<option value=2>＋２点</option>
</select>
<br><br>
<table border=1>
<tr>
<td align=center>
<font size=2>Lucky</font><br>
<img name="img30" src="./card-10.gif"><br>
<font size=2>Card</font>
</td>
</tr>
</table>
<br><br>
<input type=text size=40 name="h1" value="［開始］をクリックするのにゃ"><br>
<input type=text size=40 name="h2" value=""><br>
</td>
</tr>
いろいろ増えましたにゃ。「開始」のボタンの隣の「0分0秒」は、ゲーム開始から終了までの時間を表示するためのものにゃんですけど、実はプレイヤーじゃにゃくて「作る人の都合」で設置していますにゃ。今はまだ動かにゃいんですけど、この後いろいろ作っていくと１秒ごとに表示が変わるようになりますにゃ。でも、バグや何らかの不具合でプログラムが正しく動作しにゃい状態になった時、いつまで待っても進まにゃいようになるから、にゃにかおかしいってことがわかるんですにゃ。薄い黄色の部屋の中身が、がらっと変わりましたにゃ。「先攻」「後攻」の横にある白い四角は「セレクト」というもので、クリックすると選択肢がいくつか表示されますにゃ。その中のどれかひとつを選んでクリックすると、白い四角の中の表示が変わりますにゃ。ここでは、先攻と後攻のプレイヤー（人間またはコンピュータ）を選択するために使いますにゃ。その横に、得点を表示するための場所を作りましたにゃ。その下に「ＧＡＭＥ」と「ラッキーカード」のセレクトがありますにゃ。さっきとおなじように選択できますにゃ。真ん中の左寄りにあるカードの画像は、ラッキーカードを表示するために使いますにゃ。ルールの詳しい説明はまたそのうちってことにして、今はゲームを始める前にいろいろ選べるってことだけ覚えておいてくださいにゃ。それぞれのセレクトを選択して「開始」をクリックすると、灰色のところにある枠の中に４行の表示が出るはずですにゃ。それぞれ一番上を0番目として何番目の選択肢が選ばれたかを表していますにゃ。この後の説明は、読み飛ばしても問題ありませんにゃ。
・「var player=new Array(2);」
この記述はスクリプトの始め、言い換えると関数としてまとめられている部分の外側にありますから、呼び出さにゃくてもパソコンに画面が読み込まれた時点で自動的に実行されますにゃ。今は１行だけですけど、そのうちどんどん増えていきますにゃ。この命令は、playerという名前の「配列」を使うことを宣言する、配列要素の数は2とするっていう意味にゃんですけど、配列要素の数は、ここで指定した数より多くても少なくてもちゃんと動きますから意味はありませんにゃ。配列っていうのは、別名「配列変数」とも言いますにゃ。ちょっと難しいんですけど、簡単に言うとおなじ名前の変数に番号（配列番号）を付けてそれぞれを別のものとして扱うためのもので、普通の変数が一軒家だとすると、配列は長屋みたいなものですにゃ。こういう形の配列を「１次元配列」っていうんですけど、ただ単に「配列」っていう時は、普通はこの１次元配列のことですにゃ。２次元以上の配列もあるんですけど、この講座では１次元配列しか扱いませんにゃ。
・「a=…」〜「です』";」
新しい情報を表示するために、古いものは消しますにゃ。
・「player[0]=document.hyoji.player1.value*1;」
配列「player」の「0番目の要素」として、player1の値を数値化して代入しますにゃ。難しそうに聞こえるかもしれにゃいんですけど、やっていることは普通の変数とまったくおなじですにゃ。[ ]の中の「0」は配列番号で、0以上の整数ならにゃんでもいいんですけど、普通は0から順番に使っていきますにゃ。
・「player[1]=document.hyoji.player2.value*1;」
配列「player」の「1番目の要素」として、player2の値を数値化して代入しますにゃ。
・「gametype=document.hyoji.gmt.value*1;」
変数gametypeにgmtの値を数値化して代入しますにゃ。
・「lcrule=document.hyoji.lc.value*1;」
変数lcruleにlcの値を数値化して代入しますにゃ。
・「c="プレイヤー１は "+player[0]+" です\n";」
配列playerの0番目の要素（player[0]）の値を表示するための文字列を作っていますにゃ。「\n」は改行するという意味で、ＪａｖａＳｃｒｉｐｔでは<br>の代わりにこれを使いますにゃ。
・「c=c+"プレイヤー２は "+player[1]+" です\n";」
配列playerの1番目の要素（player[1]）の値を表示するための文字列で、前の行で作った文字列の末尾に追加していますにゃ。「\n」がありますから、この時点で文字列cは２行になりますにゃ。
・「c=c+"ゲームタイプは "+gametype+" です\n";」
変数gametypeの値を表示するための文字列を、元の文字列の末尾に追加していますにゃ。
・「c=c+"ラッキーカードのルールは "+lcrule+" です\n";」
変数lcruleの値を表示するための文字列を、元の文字列の末尾に追加していますにゃ。文字列はこれで終わりですから、本当は最後の「\n」は必要にゃいんですけど、後でにゃにか追加したくなった時のために付けていますにゃ。これで文字列cは４行になりましたにゃ。
・「<input type=text size=8 name="tm" value="0分0秒">」
tmという名前の場所を作って、そこに「0分0秒」と書きますにゃ。今は動きませんけど、そのうちゲーム中に時間が進んでいくようになりますにゃ。
・「※ここには…」
これはもうわかっていることですから、消しますにゃ。
・「<select name="player1">」「</select>」
player1という名前のセレクトの始まりと終わりですにゃ。
・「<option value=0>人間</option>」
セレクトの中の0番目の選択肢で、中に「人間」と書きますにゃ。これが選ばれた時、player1の値は「0」になりますにゃ。
・「<option value=1>ＣＯＭ Ｌｖ１</option>」
セレクトの中の1番目の選択肢で、中に「ＣＯＭ Ｌｖ１」と書きますにゃ。これが選ばれた時、player1の値は「1」になりますにゃ。この後、5番目（上から６個目）まではおなじことですから、説明は省略しますにゃ。「人間」〜「ＣＯＭ Ｌv５」は、好きな言葉に変えても大丈夫ですにゃ。例えば漫画やゲームのキャラクタ、芸能人やスポーツ選手の名前などに変更すると、ゲームの雰囲気がちょっと変わって面白いかもしれませんにゃ。
・「<input type=text size=4 name="sc1" value="0点"><br>」
sc1という名前の場所を作って、そこに「0点」と書きますにゃ。これは、先攻のプレイヤーの得点を表示するために使いますにゃ。
・「<select name="player2">」「</select>」
player2という名前のセレクトの始まりと終わりですにゃ。
・「<option value=0>人間</option>」
セレクトの中の0番目の選択肢で、中に「人間」と書きますにゃ。これが選ばれた時、player2の値は「0」になりますにゃ。あとは、さっきとおなじですから、説明は省略しますにゃ。
・「<select name="gmt">」「</select>」
gmtという名前のセレクトの始まりと終わりですにゃ。選ばれた選択肢によって、値が決まりますにゃ。これは、ゲームタイプ（ゲームの細かいルール）を選択するために使いますにゃ。optionの説明は、さっきとおなじですから省略しますにゃ。
・「<select name="lc">」「</select>」
lcという名前のセレクトの始まりと終わりですにゃ。これは、ラッキーカードの扱い方を選択するために使いますにゃ。optionの説明は、さっきとおなじですから省略しますにゃ。
・「<table border=1>」「</table>」
ラッキーカードを表示するために、薄い黄色の部屋の中にもうひとつ、１部屋しかにゃいテーブルを作っていますにゃ。
・「<font size=2>」「</font>」
この中に書く文字を通常より小さいサイズにしていますにゃ。
・「<img name="img30" src="./card-10.gif">」
ここにcard-10.gif（カードの裏の画像）を表示して、この画像にimg30という名前を付けますにゃ。
・「［開始］をクリックするのにゃ」
ゲームを始めようとする人が「どうやって始めるのかわからにゃい」かもしれませんから、最初から説明文を表示するようにしますにゃ。もちろん、好きな言葉に変えていただいてかまいませんにゃ。猫語が嫌いなら「クリックしてください」、ウケを狙うなら「クリックするのでござる」とか「クリックしやがれこの豚野郎」とかでも問題ありませんにゃ。
次は、カードを並べるんですけど、画像としてのカードはもう画面に並んでいますから、配列を作ってプログラム内でカードを並べますにゃ。本当はfunction mainの中にちょっと書き加えるだけでいいんですけど、説明の都合で、実際のゲームでは必要にゃい関数をひとつ追加しますにゃ。青い文字の部分を追加してくださいにゃ。さっきとおなじで、関係にゃいところは省略していますにゃ。保存してアップロードして見に行くと、こういうものができていると思いますにゃ。
<html>
<head>
<title>神経衰弱♪</title>
<script language="JavaScript">
<!--
var player=new Array(2);var p=new Array(30);
// メイン
function main()
{
player[0]=document.hyoji.player1.value*1;
player[1]=document.hyoji.player2.value*1;
gametype=document.hyoji.gmt.value*1;
lcrule=document.hyoji.lc.value*1;
c="プレイヤー１は "+player[0]+" です\n";
c=c+"プレイヤー２は "+player[1]+" です\n";
c=c+"ゲームタイプは "+gametype+" です\n";
c=c+"ラッキーカードのルールは "+lcrule+" です\n";
document.hyoji.text1.value=c;
for (i=0;i<=6;i++)
{
for (j=0;j<=3;j++)
{
p[i*4+j]=i+1;
}
}
p[28]=8;p[29]=8;
h=carddataput();
}
// マウスクリック処理
function pic(n)
{
c=""+n+"番目のカードをクリックしましたにゃ";
document.hyoji.h1.value=c;
}
// カードの内容表示
function carddataput()
{
c="";
for (i=0;i<=4;i++)
{
for (j=0;j<=5;j++)
{
a=i*6+j;
c=c+"["+p[a]+"]";
}
c=c+"\n";
}
document.hyoji.text1.value=c;
}
// -->
</script>
一般的なトランプのカードは、ジョーカーを含めにゃい場合、１組５２枚ですにゃ。このゲームは、それをちょっと簡単にして１組３０枚のカードを使いますにゃ。その内訳は「１〜７の数字カード＝各４枚」「その他のカード＝２枚」で、「その他のカード」は選択したゲームタイプによって変わるようにしたいんですけど、今のところは「０の数字のカード＝２枚」にしておきますにゃ。今回追加した内容は大きく分けて３つありますにゃ。（１）カードの数字を入れるための配列を宣言する（２）０枚目（左上角のカード）から３枚目までの４枚のカードを「１」、４枚目から７枚目までの４枚のカードを「２」…２４枚目から２７枚目までの４枚を「７」、最後に残った２枚を「０」とする（３）カードの数字を目で見て確認するための実際のゲームでは使わにゃい関数を作る、この３つですにゃ。「開始」をクリックすると、カードの数字が何にゃのかわかりますにゃ。この後、また解説をするんですけど、わかんにゃくてもいい人は読み飛ばしてくださいにゃ。
・「var p=new Array(30);」
pという名前の配列を使うことを宣言しますにゃ。カードは３０枚ですから、便宜上、配列要素の数を30にしてるんですけど、実際には無意味ですにゃ。pという名前に意味はにゃいんですけど、わたしは特に名前を付ける必要のにゃい配列を使う時、pまたはppという名前を付けるようにしていますにゃ。
・「for (i=0;i<=6;i++)」「{」「}」
繰り返し（ループ）処理の始まりと終わりですにゃ。ちょっと難しいかもしれにゃいんですけど、これは本当に大事なことですから、部分ごとに分けて詳しく説明しますにゃ。
・「for ( )」
・( )の中の条件に従って、「{」と「}」に囲まれたいくつかの命令を繰り返し実行しますにゃ。
・「i=0;」
この繰り返し処理の回数（より正確に言うと繰り返し処理が終わる条件）を決めるための変数iの初期値を0にしますにゃ。
・「i<=6;」
繰り返し処理を続けて良い条件ですにゃ。この場合は「変数iの値が6以下（6またはそれより小さい）であれば繰り返し処理を続ける」ことになりますにゃ。
・「i++」
変数iの値に1を加えるっていう意味で、ここは「i=i+1」と書いても意味はまったくおなじですにゃ。数学ではありえにゃい等式みたいに見えるんですけど、「=」はイコールではにゃくて「代入」ですにゃ。「i=i+1」は「変数iの新しい値として、変数iの元の値に1を加えた数値を代入する」っていう意味で、にゃんか難しいことを言ってるように聞こえるんですけど、ようするに「iの値が1増える」っていうだけの話ですにゃ。「i++」は、それとおなじことを言い換えているだけですにゃ。そして、ここが大事にゃんですけど、この「iの値が1増える」という処理は繰り返し処理の最後に自動的に実行されますにゃ。言い換えると「{」と「}」に囲まれたすべての命令を実行するとiの値が１増えるってことですにゃ。
・「 for (j=0;j<=3;j++)」「{」「}」
さっきとおなじ繰り返し処理にゃんですけど、この命令はさっきの繰り返し処理の「{」と「}」の内側にありますにゃ。つまり、ここでは繰り返し処理の中で別の繰り返し処理を実行していることになりますにゃ。こういう形の繰り返し処理を２重ループと言いますにゃ。２重ループだということをわかりやすくするために、内側のループの行の頭にスペースを入れていますにゃ。ここでは扱いませんけど、３重ループや４重ループも作ろうと思えば作れますにゃ。
・「for ( )」
・( )の中の条件に従って、「{」と「}」に囲まれたいくつかの命令を繰り返し実行しますにゃ。さっきとおなじにゃんですけど、これは本当に大事なことで、この機会にぜひ覚えていただきたいですから、復習の意味でもう１回説明しますにゃ。
・「j=0;」
この繰り返し処理の回数を決めるための変数jの初期値を0にしますにゃ。理由はよくわかんにゃいんですけど、昔から「for文（forループ）を使う時の変数はi」「２重ループにする時の変数はj」「３重ループにする時の変数はk」というのが一般的ですにゃ。他の変数名を使っても問題ありませんにゃ。
・「j<=3;」
繰り返し処理を続けて良い条件ですにゃ。この場合は「変数jの値が3以下であれば繰り返し処理を続ける」ことになりますにゃ。
・「j++」
変数jの値に1を加えるっていう意味で、すべての命令が実行された時、自動的に実行されますにゃ。いい機会ですから、繰り返し処理の回数と変数の値の関係を、もうちょっと詳しく説明しますにゃ。
・１回目 変数jの値は0ですにゃ。命令を実行した後、変数jの値は1増えて1になりますにゃ。「j<=3」の条件にあてはまりますから、繰り返し処理を続けますにゃ。
・２回目 変数jの値は1ですにゃ。「{」と「}」の間にある命令を始めから実行しますにゃ。その後、変数jは１増えて2になりますにゃ。「j<=3」の条件にあてはまりますから、繰り返し処理を続けますにゃ。
・３回目 変数jの値は2ですにゃ。また命令を実行して、変数jの値は１増えて3になりますにゃ。「j<=3」の条件にあてはまるかどうかにゃんですけど、「<=」はそれ以下（おなじまたはそれより小さい数）という意味ですから、これは条件にあてはまりますにゃ。繰り返し処理を続けますにゃ。
・４回目 変数jの値は3ですにゃ。また命令を実行して、変数jの値は１増えて4になりますにゃ。「j<=3」の条件から外れてしまいましたから、ここで繰り返し処理を終わりますにゃ。
繰り返し処理（forループ）がどうなっているのか、にゃんとなくおわかりいただけましたかにゃ？
・「p[i*4+j]=i+1;」
この命令の意味を解説する前に、この命令を何回実行するのかちょっと考えてみますにゃ。まず、この命令は「for (j=0;j<=3;j++) { }」で繰り返し処理されますにゃ。その回数は、さっき説明した通り４回ですにゃ。その「for (j=0;j<=3;j++) { }」は、外側のループ、つまり「for (i=0;i<=6;i++) { }」の中にあって、繰り返し処理されていますにゃ。さて、その回数は何回ですかにゃ？ 変数iの最初の値が0で、１回実行するたびに1ずつ増えて、6以下であれば繰り返し処理を続ける、7になったら繰り返し処理を終わるってことですから、答は７回ですにゃ。つまり、この２つの２重ループで４回繰り返す処理を含む命令を７回繰り返すことになりますから、内側のループ（jループ）の中の命令が実行される回数は４×７＝２８回ですにゃ。
話を元に戻して、この命令の意味は、配列pの『i×4＋j』番目の要素として、変数iの値に1を足した値を代入するですにゃ。ちょっとわかりにくいですにゃぁ。変数iとjは繰り返し処理のたびに1ずつ増えるから、話がややこしくなりそうですにゃ。１回目から順番に考えてみますかにゃ。
・１回目 変数iの値は0、変数jの値も0ですにゃ。「i*4+j」は「0×4＋0」になりますから、答は0ですにゃ。つまり、この命令の前半は「p[0]」と書くのとおなじことになりますにゃ。変数iの値が0ですから、「i+1」は1ですにゃ。つまり、この命令の後半は「=1」と書くのとおなじことで、まとめると、この命令は「p[0]=1」とおなじことで、意味は配列pの0番目の要素として数値1を代入するにゃんですけど、ようするに「0番目（実際には１枚目）のカードの数字を『１』にする」って言ってるだけの話ですにゃ。
・２回目 変数iの値は0、変数jの値は1ですにゃ。２重ループは内側のループを先に繰り返しますから、iの値が増える前にjの値が（条件から外れるまで）増えますにゃ。「i*4+j」は「0×4＋1」で1になりますにゃ。「i+1」はさっきとおなじで1ですにゃ。この命令の意味は「配列pの1番目の要素として数値1を代入する」で、わかりやすく言うと「1番目（２枚目）のカードの数字も『１』にする」ってことですにゃ。３回目と４回目はおなじことですから、説明は省略しますにゃ。
・５回目 変数iの値は1になって、変数jの値は0に戻りますにゃ。２重ループは内側のループの繰り返しが終わると、外側のループの命令をまた始めから実行するんですけど、そこには内側のループを始めるという命令がありますにゃ。その命令を実行するということは、内側のループをまた始めから繰り返すってことで、「j=0」が実行されて変数jの値は0に戻るんですにゃ。「i*4+j」は「1×4＋0」で4になりますにゃ。「i+1」は2になりますにゃ。この命令の意味は「配列pの4番目の要素として数値2を代入する」で、わかりやすく言うと「4番目（５枚目）のカードの数字を『２』にする」ってことですにゃ。６回目から２８回目までは、おなじことになりますから説明は省略しますにゃ。この命令を２８回繰り返して実行すると、そのたびに数値が変わって、配列pの0番目から27番目までの要素として1〜7の数値が４個ずつ代入されて、２８枚目までのカードが「１〜７の数字カード：各４枚」になりますにゃ。何を言っているのかさっぱりわからにゃくても大丈夫ですにゃ。「開始」をクリックするとわかりますにゃ。
・「p[28]=8;p[29]=8;」
２つの命令を１行にまとめていますにゃ。それぞれ「配列pの28番目の要素として数値8を代入する」「配列pの29番目の要素として数値8を代入する」っていう意味ですにゃ。ようするに、最後に残った２枚のカードを８番目のカード(数字は０）にするってことですにゃ。
・「h=carddataput();」
carddataputという名前の関数を呼び出して実行しますにゃ。今までは、ボタンや画像をクリックした時に関数を呼び出していたんですけど、こういう風にプログラムの中で関数を呼び出すこともできますにゃ。「h=」というのは、本来の意味は「戻り値」にゃんですけど、関数を呼び出すということをわかりやすくするために付けてるだけで、特に意味はありませんにゃ。省略しても大丈夫ですにゃ。
・「function carddataput()」「{」「}」
carddataputという名前の関数の始まりと終わりですにゃ。その上の行は注釈行ですにゃ。
・「c="";」
文字列cを「何もにゃい」にしますにゃ。
・「for (i=0;i<=4;i++)」「{」「}」
さっきも出て来た繰り返し処理（iループ）ですにゃ。変数iが0から始まって、1ずつ増えて、4以下であれば繰り返しを続ける（5になったら繰り返しが終わる）ことになりますから、繰り返しの回数は５回で、これは、カード（この場合はカードの中身のデータ）を並べて表示する時の縦の枚数とおなじになるようにしていますにゃ。
・「for (j=0;i<=5;j++)」「{」「}」
繰り返し処理（jループ）で、２重ループの内側ですにゃ。変数jが0から始まって、1ずつ増えて、5以下であれば繰り返しを続けることになりますから、繰り返しの回数は６回で、これは、カードを並べて表示する時の横の枚数とおなじになるようにしていますにゃ。
・「a=i*6+j」
これは、次の行の命令の中におなじ意味のことを書いてもいいんですけど、わかりやすくするために、こうしましたにゃ。内側と外側のループを繰り返す（変数jとiの値が増えていく）たびに、変数aの値（計算の結果）が変わっていきますにゃ。細かい説明は省略しますけど、この命令は３０回実行されて、変数aの値は0〜29になりますにゃ。ちなみに、この場合のaのように、特に意味を持たずにその場で使うだけの変数のことを「汎用変数」って言うんですけど、別に知らにゃくてもいいですにゃ。
・「c=c+"["+p[a]+"]";」
文字列cに新しい文字列をくっつけますにゃ。１回目は文字列cは「何もにゃい」ですから、ここでくっつけるものがそのまま文字列cになりますにゃ。２回目以降は、末尾に追加していきますにゃ。「"["」と「"]"」は、表示結果を見やすくするために付けただけですにゃ。大事なのは「p[a]」で、これは配列pのa番目の要素っていう意味ですにゃ。さっき説明した通り、繰り返しのたびに変数aは0〜29まで変わっていきますにゃ。つまり、この命令を繰り返し実行することで配列pの0番目〜29番目の要素（＝カードの数字）を文字列cに追加していくことになりますにゃ。このへんは、言葉で説明するより、結果を見ていただくほうがわかりやすいかもしれませんにゃ。
・「c=c+"\n";」
「\n」は「改行」という意味で、文字列cに改行を追加する、つまり、表示される結果がここで改行されるってことですにゃ。ここで注目していただきたいのは、この命令は内側のループが終わった時（ループの外）に実行されて、その場所は外側のループの中でもあるってことですにゃ。具体的に言うと、この命令は文字列cに新しい文字列を６回付け加えた後、１回ずつ実行されることになって、その回数は５回（＝外側のループの繰り返し回数）ですにゃ。にゃんか難しいことを言ってるように聞こえますけど、ようするに「カード６枚分の情報を書いたら改行する」っていうだけの話ですにゃ。５回目（最後）の改行は、本当は必要にゃいんですけどにゃ。
・「document.hyoji.text1.value=c;」
この命令は、ループの外にありますから、１回しか実行されませんにゃ。文字列に新しい文字列を追加するという命令を３０回（改行も数に含めると３５回）繰り返して、最終的にできあがった文字列cの値をtext1に表示しますにゃ。
function cardputは、ゲームをするのには必要にゃい、カードの中身が見てわかるようにするためだけに作ったものにゃんですけど、プログラム内でどういうことをやっているのか、ちょっとはおわかりいただけましたかにゃ？