「九九しりとり」のソースと解説

[Labyrinthe Noir]>[Top]>[Computer Forum]>[実用JavaScript集]>[こども工作教室]>

「九九しりとり」のソースと解説

<html>
<head>
<title>九九しりとり</title>
</head>
<body>
<h3>九九しりとり</h3>
<hr>

</body>
</html>

【保存ファイルの準備】

エディタ（メモ帳）とブラウザ（Internet Explorer）を使って基本のタグを書いたHTMLファイルを作成します。
まずはメモ帳を開き、左記のタグを記入して、デスクトップに「名前を付けて保存」します。ファイル名は「kuku.html」です。
保存が出来たら、アイコンがデスクトップに出てくるので、ダブルクリックして開きます。
画面の左右にメモ帳とブラウザそれぞれのウインドウを置いて作業しましょう。
メモ帳を閉じてしまった場合は、アイコンの上で右クリックしてショートカットメニューを表示させます。「プログラムから開く」の中から「NotePad」を選ぶと、メモ帳でファイルを開くことができます。

<html>
<head>
<title>九九しりとり</title>
</head>
<body>
<h3>九九しりとり</h3>
<hr>
<p>ルール：九九の答えの一の位を使ってしりとりします。一の位が０になったり、同じ答えを出すと負けです。</p>

</body>
</html>

【ゲームの説明】

ゲームを作る前にゲームのルールを理解しておかなければいけません。

九九を使ってのしりとりなので、九九の答えの一桁を次の九九の段にして、１～９の数字を掛けて次の答えを出します。
例えばこういう感じです。

「９×２＝１８」「８×６＝４８」「８×４＝３２」「２×２＝４」「４×５＝２０」

そして、上記のように下一桁が０になると、続けられないため負けになります。
また、同じ答えが出ても負けになるので、どの答えが出たのかメモを取っておく必要があります。

まずは、このルールを簡単に<body>に記述しましょう。

【４つのテーブル枠】

画面上には４つの枠をテーブルタグで作ります。

1つ目は、九九の最初の段数を決める数字を表示します。これを親数と呼ぶことにします。
２つ目で、九九の段数（親数）に掛ける数字を決めます。これを子数と呼ぶことにしましょう。子数はプレイヤーが選ぶので、ボタンを並べることにします。
３つ目は、登場した答えを記録する表を置きます。
４つ目には、ゲームをリセットするためのボタンを置くことにします。

枠内のものが中央に来るようにタグは<th>を使っておきます。

【親数の表示場所】

<span>タグを使って「oya」というIDの場所を作ります。

【答えのリストを表示する場所】

こちらも<span>タグを使って「kotae」というIDの場所を作ります。

<html>
<head>
<title>九九しりとり</title>
</head>
<body>
<h3>九九しりとり</h3>
<hr>
<p>ルール：九九の答えの一桁目を使ってしりとりします。一桁目が０になったり、同じ答えを出すと負けです。</p>
<table border="0" cellspacing="2" cellpadding="2">
<tr><th><span id="oya"></span></th></tr>
<tr><th><form>
<input type="button" value=" 1 " onClick="keisan(1)">
<input type="button" value=" 2 " onClick="keisan(2)">
<input type="button" value=" 3 " onClick="keisan(3)">
<input type="button" value=" 4 " onClick="keisan(4)">
<input type="button" value=" 5 " onClick="keisan(5)">
<input type="button" value=" 6 " onClick="keisan(6)">
<input type="button" value=" 7 " onClick="keisan(7)">
<input type="button" value=" 8 " onClick="keisan(8)">
<input type="button" value=" 9 " onClick="keisan(9)">
</form></th></tr>
<tr><th><span id="kotae"></span></th></tr>
<tr><th><form>
<input type="button" value="リセット" onClick="kotae_reset()">
</form></th></tr>
</table>
</body>
</html>

【子数の表示場所】

<form>とボタンを置きます。ボタンは９つ必要です。
ボタンを押すと次の答えを出すので、あらかじめ「onClick」で答えを呼び出す準備もしておきます。
ボタンが小さいと押しにくいので、表示（value）する数字の左右にスペースを入れてあります。

ユーザー関数keisanで、親数と子数を掛け算する必要があるということが判ります。

【リセットボタン】

このリセットボタンは、フォームのリセットではなく、答えの表示を元に戻すので、通常のボタンを使います。

フォームには<input type="reset">と表記するリセットボタンがあります。
このリセットボタンは、フォームの内容を最初の状態に戻すためのものです。
今回は、フォームには入力される項目はありませんので、リセットする部分がありません。名前はリセットボタンですが、リセット（やり直し）したいのは、答えの表なのでスクリプトを使って元に戻します。

このリセットボタンからスクリプトを呼び出すため、これにも「onClick」で呼び出すスクリプトを決めておきます。

