足し算または引き算の問題を表示して答えを入力するゲームを作ります。
ただし、答えが2桁以上あると、ボタン操作で簡単に答えてもらうという訳にはいきません。
そこで、問題の方をボタンで埋めるようにします。
例えば、「２＋５＝７」ですが、これを「２＋？＝７」と表示して、？の部分をボタンで選びます。
こうすれば、１～９のボタンを用意して対応することができます。ただし、足し算と言っても、実質は引き算の問題ということになります。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>たすひく計算ゲーム</title> </head> <body> <h3>たすひく計算ゲーム</h3> <hr> </body> </html>
エディタ（メモ帳）とブラウザ（Internet Explorer）を使って基本のタグを書いたHTMLファイルを作成します。
まずはメモ帳を開き、左記のタグを記入して、デスクトップに「名前を付けて保存」します。ファイル名は「tasuhiku.html」です。
保存が出来たら、アイコンがデスクトップに出てくるので、ダブルクリックして開きます。
画面の左右にメモ帳とブラウザそれぞれのウインドウを置いて作業しましょう。
メモ帳を閉じてしまった場合は、アイコンの上で右クリックしてショートカットメニューを表示させます。「プログラムから開く」の中から「NotePad」を選ぶと、メモ帳でファイルを開くことができます。
問題文を表示するためにテーブルを用意します。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<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を付けます。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<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を呼び出し、ボタンに対応した数値を送ります。
問題を表示するスクリプトを作りましょう。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<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 type="text/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の後ろには「+」も表示しています。あとで引き算を作るときに切り換えする必要があるからです。
これに対して、答えの方は「=」をテーブル内で表示させています。
次は答えのボタンを入力したときに、答えが正しいかどうか判断するスクリプトを作りましょう。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<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 type="text/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を呼び出します。
引き算は、足し算のときの問題（変数q1）と答え（変数a1）を入れ換えれば簡単に作れます。
足し算と引き算の問題が交互に表示されるようにしましょう。
<script type="text/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>
メインの処理では、問題文の表示をする前に、変数keimonを「0」に設定しておきます。
これがフラグ（印）となって、「0」ならば足し算、「1」ならば引き算をします。
この変数keimonを1回ごとに切り換えます。
ユーザー関数mondaiの中で、足し算と引き算をif文で切り換えます。
変数keimonが「0」のときは足し算ですから、そのままif文の真の場合に実行します。
else以下で引き算を表示させます。足し算との違いは、２つの変数q1と変数a1が入れ替わっているのと、「+」が「-」に変更されています。
あと、if文とelse文の処理の最後に、それぞれ変数keimonを切り換える式が入っています。
これによって次の時に処理が切り替わります。
少し改良をして、答えのボタンを押すと下に正解の状況を表示するようにしたいと思います。
</table> <hr> <div id="list"></div> <script type="text/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を画面に表示し、最後に次の問題を表示させます。