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

「たすひく計算ゲーム」のソースと解説

【ゲームの説明】

足し算または引き算の問題を表示して答えを入力するゲームを作ります。

ただし、答えが2桁以上あると、ボタン操作で簡単に答えてもらうという訳にはいきません。
そこで、問題の方をボタンで埋めるようにします。

例えば、「２＋５＝７」ですが、これを「２＋？＝７」と表示して、？の部分をボタンで選びます。
こうすれば、１〜９のボタンを用意して対応することができます。ただし、足し算と言っても、実質は引き算の問題ということになります。

<html>
<head>
<title>たすひく計算ゲーム</title>
</head>
<body>
<h3>たすひく計算ゲーム</h3>
<hr>

</body>
</html>

【保存ファイルの準備】

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

</body>
</html>

【テーブルの作成】

問題文を表示するためにテーブルを用意します。
問題の最初の数字、2つ目の数字、答えの数字を３つの枠に分けます。

最初の数字は、<span>タグを使って「mon」という名前の表示場所を作ります。

2つ目の数字が回答ボタンになります。ここにはフォームを置きます。枠だけ用意しておきます。

3つ目の枠には答えの数字を表示します。<span>タグで「kotae」とIDを付けます。
<html>
<head>
<title>たすひく計算ゲーム</title>
</head>
<body>
<h3>たすひく計算ゲーム</h3>
<hr>
<table border="0" align="center">
<tr>
<td><span id="mon"></span></td>
<td><form>
<input type="button" value=" 1 " onClick="keisan(1)"><br>
<input type="button" value=" 2 " onClick="keisan(2)"><br>
<input type="button" value=" 3 " onClick="keisan(3)"><br>
<input type="button" value=" 4 " onClick="keisan(4)"><br>
<input type="button" value=" 5 " onClick="keisan(5)"><br>
<input type="button" value=" 6 " onClick="keisan(6)"><br>
<input type="button" value=" 7 " onClick="keisan(7)"><br>
<input type="button" value=" 8 " onClick="keisan(8)"><br>
<input type="button" value=" 9 " onClick="keisan(9)">
</form></td>
<td>=<span id="kotae"></span></td>
</tr>
</table>

</body>
</html>

【フォームの設置】

１〜９までのボタンを改行して縦に並べます。
ボタン名の数字の両側にはスペースが入っています。こうしておかないとボタンの幅が小さくなってしまいますので、押しやすいように幅を広げています。
ボタンを押すとユーザー関数keisanを呼び出し、ボタンに対応した数値を送ります。

<html>
<head>
<title>たすひく計算ゲーム</title>
</head>
<body>
<h3>たすひく計算ゲーム</h3>
<hr>
<table border="0" align="center">
<tr>
<td><span id="mon"></span></td>
<td><form>
<input type="button" value=" 1 " onClick="keisan(1)"><br>
<input type="button" value=" 2 " onClick="keisan(2)"><br>
<input type="button" value=" 3 " onClick="keisan(3)"><br>
<input type="button" value=" 4 " onClick="keisan(4)"><br>
<input type="button" value=" 5 " onClick="keisan(5)"><br>
<input type="button" value=" 6 " onClick="keisan(6)"><br>
<input type="button" value=" 7 " onClick="keisan(7)"><br>
<input type="button" value=" 8 " onClick="keisan(8)"><br>
<input type="button" value=" 9 " onClick="keisan(9)">
</form></td>
<td>=<span id="kotae"></span></td>
</tr>
</table>

<script language="javascript">
mondai();

function mondai() {
//問題の作成
q1 = Math.floor(Math.random() * 9) +1;
q2 = Math.floor(Math.random() * 9) +1;
a1 = q1 + q2;

//足し算
document.getElementById("mon").innerHTML = q1 + "+";
document.getElementById("kotae").innerHTML = a1;
}
</script>
</body>
</html>

【初期設定のスクリプト】

まず、問題を表示するスクリプトを作りましょう。

問題の表示は、１つ答える毎に繰り返されるため、ユーザー関数mandaiに分けて考えます。

初期設定は特に必要がないので、メインスクリプトから即座にユーザー関数mondaiを呼び出します。

【問題の表示】

ユーザー関数mondaiを作っていきましょう。

「問題の作成」のところです。
変数q1と変数q2にそれぞれ乱数を発生させて１〜９までの数値を入れています。
この２つを足して変数a1に入れます。
これで問題を１つ作って答えを出しています。

次に「足し算」の部分です。
作成した問題から変数q1の数値をmonに表示し、変数a1の数値を答えに表示しています。
変数q1の後ろには「+」も表示しています。あとで引き算を作るときに切り換えする必要があるからです。
これに対して、答えの方は「=」をテーブル内で表示させています。