ユーザー関数kotae_resetが初期状態の表を表示するためのスクリプトになります。

<html>
<head>
<title>九九しりとり</title>
</head>
<body>
<h3>九九しりとり</h3>
<hr>
<p>ルール：九九の答えの一桁目を使ってしりとりします。一桁目が０になったり、同じ答えを出すと負けです。</p>
<table border="0" cellspacing="2" cellpadding="2">
<tr><th><span id="oya"></span></th></tr>
<tr><th><form>
<input type="button" value="1" onClick="keisan(1)">
<input type="button" value="2" onClick="keisan(2)">
<input type="button" value="3" onClick="keisan(3)">
<input type="button" value="4" onClick="keisan(4)">
<input type="button" value="5" onClick="keisan(5)">
<input type="button" value="6" onClick="keisan(6)">
<input type="button" value="7" onClick="keisan(7)">
<input type="button" value="8" onClick="keisan(8)">
<input type="button" value="9" onClick="keisan(9)">
</form></th></tr>
<tr><th><span id="kotae"></span></th></tr>
<tr><th><form>
<input type="button" value="リセット" onClick="kotae_reset()">
</form></th></tr>
</table>

<script language="javascript">
kotae_reset()

function kotae_reset() {

}
</script>
</body>
</html>

【最初のスクリプト】

それでは、スクリプトを作っていきます。
最初にやらなければいけないのが、問題と答えの初期化です。

これはユーザー関数kotae_resetで予定している内容と同じなので、まずはそこから作っていきます。

流れとしては、スクリプトの最初にそのユーザー関数を呼び出して、あとはユーザー関数に任せます。

最初の流れなのでそのままスクリプトを書いても良いのですが、それではリセットボタンから同じ処理を呼び出すことができませんね。

このように同じ処理を繰り返す場合は、１つのユーザー関数にまとめてスクリプトを書くので、メインの流れからも呼び出して使います。

（省略）

function kotae_reset() {
//親数の決定
num_oya = Math.floor(Math.random() * 9) + 1;
document.getElementById("oya").innerHTML = num_oya;
}
</script>

（省略）

【親数の表示】

コメントアウトで説明書きも入れながらスクリプトを記入します。
まずは、しりとりを始める最初の親数を決めます。
変数num_oyaに１～９の数字を入れます。毎回開始の親数を変えるために、random()という関数を使って乱数を発生させます。

乱数とは、計算毎に毎回違う数字を発生さて作る数値のことです。これをすることで、ゲームに決まったパターンの動きではなく、意外性のある動きを作ります。
乱数の仕組みを詳しく知りたい場合は、以下の手順を１つ作る毎にブラウザを再読込して答えを確認すると良いでしょう。

乱数はまず、random()で発生します。このとき、０～１の間にある小さな小数です。０や１にはなりません。その間の小数と考えてください。
そして、これに９を掛けることで０～９の間の数値になります。そのままでは利用できないため、小数を整数に直します。
floor()を使って小数点以下の細かな数値をなくして、０～８までの９つの数値にします。
これに１を足すと１～９の９つの数値から乱数が得られることになります。

乱数を発生させたら、次の行で「oya」に対して、変数num_oyaの数値を含む文字列を出力しています。

（省略）

（省略）

【答えのリストを作成】

配列変数kotae_listを利用して答えのリストを用意します。
九九の答えが出たときに、その答えを要素とする配列に印を入れることにします。
印が先に入っていたら、同じ答えを出したということになります。

配列の要素は１～９０まで用意して、各要素の配列に「0」を入れておきます。

リストの配列が準備できたら、テーブルを組んで表示します。
表示部分は、使い回しが出来るように、別のユーザー関数にします。ここでは、ユーザー関数view_listへ処理を継続させるように記述しておきます。

（省略）

（省略）

【答えのリストを表示】

ユーザー関数view_listを作ります。
変数kotae_tableには、順次テーブル用のタグを入れていきます。
１～９０までの１０列＊９行の表を作っています。
それを２つの行程に分けているのは、テーブルの行の処理と列の処理を区分けするためです。

テーブルの前後には<table>タグがあります。
行の前後には<tr>タグが必要ですので、変数nを使って行単位の処理をしています。
その行の中で列の処理をします。１つの行に１～１０までの列を作ります。変数mを10回繰り返したら、次の変数nの処理に移ります。
変数ｒには変数mを一の位、変数nを10の位として、１～９０までの数字が順番に計算されて答えとして入ります。

この表を出力すると単純な数字の並びが出てきます。
あとで、九九をした答えが出たときには、この表の答えの部分に印を付けていくことになります。

複雑なことをしているように見えますが、行毎に<tr>タグを入れるために、このような手順が必要になってしまうのです。

（省略）

