JavaScriptプログラミング演習（Web版テキスト）
説明スライドはこちら
１．目的
JavaScriptは、インターネットホームページで多く利用されているプログラミング言語です。実際にじゃんけんゲームを製作しながら、プログラムの構成と動作のしくみを学習しましょう。
２．ファイルの確認
以下のファイルをダウンロードし、 解凍します。(マウス右ボタンを押し、「対象をファイルに保存」を選択。デスクトップなどに一時保存して、解凍する。)
＊クロームブック等、文字コードがUTF-8のOSの場合は、こちらをご利用ください。
demo.htm HTMLファイル（JavaScriptの記述を含む) try.jpg 初期状態（画像） banzai.jpg バンザイ姿勢（PC側が勝利した時に使う画像） udekumi.jpg 腕組み姿勢（挑戦者側が勝利した時に使う画像） choki.gif チョキ動作(画像） gu.gif グー動作（画像） pa.gif パー動作（画像） start.gif じゃんけん動作（画像）
３．じゃんけんゲームの設計方針
１）０から１の乱数を発生させ、PC側の手｛グー，チョキ，パー｝を決定。
２）ボタン操作により、挑戦者側の手を決める。
３）勝敗をカウントし、画面に表示する。
４．プログラムの作成（demo.htmからの改良）
１）「チョキ」「パー」ボタンの追加
・テキストフォームの追加
次の２行を後半に追加して、チョキとパーのボタンを表示させます。
<INPUT TYPE="button" VALUE="チョキ" onClick="choki()">
<INPUT TYPE="button" VALUE="パー" onClick="pa()">
VALUE=" "で指定した文字がボタンに表示され、ボタンを押した時に実行する内容を onClick=" "で指定します。チョキボタンを押した時はchoki()が実行され、パーボタンを押した時は、pa()が実行されます。
・チョキボタン処理を追加
中ほどにある2-2）チョキボタンの処理部分に次の行を追加します。
// 勝負手グーの判定
if (r<0.34) { document.img.src="gu.gif";
setTimeout('win()', 3000); }
// 勝負手チョキの判定
if (r>=0.34 && r<0.67) { document.img.src="choki.gif";
setTimeout('draw()', 3000); }
// 勝負手パーの判定
if (r>=0.67) {document.img.src="pa.gif";
setTimeout('lost()', 3000); }
if命令は、ある条件によって処理の内容を変えたい場合に用います。この例題では、乱数rの値によってPCの手（グー，チョキ，パー）が決まり、勝敗が決定されるため、iｆ文を使用して後の処理を判断しています。
・パーボタン処理を追加
グーボタンやチョキボタンの処理を参考に、win(), draw(), lost()の選択を変え、2-3)パーボタンの処理に追加します。
２）勝ち・負け数のカウント
・テキストフォームの追加
<INPUT TYPE="TEXT" NAME="shou">勝<INPUT TYPE="TEXT" NAME="hai">負
TYPE=" "にTEXTを指定することにより、テキストフォームが生成されます。ここでは、勝ちを表示するテキストフォームに"shou"、負けを表示するフォームに"hai"と名前を付け、後に区別しています。
・勝ち・負けをカウントする変数を定義
k=0;
m=0;
ｋは、勝ちをカウントするための変数。ｍは負けとカウントするための変数としています。
・負けの場合のカウント処理。
m=m+1;
document.myform.shou.value=k;
document.myform.hai.value=m;
勝ち・負けをテキストフォームに表示するためにdocument命令があります。勝ち数は"shou"のフォームへ、負け数は、"hai"のフォームを指定します。
・勝ちの場合の処理。
k=k+1;
document.myform.shou.value=k;
document.myform.hai.value=m;
・引き分けの場合の処理。
document.myform.shou.value=k;
document.myform.hai.value=m;
Last Up Date:2015/05/15