Ｊａｖａ Ｓｃｒｉｐｔの解説
９．ゲームの作り方（その３）
ゲームに欠かせない乱数の使い方を説明します。乱数とはでたらめの数値です。何らかの規則性があれば乱数とは言いません。
もぐら叩きゲームのように何処に出現させるか決めるのに乱数が使われます。
１．「もぐら叩きゲーム」の基礎
ゲームの部屋にある「ばい菌クリックゲーム」の基礎的な部分を説明します。
乱数を使うことにより絵の表示場所を変えます。
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
＜ＨＴＭＬ＞
＜ＨＥＡＤ＞
＜ＴＩＴＬＥ＞Java Script 例１＜／ＴＩＴＬＥ＞
＜ＳＣＲＩＰＴ ＬＡＮＧＵＡＧＥ＝”ＪａｖａＳｃｒｉｐｔ”＞
＜！−−
img0=new Image(48,48);img1=new Image(48,48);
img2=new Image(48,48);
img0.src="../game2/back1.gif";img1.src="../game2/peke1.gif";
img2.src="../game2/peke2.gif";
scrnx=8;scrny=1;
p_bact=0
var h_bact;
score=0;kaisu=0;
function display(){cnt=0;
ｆｏｒ (ｙ＝０；ｙ＜ｓｃｒｎｙ；ｙ＋＋){
ｆｏｒ (ｘ＝０；ｘ＜ｓｃｒｎｘ；ｘ＋＋){
ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ("＜A HREF='JavaScript:draw("+cnt+")'＞＜IMG SRC='../game2/back1.gif' BORDER=0 WIDTH=48 HEIGHT=48＞＜／Ａ＞");
cnt++;}
ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ("＜ＢＲ＞");}}
function draw(n){
if ((p_bact==n)&&(h_bact==false)){
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[n].src=img1.src;
score=score+1;
h_bact=true;}}
function START(){cnt=0;score=0;kaisu=0;
ｆｏｒ (ｙ＝０；ｙ＜ｓｃｒｎｙ；ｙ＋＋){
ｆｏｒ (ｘ＝０；ｘ＜ｓｃｒｎｘ；ｘ＋＋){
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[cnt]．ｓｒｃ=img0.src;
cnt++;}}
bact();}
function bact(){
if (kaisu<20){damy1=p_bact;
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[damy1].src=img0.src;
p_bact=Math.floor(Math.random()*scrnx*scrny);
damy2=p_bact;
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[damy2].src=img2.src;
h_bact=false;
tid=setTimeout("bact()",1500);
kaisu=kaisu+1;}
else {clearTimeout(tid);
alert("ゲームオーバー");}}
／／−−＞
＜／ＳＣＲＩＰＴ＞
＜／ＨＥＡＤ＞
＜ＢＯＤＹ＞
＜ＳＣＲＩＰＴ ＬＡＮＧＵＡＧＥ＝”ＪａｖａＳｃｒｉｐｔ”＞
＜！−−
ｄｉｓｐｌａｙ（）；
／／−−＞
＜／ＳＣＲＩＰＴ＞
＜FORM NAME="MyForm"＞
＜INPUT TYPE="button" VALUE="スタート" onClick="START(this)"＞
＜/FORM＞
＜／ＢＯＤＹ＞
＜／ＨＴＭＬ＞
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
例１表示 ここをクリックして下さい。例が表示されます。
＜解説＞
１）変数の説明
1.絵
img0.srcは，背景となる水色の絵、img1.srcは，ばい菌をクリックしてやっつけた時の絵，img2.srcは，元気なばい菌の絵です。
2.変数
scrnx=8;scrny=1; 絵の配列です。ｘ軸方向（scrnx）に８個，ｙ軸方向（scrny）１行です。
p_bact=0 ばい菌の絵を表示する場所です。一番左端が０番，右端が７番になります。
h_bact; ばい菌のどちらの絵（元気なばい菌か，やっつけられたばい菌）を表示するか決める変数。
score=0; 今回は，関係ないのですがうまくクリックした得点を計算する変数です。例題では得点を表示しませんが，どの様に得点計算するか参考にして下さい。
kaisu=0; ゲーム終了のための，ばい菌が出た回数を計算する変数。
２）function display()
ゲームの作り方（その２）の例題１を参考にして下さい。ここでは，省略します。
３）function draw(n)
絵がクリックされた時の処理です。
1.if ((p_bact==n)&&(h_bact==false)){
ばい菌が表示された場所（p_bact）とクリックされた場所(n)が一致した時，初めて処理されます。
さらにもうひとつ条件を」付けます。h_bact==false 即ち元気なばい菌の絵をクリックした時のみ以下の処理がされます。
この条件を付けないと，やられたばい菌をクリックすれば，１匹のばい菌で何度も得点計算されます。
2.ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[n].src=img1.src;
クリックされた絵の場所のばい菌をやっつけられた絵にします。
3.score=score+1; 得点計算です。
4.h_bact=true; h_bactがtrueに変わりますので，一度やられたばい菌をクリックしても得点計算されなくなります。
４）function START()
スタートボタンが押された時，初期化する必要があります。変数，絵を初期化します。
cnt=0;score=0;kaisu=0; 変数の初期化
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[cnt]．ｓｒｃ=img0.src; 絵の初期化
５）function bact()
1.if (kaisu<20){ ばい菌が出た回数が２０未満であれば，ゲームを続けます。
2.前に表示されたばい菌の絵を背景の絵に置き換えます。
damy1=p_bact; ばい菌の表示された場所をdamy1に代入。
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[damy1].src=img0.src; damy1の場所の絵を背景の絵に置き換えます。
3.新たに表示する場所を乱数で求めます。
p_bact=Math.floor(Math.random()*scrnx*scrny);
Math.random()これは，０から１の間の乱数です。欲しい乱数は，０から７の乱数です。scrnx*scrnyをかけます。
Math.floor これは整数化するためのものです。ばい菌を表示する場所は整数ですのでこの計算が必要です。
4.ばい菌の絵を表示します。
1.ばい菌の表示
damy2=p_bact;
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[damy2].src=img2.src;
乱数で得られた新しい場所に，ばい菌の絵を表示します。
h_bact=false; 元気な時のばい菌ですので，h_bactにfalseを代入します。
2.表示場所の更新
１．５秒毎に，bact()関数が呼ばれて，新たな場所にばい菌表示します。
tid=setTimeout("bact()",1500);
3.回数計算
kaisu=kaisu+1;
4.ゲーム終了
else {clearTimeout(tid);
alert("ゲームオーバー");}}
最初の条件式if (kaisu<20)が満たされなくなると上記が実行され，ゲーム終了です。
２．複数の絵をランダムに配置する
何種類かの絵をバラバラに配置する時に使うものは，ランダムな順列です。
例はボタンを押すたびに絵の配列が変わります。ランダムな順列という乱数の使い方です。
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
＜ＨＴＭＬ＞
＜ＨＥＡＤ＞
＜ＴＩＴＬＥ＞Java Script 例２＜／ＴＩＴＬＥ＞
＜ＳＣＲＩＰＴ ＬＡＮＧＵＡＧＥ＝”ＪａｖａＳｃｒｉｐｔ”＞
＜！−−
flag=new Array(6);
gazo=new Array(7);
ban=new Array(6);
var kk;
gazo[0]=new Image(100,100);gazo[1]=new Image(100,100);gazo[2]=new Image(100,100);gazo[3]=new Image(100,100);
gazo[4]=new Image(100,100);gazo[5]=new Image(100,100);gazo[5]=new Image(100,100);gazo[6]=new Image(100,100);
gazo[0].src="../game1/back2.gif";gazo[1].src="../game1/buta.gif";gazo[2].src="../game1/buta10.gif";
gazo[3].src="../game1/buta11.gif";gazo[4].src="../game1/buta12.gif";gazo[5].src="../game1/buta13.gif";
gazo[6].src="../game1/buta20.gif";
flag[0]=1,flag[1]=1,flag[2]=1,flag[3]=1,flag[4]=1,flag[5]=1;
ban[0]=0,ban[1]=1,ban[2]=2,ban[3]=3,ban[4]=4,ban[5]=5;
function disp(){
ｆｏｒ （ｉ＝０；ｉ＜６；ｉ＋＋）｛
ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ("＜A HREF='JavaScript:draw("+i+")'＞＜IMG SRC='../game1/back2.gif' BORDER=0 WIDTH=100 HEIGHT=100＞＜/A＞");}
ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ("＜ＢＲ＞");}
function draw(n){
if (flag[n]<0) {ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[n].src=ｇａｚｏ[0]．ｓｒｃ;}
if (flag[n]>0) {kk=ban[n]+1;
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[n].src=ｇａｚｏ[kk]．ｓｒｃ;}
flag[n]=flag[n]*(-1);}
function START(){
ｆｏｒ （ｉ＝０；ｉ＜＝５；ｉ＋＋）{flag[i]=1;
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[i].src=ｇａｚｏ[0]．ｓｒｃ;
ban[i]=i;}
ｆｏｒ （ｉ＝５；ｉ＞０；ｉ−−）{
j=Math.floor(5*Math.random());
d=ban[i];ban[i]=ban[j];ban[j]=d;}}
／／−−＞
＜／ＳＣＲＩＰＴ＞
＜／ＨＥＡＤ＞
＜ＢＯＤＹ＞
＜ＳＣＲＩＰＴ ＬＡＮＧＵＡＧＥ＝”ＪａｖａＳｃｒｉｐｔ”＞
＜！−−
ｄｉｓｐ（）；
／／−−＞
＜／ＳＣＲＩＰＴ＞
＜FORM NAME="MyForm"＞
＜INPUT TYPE="button" VALUE="スタート" onClick="START(this)"＞
＜/FORM＞
＜／ＢＯＤＹ＞
＜／ＨＴＭＬ＞
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
例２表示 ここをクリックして下さい。例が表示されます。
＜解説＞
１）初期値
1.画像
gazo[0].srcは，背景の絵です。gazo[1].srcからgazo[6].srcは表示する絵です。
2.変数
var kk; 絵を表示する場所を代入する変数
flag[0]=1,flag[1]=1,flag[2]=1,flag[3]=1,flag[4]=1,flag[5]=1;
絵を表示するか，背景を表示するかを決める変数
ban[0]=0,ban[1]=1,ban[2]=2,ban[3]=3,ban[4]=4,ban[5]=5;
絵をどの場所に表示するかの変数
２）function disp()
説明省略
３）function draw(n)
絵がクリックされた時の処理
flag[n]の初期値は１です。背景の絵が表示されていて，クリックすると絵が表示されます。そして，flag[n]は−１に置き換わります。
ですからflag[n]＝１は，背景が表示されているとき，flag[n]＝−１の時は絵が表示されているときです。
flag[n]が正か負かでどちらの絵を表示するか判断します。
1.if (flag[n]<0)
{ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[n].src=ｇａｚｏ[0]．ｓｒｃ;}
クリックされた時，背景に変えます。
2.if (flag[n]>0) {kk=ban[n]+1;
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[n].src=ｇａｚｏ[kk]．ｓｒｃ;}
クリックされた時，絵に変えます。kk=ban[n]+1これは，乱数と絵の番号に１つ差があるために１を加えます。
3.flag[n]=flag[n]*(-1);
flag[n]を変える。
４）function START()
1.初期化
ｆｏｒ （ｉ＝０；ｉ＜＝５；ｉ＋＋）{flag[i]=1;
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[i].src=ｇａｚｏ[0]．ｓｒｃ;
flag[i]を初期化して，絵も背景にします。
ban[i]=i;}
ban[i]が，ランダムな配列を得るためのものです。０から５までの数字が入ります。
ban[0]=0,ban[1]=1,．．．
ｇａｚｏ[n]は１から６までの番号の所に絵がありますので，前にkk=ban[n]+1と計算して代入してます。
2.ランダム配列
ｆｏｒ （ｉ＝５；ｉ＞０；ｉ−−）{
j=Math.floor(5*Math.random());
d=ban[i];ban[i]=ban[j];ban[j]=d;}}
前の初期化のban[0]=0,ban[1]=1,．．を含めて，これはそのままテクニックとして覚えて下さい。ｂａｎ［ｉ］とｂａｎ[ｊ]を入れ替えてバラバラの配列を作ります。
ban[0]=0,ban[1]=1,ban[2]=2,ban[3]=3,ban[4]=4,ban[5]=5と並んだものを入れ変えます。５番と３番を入れ替えれば
ban[0]=0,ban[1]=1,ban[2]=2,ban[3]=5,ban[4]=4,ban[5]=3 さらに４番と１番を入れ替えれば
ban[0]=0,ban[1]=4,ban[2]=2,ban[3]=5,ban[4]=1,ban[5]=3となります。これを繰り返すとランダム配列ができます。
娯楽室の各部屋