（省略）

【計算の実行】

ユーザー関数keisanを作ります。
子数のボタンを押すと九九の計算を実行します。

ボタンから送られてくる数字を変数numで受け取ります。これが子数になります。

親数は変数num_oyaに入っていますので、親数と子数を掛けた答えを変数num_kotaeに入れます。

次に配列変数に答えの印を付けます。ここでは、答えの要素に対して１を足しています。これで「0」だった数値が「1」になりますので、数値が「1」ならば答えが一度出たことの印になります。
ルールでは2度答えが出ると負けになりますので、2度目にはまた１足されるので、数値が「2」になります。これで負けの判定もできます。

3行目で、ユーザー関数view_listを呼び出しています。
印を付けた表を画面に表示するためです。

4行目では、答えの要素が「1」よりも大きい場合に、「OUT!!」というメッセージを画面に表示します。
これで負けだということが判ります。

4行目で、答えが「2」の場合としないことには意味があります。「1」より大きいということは「3」や「4」の場合も考えているのです。
答えを間違ってもそこで強制的にゲームを終わらせることはせず、続けてゲームができるので同じ間違いを何度もやる可能性があります。
なので、間違いを何度繰り返しても良いようにしているのです。

（省略）

（省略）

【答えリストの変更】

ユーザー関数view_listに出た答えの数字に印を付けて表示するように変更を加えます。

数字の表示は「kotae_table += "<th>"+r+"</th>"」の部分で行っています。
答えが１回出たときには、数字を白黒反転させます。
2回目には、枠の背景を赤くします。

最初のif文では、答えの要素に「2」以上の数値が入っていたときに、背景を赤、文字を白にします。
ここも前項目と同じで、「2」では判断せずに「1」より大きいという判断をしています。

2つ目のif文には頭にelseも付けます。これは1つ目のif文が真でなかったときだけ判断されることになります。

元々あった枠の表示はelseの後に入れて、２つのif文がどちらも偽の場合に実行されることになります。

これで３つのパターンに処理が分岐されることになります。

（省略）

（省略）

【答えの一の位を引き継ぐ】

答えが出たら、その一の位を引き継いでしりとりにします。

そこでif文の続きとして、答えが2回目でなかったときの処理としてelseを使います。

その中に2行追加します。

1行目は、引き継ぐために変数num_oyaに一の位を取りだしています。
num_kotaeを10で割ることで一の位が小数点以下になります。floorを使って小数点以下をなくして、10を掛ければ一の位がなくなり十の位が残ったことになります。これを元の数字から引き算すると今度は一の位が残ります。

例えばこういうことが起こっています。
num_kotae=「18」→１０で割ると「1.8」→floorで切り捨てると「1」→10倍すると「10」→元の「18」-「10」で「8」

2行目では、その新しい親数を表示しています。

（省略）

【親数が０になった場合】

さて、ここでもう１つのルールを確認します。
答えの一の位が「0」になったら負けでした。
これは親数が「0」になってはいけないからです。

そこで、親数が「0」の場合には、「OUT!!」のメッセージを表示させます。
続けて、答えの要素に１を足し、再度答えの表を表示して、答えを赤で表示します。

これでゲームとしては２つのルールを盛り込んで、スクリプトが完成したことになります。

（省略）

【ゲームを続けられるように改良する】

このままでは「0」が出るとゲームを続けられなくなります。
そこで、「0」が出ても１つ前の親数でゲームを継続できるようにしておきたいと思います。

一の位を変数num_oyaへ直接いれずに、一旦変数ｒに入れます。

次の変数num_oyaの表示は移動して、その次のif文が偽のときにだけ表示することにします。
これによって、OUTにならなかったときに親数を変更することになります。

また、最初の変更に合わせて、if文も変数num_oyaから変数rに変更します。

（省略）

（省略）

【改良：大きさと色を付ける】

親数の表示を大きくし、色を付けて見やすくしたいと思います。
また、どの計算を行ったか判るように表示をしたいと思います。

テーブルの1行目にある<span>タグで親数を表示しています。ここにタグを入れて、大きさと色を指定します。
<h1>で文字を最大に、<font>で青色を指定しています。もちろん、好きな大きさ、好きな色にしてもかまいません。

（省略）

（省略）

【改良：計算式の表示（１）】

親数の表示だけだったのを、計算式の表示に変更します。

まず、表示用の変数view_textを用意して、そこに計算式を文字列にして入れます。

出力部分は変数num_oyaを変数view_textに入れ換えます。

これで子数を押した後、親数と子数を掛け算する式とその答えが画面に表示されるようになりました。

（省略）

（省略）

【改良：計算式の表示（２）】

もう１段階、表示の改良を進めましょう。
画面の式の表示は、１つ前の問題と答えということになります。そこから一の位を取って来て、次の親数にして、次の子数を選んでもらいます。
これを判りやすく表現するために、これも計算式にします。

