Computer Programing

2004-12

特別授業「数当てゲームをつくろう」

 今回は、加藤先生ではなく 1 限アシスタントの波多野が担当します。稚拙な点などはご容赦下さい……一緒に学習していきましょう☆


 オフラインで数当てゲーム

 今日は、タイトルにある通り、数当てゲームをつくってみましょう。これまでの知識を総動員すれば、ほぼできてしまいます。さて、どんな数当てゲームにするのかというと……ちょっと、オフラインでゲームをしてみてもらいましょう。

用意するもの

  • 人( 2 人〜)
  • トランプのカード( A 〜 10 まで 10 枚・スート自由)

遊び方

  1. 1 人が親になり、カードを 1 枚引きます。
  2. 周りの人はカードの数字が何であるか予想し、親に言います。
  3. 親は、その数字とカードを比べ、カードの数字が予想よりも大きいか、小さいかのヒントを出します。
  4. 2 と 3 を繰り返し、数字を当てることができたらゲーム終了です。

 なんとなく、ゲームのイメージはわかりましたか? 今日はこのゲームを JavaScript でつくりましょう。

 画面の部品( object )

 このゲームをつくるにはいろいろな方法が考えられると思います。今回は、今までの復習をしてもらう意味で、画面のデザイン(部品)を指定します。

部品

  • 予想する数字を入力するフォーム
  • 入力された数字を判定するボタン
  • 親が出すヒントを表示するフォーム

 できれば、ヒントなしでこれらのフォーム・ボタンをつくれると良いのですが、ヒントがほしい方は 2004-10 を復習しましょう。わからない方は下のソースを参照してみてください。

<html>
<head>
</head>
<body>
数当てゲーム<br>
<br>
ランダムに生成される数が、 0 〜 9 までのどれであるかを当ててください。<br>
何回で正解できるかな?<br>
<br>
<form name="numbergame">
<input type="text" size="5" name="box" value="">
<input type="button" value="判定"><br>
<br>
<input type="text" value="" size="50" name="hint"><br>
</form>
</body>
</html>

 どのようにプログラムを組むか? 〜 ゲームの動きを置き換える 〜

 部品が揃ったら、今度はプログラムの中身をつくってみてください。――と言うと、「何をどうしたらいいかさっぱりわからない!」という悲鳴が聞こえてきそうです。そんなときにしてほしいのが、ひとつひとつの動きを「パソコンに何をさせるか」に置き換えていく、ということです。

例)「こんにちは。」と言いたい。
  → 「こんにちは。」と画面に表示させる。

 先ほど提示したゲームの中での行動を、ひとつひとつ置き換えてみましょう。(まず、自分で考えてみることが大切ですよ!)

行動 → パソコンにさせること

  1. 親がカードを引く。 → プログラムで数を決定させる。
  2. 相手が数を予想し、言う。( → フォームに数を入力する。) ※相手の行動なので、プログラムにする必要はありません。
  3. 親が数をチェックする。 → ボタンを押したときに数をチェックさせる。
    1. 数が合っていたら「正解」と言ってゲームを終える。 → 入力された数が等しかったら正解のアラートを出し、ゲームを終える。
    2. 数がそれよりも大きければ「もっと大きいです」とヒントを出す。 → フォームにヒントを表示する。
    3. 数がそれよりも小さければ「もっと小さいです」とヒントを出す。 → フォームにヒントを表示する。
  4. ( 2 と) 3 を繰り返す。 → ボタンを押したら新しく入力された数をチェックするようにする。

  JavaScript で命令を書く

 置き換えることができたら、それを JavaScript で書けば、プログラムはできあがります。さきほどつくったコードに、命令を書き加えていきましょう。

プログラムに数を決定させる

 まずは「 1 プログラムで数を決定させる。」をプログラムしてみましょう。 0 以上 1 未満の数をランダムに発生させるときは、以下のように書きます。

a = Math.random()

 これに 10 を掛ければ、 0 以上 10 未満の値を得ることができます。さらに、このままでは端数が出てしまうので、端数を切り捨てる関数 Math.floor() を使用します。

a = Math.floor( Math.random() * 10 )

 そして、プログラムが動き出す一番最初に数を決定すればよいわけです.このタイミングでなにか処理を行ないたいときの書き方は,今までずっと使ってきているので,わかるかと思います.

ヒント:onLoad="..."

数をチェックするタイミング

 ボタンを押したときに数をチェックするには、ボタンを押したときに「数をチェックする関数」を呼び出すようにします。書き方はやはり 2004-10 を参考にしましょう。また、入力した値を確定したときにもチェックするようにするには先週扱った onchange を使用します。

<input type="text" size="5" name="box" value="" onchange="check()">
<input type="button" value="判定" onclick="check()"><br>

あとは、関数 check の中身を書いてやればよいだけです.

数をチェックする

 数をチェックするとき、その反応は 3 通り考えられます。入力された数がランダムに決めた数と等しいとき、より大きいとき、より小さいときです。このチェックは if 文を使って次のように書けます.

if( 条件 1 )
{
   条件 1 にあったときの命令
}
else if( 条件 2 )
{
   条件 1 にあわず、条件 2 にあったときの命令
}
else
{
 条件 1 にも 2 にもあわないときの命令
}

条件のヒント: parseInt( document.numbergame.box.value ) が a よりも...???

数が合っていたとき

 数が合っていたときは、「正解です。」というメッセージを出しましょう。これにはアラートを使ってみます.ファイルを保存するときに「 OK 」「キャンセル」などを確認してくるあれです。次のように書くと、メッセージを出すことができます。

alert('正解です。');

 また、正解がでたら、新しくゲームがはじめられるように,正解の数を改めて決定するようにしておきます.

a = Math.floor... ;

数が大きい、または小さいとき

 フォーム hint に「もっと大きい数です。」「もっと小さい数です。」などのヒントの文を表示するようにしましょう。フォームに文字列を表示させる方法は、やはり 2004-10 を参考にしましょう。

ヒント:document.numbergame.hint.value = "...";

課題

 以上をふまえて、数当てゲームを完成させてください。(たぶん、成績には影響しません。たぶん。)


発展課題(難しめ)

 ゲーム開始時に別のウインドウを開いて、入力した数と、それについてのヒントが出るようにしてみましょう。