<html>
<head>
<title>たすひ計算くゲーム</title>
</head>
<body>
<h3>たすひく計算ゲーム</h3>
<hr>
<table border="0" align="center">
<tr>
<td><span id="mon"></span></td>
<td><form>
<input type="button" value=" 1 " onClick="keisan(1)"><br>
<input type="button" value=" 2 " onClick="keisan(2)"><br>
<input type="button" value=" 3 " onClick="keisan(3)"><br>
<input type="button" value=" 4 " onClick="keisan(4)"><br>
<input type="button" value=" 5 " onClick="keisan(5)"><br>
<input type="button" value=" 6 " onClick="keisan(6)"><br>
<input type="button" value=" 7 " onClick="keisan(7)"><br>
<input type="button" value=" 8 " onClick="keisan(8)"><br>
<input type="button" value=" 9 " onClick="keisan(9)">
</form></td>
<td>=<span id="kotae"></span></td>
</tr>
</table>

<script language="javascript">
mondai();

function mondai() {
//問題の作成
q1 = Math.floor(Math.random() * 9) +1;
q2 = Math.floor(Math.random() * 9) +1;
a1 = q1 + q2;

//足し算
document.getElementById("mon").innerHTML = q1 + "+";
document.getElementById("kotae").innerHTML = a1;
}

function keisan(num) {
a2 = q1 + num;
if (a1 == a2) {mondai();}
}
</script>
</body>
</html>

【答えの確認】

次は答えのボタンを入力したときに、答えが正しいかどうか判断するスクリプトを作りましょう。

ユーザー関数keisanを作ります。

ここでは、ユーザーが答えたボタンの数値を変数numで受け取っています。
これを変数q1と足して、変数a2に入れます。

次に変数a1と変数a2をif文で比較しています。正解なら次の問題を表示させたいので、ユーザー関数mondaiを呼び出します。

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

（省略）

<script language="javascript">
keimon = 0;
mondai();

function mondai() {
//問題の作成
q1 = Math.floor(Math.random() * 9) +1;
q2 = Math.floor(Math.random() * 9) +1;
a1 = q1 + q2;

if (keimon == 0) {
//足し算
document.getElementById("mon").innerHTML = q1 + "+";
document.getElementById("kotae").innerHTML = a1;
keimon = 1;
} else {
//引き算
document.getElementById("mon").innerHTML = a1 + "-";
document.getElementById("kotae").innerHTML = q1;
keimon = 0;
}
}

function keisan(num) {
a2 = q1 + num;
if (a1 == a2) {mondai();}
}
</script>

（省略）

【引き算の作成】

引き算は、足し算のときの問題（変数q1）と答え（変数a1）を入れ換えれば簡単に作れます。
足し算と引き算の問題が交互に表示されるようにしましょう。

メインの処理では、問題文の表示をする前に、変数keimonを「0」に設定しておきます。
これがフラグ（印）となって、「0」ならば足し算、「1」ならば引き算をします。
この変数keimonを1回ごとに切り換えます。

ユーザー関数mondaiの中で、足し算と引き算をif文で切り換えます。
変数keimonが「0」のときは足し算ですから、そのままif文の真の場合に実行します。
else以下で引き算を表示させます。足し算との違いは、２つの変数q1と変数a1が入れ替わっているのと、「+」が「-」に変更されています。

あと、if文とelse文の処理の最後に、それぞれ変数keimonを切り換える式が入っています。
これによって次の時に処理が切り替わります。

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

（省略）

</table>
<hr>
<div id="list"></div>

<script language="javascript">
keimon = 0;
kotae_list = "";
mondai();

function mondai() {
//問題の作成
q1 = Math.floor(Math.random() * 9) +1;
q2 = Math.floor(Math.random() * 9) +1;
a1 = q1 + q2;

if (keimon == 0) {
//足し算
document.getElementById("mon").innerHTML = q1 + "+";
document.getElementById("kotae").innerHTML = a1;
keimon = 1;
} else {
//引き算
document.getElementById("mon").innerHTML = a1 + "-";
document.getElementById("kotae").innerHTML = q1;
keimon = 0;
}
}

function keisan(num) {
a2 = q1 + num;
if (a1 == a2) {kotae_list += "○";}
else {kotae_list += "×";}
document.getElementById("list").innerHTML = kotae_list;
mondai();
}
</script>

（省略）

【成績の表示】

少し改良をして、答えのボタンを押すと下に正解の状況を表示するようにしたいと思います。

まず、テーブルの下に<div>タグを使って成績の表示場所を作ります。

次に、スクリプトのメイン処理に変数kotae_listを用意します。

ユーザー関数keisanの処理ですが、これまでは答えが間違っていると次に進めませんでしたが、正解か間違いかを表示するため、必ず次の問題へ進みます。

最初のif文の中で、変数ｋｏｔａｅ_ｌｉｓｔに「○」を付け足します。
次のelse文では、変数kotae_listに「×」を付け足しています。
次の行で、変数kotae_listを画面に表示し、最後に次の問題を表示させます。

【この時点の tasuhiku.html を別枠で表示】
戻る