JavaScriptプログラミング演習(Web版テキスト)

MS-PowerPoint説明スライドはこちら


1.目的

 JavaScriptは、インターネットホームページで多く利用されているプログラミング言語です。実際にじゃんけんゲームを製作しながら、プログラムの構成と動作のしくみを学習しましょう。

2.ファイルの確認

 以下のファイルをダウンロードし、 解凍します。(マウス右ボタンを押し、「対象をファイルに保存」を選択。デスクトップなどに一時保存して、解凍する。)

  jyanken.zip

demo.htm HTMLファイル(JavaScriptの記述を含む)
try.jpg 初期状態(画像)
banzai.jpg バンザイ姿勢(PC側が勝利した時に使う画像)
udekumi.jpg 腕組み姿勢(挑戦者側が勝利した時に使う画像)
choki.gif チョキ動作(画像)
gu.gif グー動作(画像)
pa.gif パー動作(画像)
start.gif じゃんけん動作(画像)

3.じゃんけんゲームの設計方針

 1)0から1の乱数を発生させ、PC側の手{グー,チョキ,パー}を決定。
 2)ボタン操作により、挑戦者側の手を決める。
 3)勝敗をカウントし、画面に表示する。

4.プログラムの作成(demo.htmからの改良)

 1)「チョキ」「パー」ボタンの追加
  ・テキストフォームの追加
   次の2行を後半に追加して、チョキとパーのボタンを表示させます。

<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の手(グー,チョキ,パー)が決まり、勝敗が決定されるため、if文を使用して後の処理を判断しています。

  ・パーボタン処理を追加
   グーボタンやチョキボタンの処理を参考に、win(), draw(), lost()の選択を変え、2-3)パーボタンの処理に追加します。

 2)勝ち・負け数のカウント
  ・テキストフォームの追加

<INPUT TYPE="TEXT" NAME="shou">勝<INPUT TYPE="TEXT" NAME="hai">負 
TYPE=" "にTEXTを指定することにより、テキストフォームが生成されます。ここでは、勝ちを表示するテキストフォームに"shou"、負けを表示するフォームに"hai"と名前を付け、後に区別しています。

  ・勝ち・負けをカウントする変数を定義

k=0;
m=0;
kは、勝ちをカウントするための変数。mは負けとカウントするための変数としています。

  ・負けの場合のカウント処理。

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