GO TO TOP
ゲーム制作講座
制作講座目次 / PREV（ゲームを作る順序） / NEXT（ソート/シャッフルを使いこなせ） / トップページ / text mode
advanced
2.配列/evalを使いこなせ

★配列とは？

車掌でGO!をちょっと見てください。
このゲームでは、右上に駅名が表示されています。そして、ステージが進むと駅名が変化していきます。このような事を実現するには、どうすればよいでしょうか？

まず思いつくのは、if 文をいくつも並べる方法でしょう。 
var stage=0;

function stagedisp(){
  if(stage==0) name="高尾";
  if(stage==1) name="八王子";
  if(stage==2) name="立川";
  if(stage==3) name="国分寺";
  if(stage==4) name="四ッ谷";
  if(stage==5) name="御茶ノ水";
  if(stage==6) name="神田";
  if(stage==7) name="東京";
}

function stageclear(){
  stage++;
}

まあ、この方法でもいいのですが、if 文が８つも続くのはあまり綺麗ではありません。そこで、配列というものを使います。配列は、変数名の中に数字が入っているもので、連続して使う変数を扱うときに便利です。 
var stage=0;
var eki=new Array(8);
eki[0]="高尾";eki[1]="八王子";eki[2]="立川";eki[3]="国分寺";
eki[4]="四ッ谷";eki[5]="御茶ノ水";eki[6]="神田";eki[7]="東京";

function stagedisp(){
  if(stage<8) name=eki[stage];
}

function stageclear(){
  stage++;
}

プログラムがちょっとはすっきりしましたね。（でも結局、駅名は書かなければいけないのですが…）
配列を使う前には、変数と同様に宣言を行います。このとき、配列を何個使うか宣言しなくてはいけません。eki=new Array(8); の８がこれに当たります。８個宣言したら、０番から７番のeki 配列が使えるようになります（８番は使われません、注意！）。

配列は変数と同様に代入などができますが、何番目の配列に対して代入を行うか記述しておかなくてはいけません。eki[0]="高尾"; の[0]の部分です。eki="高尾"; とすると配列の中身がおかしくなります。

[ ] の中身は整数とは限りません。変数を入れる事もできます（ただし、変数の中身は整数です）。上の例では[stage]とすることで、stageの中身が０（初期値）〜７の間は、「変数 stage の中身」番目の配列を表示させる事ができます。

また、eki=new Array(8); だけでは、eki[0] の中身は初期化されていません（０とは限りません）。そのため、配列を宣言した後はすぐに配列の中身に代入をしてください。eki=new Array(8); の直後に name=eki[stage]; とするとエラーになる事があります。

上の例では配列のありがたさはあまり分かりません。しかし、例えば駅の一覧を表示したいときは
var stage=0;
var eki=new Array(8);
eki[0]="高尾";eki[1]="八王子";eki[2]="立川";eki[3]="国分寺";
eki[4]="四ッ谷";eki[5]="御茶ノ水";eki[6]="神田";eki[7]="東京";

function output_ichiran(){
  ichiran="";
  for(i=0;i<8;i++) ichiran+=eki[i]+"\n";
  alert(ichiran);
}

だけで済みます。さらに、車掌でGO!では駅一覧表示時、現在のステージを赤文字にしています（上例for文中に if (stage==i) で分岐）。こうなると配列無しでは作れません。

★フォーム、画像の配列

そういえば、フォームの話や画像の話のときに、こういうのが出てきましたね。

document.form1.elements[3].value=message;
document.images[0].src=hand0.src;

これも [ ] で囲っているので配列の一種です。上では form1 の「３番目」のフォーム部品の値に代入する、下では「０番目」の画像を書き換えるという意味です。
配列なので、当然 for 文も使えます。 
  total=0;
  for(i=0;i<5;i++) total+=document.form1.elements[i].value;
  alert(total);

とすれば、０番目〜４番目のフォームに書かれている値の合計を求める事もできます（ただし全てのフォームに value が存在し、value に整数が記入されている必要があります）。

★evalならもっと便利

eval は、本来なら eval( ) と使い ( ) 内の文字列を演算に使います。例えば、eval("3+5") の結果は８です。また、 
  for(i=1;i<10;i++){
    msg=eval("Math.sqrt("+i+")");
    alert(msg);
  }
※Math.sqrt() は、( )内の平方根、ルートを求める関数。

と使う事もできます（このときの i は変数で、１〜９まで変化します）。これを利用して、配列でなくても、連続した数字を含む変数名を配列のように使えます。 
<script language="JavaScript">
function imgload(){
	pl1=new Image(20,20);pl1.src="pl4.gif";
	pl2=new Image(20,20);pl2.src="pl2.gif";
	pl3=new Image(20,20);pl3.src="pl1.gif";
	pl4=new Image(20,20);pl4.src="pl3.gif";
	
	for(i=1;i<=6;i++) document.images[31+i].src=eval("logo"+i+".src");
	for(i=7;i<=12;i++) document.images[45+i].src=eval("logo"+i+".src");
	loadFlag=true;
	gameFlag=true;
}
</script>
<body onLoad="imgload();" bgcolor="#DAFFDA">
...

上のプログラムは、前にも出てきた「ピンポンダッシュ！」からの抜粋です。ここにも、eval が出てきています。
ここでは、logo1.src 〜 logo12.src の表示を for 文で簡潔にするため、eval とループ変数の i を使って２行で表現しています。代入左辺の、document.images[31+i].src の部分は配列です。

制作講座目次 / PREV（ゲームを作る順序） / NEXT（ソート/シャッフルを使いこなせ）
記事の無断転載を禁ず（リンクは歓迎）
質問があればメールでどうぞ
（送ってくれた質問は、FAQとしてここに載せることがあります。質問者の名前は公開しません。）