先に作った計算式の後ろに改行のための<br>タグを入れます。
次の行に、問題文となる計算式を作って、変数view_textに付け加えます。

（省略）

function kotae_reset() {
//親数の決定
num_oya = Math.floor(Math.random() * 9) + 1;
document.getElementById("oya").innerHTML = num_oya + "×<font color='#ff0000'>？</font>＝";
//リストの表示
kotae_list = new Array();
for (n = 1; n < 91; n++) {
kotae_list[n] = 0;
}
view_list();
}

（省略）

【改良：計算式の表示（３）】

上記の変更に合わせて、最初の表示も手直しします。
こちらは問題文だけになります。とても判りやすくなりました。

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

【完成】

九九しりとりはこれで完成です。
これなら一人でも遊べますし、複数でも交代でマウスを握って遊べます。
ウインドウを小さくして答えの表を見えなくすると更に難しくなります。

九九の学習として使う場合には、子数のボタンを押す前に声を出して九九の式と答えを言いましょう。

改良するとすれば、長く考えられないようにカウントダウンタイマーを取り付けたり、連続正解数の記録を表示するなど考えられます。

【ルール改善版】

オリジナル版のルールには５の段に問題点があります。５の段の答えには「0」か「5」しかありません。他の段に移動できないし、負けが見えています。これではゲーム性が損なわれるため、一の位が「0」の場合、十の位を取って継続するようにルールを変更します。

（省略）

（省略）

【５の段の問題を改善】

緑の部分を削除します。後ろから三行目の「}」も忘れずに削除してください。

新たに変数ｒが0の場合には、十の位を変数ｒに入れています。

ルールの説明文も「九九の答えの一の位を使ってしりとりします。一の位が０の場合は、十の位を使います。同じ答えを出すと負けです。」と変更しておきます。

（省略）

（省略）

【得点表示の作成】

連続して答えを出すと得点が得られるようにします。
ただし、間違ったときは得点を引きます。

【得点の表示場所】

得点表示をするために、テーブルに一行加えて、「score」という表示場所を作ります。
満点で36点になるので、「/36」を表示しています。

答えの組合せは３６通りしかありませんので、得点は最大で３６になります。
間違った選択をすると得点は引かれますので、その場合は満点になりません。

（省略）

function kotae_reset() {
//スコアのカウント
count = 0;
document.getElementById("score").innerHTML = count;
//親数の決定
num_oya = Math.floor(Math.random() * 9) + 1;
document.getElementById("oya").innerHTML = num_oya + "×<font color='#ff0000'>？</font>＝";
//リストの表示
kotae_list = new Array();
for (n = 1; n < 91; n++) {
kotae_list[n] = 0;
}
view_list();
}

（省略）

【得点の初期設定】

ユーザー関数kotae_resetに得点をカウントするための変数countを準備します。

（省略）

（省略）

【得点の計算と出力】

OUTの表示があった場合には、変数countから１を引いて、得点を減らします。

答えが被らなかったときは、変数countを１つ加算して得点を増やします。

最後に得点の表示をします。

（省略）

（省略）

【詰み状態の確認】

次の答えがない状態を詰み（チェックメイト）と言います。
子数を入力した後、次の問題が詰み状態かどうかを確認します。

詰み状態で無駄なクリックを続けても得点が減るばかりなので、その状態を気づかせるために確認を行います。

まず、親数に対して各子数を掛けて、配列変数kotae_listの答えの要素を調べます。「0」があればまだ答えが残っているいうことになりますので、その数を変数mに数えていきます。
変数mが最後に「0」ならば、残りは１つもないということです。

では、「詰み状態の確認」とコメントアウトした次から見て行きましょう。

1行目で、変数mを初期化しています。

2行目のfor文で変数nに子数を１から９まで入れて、3行目の式を繰り返し調べます。

3行目は、親数と子数を掛けた答えの要素を調べ、「0」ならば真です。真ならば、一度出た答えなので、変数mに１を加算します。

5行目で、変数mが「0」かどうか調べています。真ならば「CHECKMATE」とメッセージを表示します。

（省略）

（省略）

【完全回答の確認】

今度は、詰みとは言っても、全部完全に答えが出た場合にもメッセージを表示することにしましょう。

答えは36通りですので、得点が最大の36点になったら完璧（パーフェクト）と言えます。

「完全回答の確認」のコメントアウトから下を見ていきます。

1行目でif文を使って、変数countが「36」か調べています。真ならば2行目を実行します。

2行目は、「PERFECT!!!」のメッセージを表示しています。

3行目のelseから、if文が偽の場合に詰み状態の確認を行うために、4行目から６行目を囲っています。

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

戻る