Ｊａｖａ Ｓｃｒｉｐｔの解説
７．ゲームの作り方（その１）
ホームページを飾るアニメは，ＧＩＦアニメーションが多いと思いますが，Ｊａｖａ Ｓｃｒｉｐｔでもできます。
ＧＩＦアニメは作った事がないので，どちらがいい方法か分かりませんが，Ｊａｖａのゲームを作るとき必要になることもあります。
１．記号のアニメ
見栄えはしないでしょうが，アニメの原理を理解するための例として出します。
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
＜ＨＴＭＬ＞
＜ＨＥＡＤ＞
＜ＴＩＴＬＥ＞Java Script 例１＜／ＴＩＴＬＥ＞
＜ＳＣＲＩＰＴ ＬＡＮＧＵＡＧＥ＝”ＪａｖａＳｃｒｉｐｔ”＞
＜！−−
ｆｕｎｃｔｉｏｎ ＭａｋｅＡｒｒａｙ（ｎ）｛ｔｈｉｓ．Ｌｅｎｇｔｈ＝ｎ；｝
ｖａｒ ｍｓｇ＝ｎｅｗ ＭａｋｅＡｒｒａｙ（５）；
msg[1]=" ＠ "+"\n"
＋" ＭＭ＝"+"\n"
＋" ＜ ＜ ";
msg[2]=" ＠ "+"\n"
＋" ＭＭ＝ "+"\n"
＋" ／ ／ ";
msg[3]=" ＠ "+"\n"
＋" ＭＭ＝ "+"\n"
＋" ＜ ＜ ";
msg[4]=" ＠ "+"\n"
＋" ＭＭ＝ "+"\n"
＋" ／ ／ ";
msg[5]="＠ "+"\n"
＋" ＭＭ＝ "+"\n"
＋"＜ ＜ ";
var s,i,str;
i=1;
ｆｕｎｃｔｉｏｎ disp(){
ｓｅｔＴｉｍｅｏｕｔ（”ｄｉｓｐ（）”，３００）；
if (i>5) {i=1;}
else {str=msg[i];
ｄｏｃｕｍｅｎｔ．ＭｙＦｏｒｍ．ＴＥＳＴ.value＝ｓｔｒ；
i=i+1;}
}
／／−−＞
＜／ＳＣＲＩＰＴ＞
＜／ＨＥＡＤ＞
＜ＢＯＤＹ＞
＜FORM NAME="MyForm"＞
＜TEXTAREA NAME="TEST" ROWS="3" COLS="25"＞
＜/TEXTAREA＞＜/FROM＞
＜ＳＣＲＩＰＴ ＬＡＮＧＵＡＧＥ＝”ＪａｖａＳｃｒｉｐｔ”＞
＜！−−
ｄｉｓｐ（）；
／／−−＞
＜／ＳＣＲＩＰＴ＞
＜／ＢＯＤＹ＞
＜／ＨＴＭＬ＞
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
例１表示 ここをクリックして下さい。例が表示されます。
＜解説＞
これは，「５．ホームページの飾り」の例題４を改変したものです。
１）ｆｕｎｃｔｉｏｎ disp(){
1.ｓｅｔＴｉｍｅｏｕｔ（”ｄｉｓｐ（）”，３００）；０．３秒ごとにｄｉｓｐ（）を呼び出します。これで動く速さが決まります。
2.if (i>5) {i=1;} ｍｓｇが１から５までありますので，ｉが５を越えたら１からやり直す事を意味します。
3.else {str=msg[i];
ｄｏｃｕｍｅｎｔ．ＭｙＦｏｒｍ．ＴＥＳＴ.value＝ｓｔｒ；
i=i+1;}
ｉが１から５の間は，ｍｓｇ[1]からｍｓｇ[5]まで順に表示します。
２）ｍｓｇ文の絵
馬か犬が走っている姿のつもりです。
ｍｓｇ[]は，３行の文字列です。そして少しづつ左に移動して，脚の部分が交互にのびたり，曲がったりします。
このように，絵の場所，動作を少しづつ変えて動かせばアニメになります。
２．絵によるアニメ
アニメは絵でなければ，意味がありません。
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
＜ＨＴＭＬ＞
＜ＨＥＡＤ＞
＜ＴＩＴＬＥ＞Java Script 例２＜／ＴＩＴＬＥ＞
＜ＳＣＲＩＰＴ ＬＡＮＧＵＡＧＥ＝”ＪａｖａＳｃｒｉｐｔ”＞
＜！−−
img=new Array(2);
img[0]=new Image(100,100);img[1]=new Image(100,100);
img[0].src="../game1/buta.gif";img[1].src="../game1/buta1.gif";
var i=0;
function disp(){
ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ("＜IMG SRC='../game1/buta.gif' BORDER=0 WIDTH=100 HEIGHT=100＞");
ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ("＜BR＞");
anim();
}
function anim(){
setTimeout("anim()",300);
if (i>1) {i=0;
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[0]．ｓｒｃ＝ｉｍｇ[0]．ｓｒｃ;}
if (i==1){ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[0]．ｓｒｃ＝ｉｍｇ[1]．ｓｒｃ;}
i=i+1;
}
／／−−＞
＜／ＳＣＲＩＰＴ＞
＜／ＨＥＡＤ＞
＜ＢＯＤＹ＞
＜ＳＣＲＩＰＴ ＬＡＮＧＵＡＧＥ＝”ＪａｖａＳｃｒｉｐｔ”＞
＜！−−
ｄｉｓｐ（）；
／／−−＞
＜／ＳＣＲＩＰＴ＞
＜／ＢＯＤＹ＞
＜／ＨＴＭＬ＞
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
例２表示 ここをクリックして下さい。例が表示されます。
＜解説＞
１）画像の設定
img=new Array(2); ｉｍｇの配列宣言
img[0]=new Image(100,100);img[1]=new Image(100,100); １００×１００の絵です。
img[0].src="../game1/buta.gif";img[1].src="../game1/buta1.gif";それぞれの画像の読み込み。
２）function disp(){初期画像の表示
ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ("＜IMG SRC='../game1/buta.gif' BORDER=0 WIDTH=100 HEIGHT=100＞");
ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ("＜BR＞");
buta.gifの画像を表示します。
anim(); 初期画像表示してからａｎｉｍ（）関数の呼び出し，実行します。
３）function anim(){アニメの表示
setTimeout("anim()",300);０．３秒ごとにａｎｉｍ（）を呼び出す。
if (i>1) {i=0; 画像は２つですからｉが０，１で変化するようにします。１を越えれば０として，０，１を繰り返します。
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[0]．ｓｒｃ＝ｉｍｇ[0]．ｓｒｃ;} ｉが０の時の画像表示
if (i==1){ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[0]．ｓｒｃ＝ｉｍｇ[1]．ｓｒｃ;} ｉが１の時の画像表示
i=i+1; ｉに１加えることによりループを繰り返しますので，２つ画像が交互に表示されます。
４）画像が３枚の場合。
if (i>2){i=0;ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[0]．ｓｒｃ＝ｉｍｇ[0]．ｓｒｃ;}
if (i==1){ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[0]．ｓｒｃ＝ｉｍｇ[1]．ｓｒｃ;}
if (i==2){ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[0]．ｓｒｃ＝ｉｍｇ[2]．ｓｒｃ;}
i=i+1;
という風になります。枚数が多いほど複雑な動きをすることになります。
５）注意
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[0]．ｓｒｃは時計の所でも説明しましたが，ページの初めての画像（第０番目）を意味します.
ですから，この前には，画像を置かないようにして下さい。前に１個画像があれば，
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[1]．ｓｒｃとなります。
３．絵の移動
前の例は，ひとつの場所で表示するだけでした。今度は，絵を移動させてみましょう。
要点だけで，不必要な部分は省略します。
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
Java Script 例３
１．＜ＨＥＡＤ＞の間のＪａｖａ Ｓｃｒｉｐｔ
img1=new Image(48,48);img2=new Image(48,48);
img1.src="../game2/peke1.gif";img2.src="../game2/peke2.gif";
var x;
var i=0;
function disp(){
for (x=0; x<8; x++){
ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（”＜IMG SRC='../game2/peke1.gif' BORDER=0 WIDTH=48 HEIGHT=48＞”）;
}
ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（”＜BR＞”）;
anim();
}
function anim(){
setTimeout("anim()",300);
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[i]．ｓｒｃ＝ｉｍｇ１．ｓｒｃ；
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[i+1]．ｓｒｃ＝ｉｍｇ２．ｓｒｃ；
i=i+1;
if (i>=7) {i=0;
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[7]．ｓｒｃ＝ｉｍｇ１．ｓｒｃ；
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[0]．ｓｒｃ＝ｉｍｇ２．ｓｒｃ；｝
}
２．＜ＢＯＤＹ＞の間のＪａｖａ Ｓｃｒｉｐｔ
ｄｉｓｐ（）；
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
例３表示 ここをクリックして下さい。例が表示されます。
＜解説＞
１）function disp(){
for (x=0; x<8; x++){
ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（”＜IMG SRC='../game2/peke1.gif' BORDER=0 WIDTH=48 HEIGHT=48＞”）;｝
４８×４８の画像（peke1.gif）を０番から７番までの８個並べます。ｉｍａｇｅｓ[0]からｉｍａｇｅｓ[7]までになります。
２）function anim(){
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[i]．ｓｒｃ＝ｉｍｇ１．ｓｒｃ；
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[i+1]．ｓｒｃ＝ｉｍｇ２．ｓｒｃ；
ｉが０から６までの間，実行されますので，次のようになります。
ｉｍａｇｅｓ[0]＝ｉｍｇ１，ｉｍａｇｅｓ[1]＝ｉｍｇ２
ｉｍａｇｅｓ[1]＝ｉｍｇ１，ｉｍａｇｅｓ[2]＝ｉｍｇ２
ｉｍａｇｅｓ[2]＝ｉｍｇ１，ｉｍａｇｅｓ[3]＝ｉｍｇ２
ｉｍａｇｅｓ[3]＝ｉｍｇ１，ｉｍａｇｅｓ[4]＝ｉｍｇ２
．．．．．．．．．．．．．．．．．．．．．．．．．．
という風に絵が左に移動していきます。この例では，一番最初の１回目はｉｍａｇｅｓ[0]＝ｉｍｇ２になることはありません。２回目以降は次の
条件文（ｉｆ （ｉ＞＝７））がありますので，ｉｍａｇｅｓ[0]＝ｉｍｇ２となります。
３）if (i>=7) {i=0;
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[7]．ｓｒｃ＝ｉｍｇ１．ｓｒｃ；
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[0]．ｓｒｃ＝ｉｍｇ２．ｓｒｃ；｝
ｉｍａｇｅｓ[6]＝ｉｍｇ１，ｉｍａｇｅｓ[7]＝ｉｍｇ２と画像が最後までくれば初めからやり直しです。
ｉｍａｇｅｓ[7]＝ｉｍｇ１，ｉｍａｇｅｓ[0]＝ｉｍｇ２とするためｉ＞＝７で条件式を付けます。
ｉｍａｇｅｓ[7]＝ｉｍｇ２となることになるのですが，実際は，最後にｉｍｇ２の画像が表示されたように見えません。
一度表示しても，すぐに次の条件式が働きｉｍａｇｅｓ[7]＝ｉｍｇ１となるからです。
４．移動して，動作する
２と３の合成です。絵をうまくつくれば「犬が走ってきて，止まって何かする」というアニメができます。
絵を作るのが面倒なので，ゲームで使った画像を再利用させてもらいます。
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
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";
var x;
var i=0;
var k=0;
function disp(){
for (x=0; x<8; x++){
ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（”＜IMG SRC='../game2/back1.gif' BORDER=0 WIDTH=48 HEIGHT=48＞”）;
}
ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（”＜BR＞”）;
anim();
}
function anim(){
setTimeout("anim()",300);
if (i<7){
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[i]．ｓｒｃ＝ｉｍｇ０．ｓｒｃ；
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[i+1]．ｓｒｃ＝ｉｍｇ１．ｓｒｃ；｝
i=i+1;
if (i>=7) {
if (k>2) {k=0;ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[7]．ｓｒｃ＝ｉｍｇ１．ｓｒｃ；｝
if (k==1){ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[7]．ｓｒｃ＝ｉｍｇ２．ｓｒｃ；｝
k=k+1;
if (i>16) {i=0;
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[7]．ｓｒｃ＝ｉｍｇ０．ｓｒｃ；
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[0]．ｓｒｃ＝ｉｍｇ１．ｓｒｃ；｝
}
}
２．＜ＢＯＤＹ＞の間のＪａｖａ Ｓｃｒｉｐｔ
ｄｉｓｐ（）；
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
例４表示 ここをクリックして下さい。例が表示されます。
＜解説＞
１）画像の移動
if (i<7){
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[i]．ｓｒｃ＝ｉｍｇ０．ｓｒｃ；
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[i+1]．ｓｒｃ＝ｉｍｇ１．ｓｒｃ；｝
i=i+1;
ｉｍａｇｅｓ[7]＝ｉｍｇ１になるまで，即ちｉが７未満のときこの表示がされます。絵が，前の例のようにｉｍａｇｅｓ[7]まで移動します。
２）最後の場所で表示
if (i>=7) { ｉが７以上，最後の場所に来たら
if (k>2) {k=0;ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[7]．ｓｒｃ＝ｉｍｇ１．ｓｒｃ；｝
if (k==1){ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[7]．ｓｒｃ＝ｉｍｇ２．ｓｒｃ；｝
k=k+1;
最後の場所ｉｍａｇｅｓ[7]で交互にｉｍｇ１とｉｍｇ２を表示する。
３）初めからやり直し
if (i>16) {i=0; ｉが１６を越えたらまた初めからやり直します。
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[7]．ｓｒｃ＝ｉｍｇ０．ｓｒｃ；
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[0]．ｓｒｃ＝ｉｍｇ１．ｓｒｃ；｝
ｉｍａｇｅｓ[7]を背景の画像にして，ｉｍａｇｅｓ[0]から表示する。
４）走っているようなアニメにするには。
１）の画像の移動を変えます。背景と画像２種類（脚が伸びたり，曲がったり）準備して次のようにする必要があります。
if (i<7){
ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[i]．ｓｒｃ＝ｉｍｇ０．ｓｒｃ；背景の画像にする
ｉｆ （（ｉ％２）＝＝１）｛ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[i+1]．ｓｒｃ＝ｉｍｇ１．ｓｒｃ；｝偶数番目の場所にｉｍｇ１画像
ｉｆ （（ｉ％２）＝＝０）｛ｄｏｃｕｍｅｎｔ．ｉｍａｇｅｓ[i+1]．ｓｒｃ＝ｉｍｇ２．ｓｒｃ；｝奇数番目の場所にｉｍｇ２画像
｝
何枚かの画像を条件に応じて表示する場合ｉｆ（ｉ＝＝０）とする方法，規則正しい順序で表示する場合は
ｉｆ（（ｉ％３）＝＝２）とする方法があります。
例は絵を作るのが面倒なので２種類の画像交互に表示して移動します。
例５表示 ここをクリックして下さい。例が表示されます。
娯楽室の各部屋
