ちょっとしたゲームセンターゲーム制作講座

ゲーム制作講座

制作講座目次 / PREV（フォームを使いこなせ） / NEXT（タイマーを使いこなせ） / トップページ / text mode

4.画像を使いこなせ

★画像番号

画像が無くてもゲームができますが、前にも述べたとおり、おもしろいゲームを作るには画像が必須だと私は考えます。そこで、この章では画像の扱い方について書こうと思います。絵を描くのが苦手な人は、この機会にお絵かきソフトを買ったり、独学で練習したり、フリーの素材を入手したりしましょう！

（しばらく経過）さあ、画像は用意できましたか？　それではまず、画像の番号について説明しましょう。フォームの時の話で、部品番号というのがありましたが、画像の場合にも画像番号というのが存在します。ページ内に画像を置いた順番に、０，１，２…と順番につきます。
ここで注意しないといけないのは、geocities のように、ホームページによってはページの先頭にバナー広告が出てくる場合です。このバナーが画像の場合、他のものと同様に画像番号がカウントされてしまうので、「自分のパソコン上では動くがアップロードしたとたんに変な動きをしてしまう」といった事態が発生します。対策としては、バナー広告も考慮してプログラムを組む（ただし自分のパソコン上で変な動きをしてしまいます）か、別のプロバイダへ引っ越す（笑）などの方法があります。

★画像の変更

画像を変更したいときは、

document.images[画像番号].src = "ファイル名";

のようにします。ただし、この方法は命令を実行するたびに画像をダウンロードしてきてしまうので、オフラインで遊んでいるときや、回線が混んでいるときはなかなか変更しません。そこで、ページを読み込んでいるときに、変更する画像もあらかじめ読み込んでおきましょう。

★プレロードについて

画像をあらかじめ読み込んでおくことを、プレロードといいます。
下のプログラムは、「ピンポンダッシュ！」のプログラムから、プレロードの部分を抜き出したものです（一部省略・一部改変）。

<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">
...

３行目、pl1=new Image(20,20);pl1.src="pl4.gif";　の命令が、実際にプレロードを行っている部分です。書き方は、

変数 = new Image(画像の横幅,画像の縦幅);
変数.src = "ファイル名";

です（２つの文から成り立っています）。画像の縦幅、横幅の単位はピクセル(pixel)です。
実際に画像を変更したいときは、

document.images[画像番号].src = 変数.src

になります。上の例では分かりにくいですが、for文の中で実行しています（evalについては、「配列/evalを使いこなせ」で）。
この命令はページのロードとほぼ同時にやらないと意味がないので、onLoad のイベントハンドラを使って実行しています。

★じゃんけん

すっかり忘れてました。じゃんけんの場合ですね。
今回は「あなたの手」と「相手の手」を画像で表現してみましょう（guu.gif choki.gif paa.gif は各自で用意して下さい）。
新しい変数 loadFlag が入っています。これは、ロード中に誤って操作するのを防ぐため、関数imgload() を実行しないと、loadFlag が true にならない→関数 clickhere() が実行されない（if文でひっかかる）というようになっています。これが無いと、途中で hand1.src が呼び出されてもプレロードされていなければ「hand1 が存在しない」ということでエラーになってしまいます。
また、フォームの数が減ったので、勝敗を表示する命令 document.form1.elements[4].value が、document.form1.elements[2].value になっている点も注意して下さい。

<html><head>
<script language="JavaScript">
var aite;
var message;
var loadFlag=false;

function imgload(){
	hand0=new Image(20,20);hand0.src="guu.gif";
	hand1=new Image(20,20);hand1.src="choki.gif";
	hand2=new Image(20,20);hand2.src="paa.gif";
	loadFlag=true;
}

function clickhere(){
  if(loadFlag){
    aite=Math.floor(Math.random()*3+1);
    var n=0;
    if(document.form1.elements[0].selectedIndex==0){ //グーが選択された
      document.images[0].src=hand0.src;
    }
    if(document.form1.elements[0].selectedIndex==1){ //チョキを選択
      document.images[0].src=hand1.src;
    }
    if(document.form1.elements[0].selectedIndex==2){ //パーを選択
      document.images[0].src=hand2.src;
    }
    n=document.form1.elements[0].selectedIndex+1; //勝敗判定に利用
    if(aite==1) document.images[1].src=hand0.src;
    if(aite==2) document.images[1].src=hand1.src;
    if(aite==3) document.images[1].src=hand2.src;
  
    if(n==aite) message="あいこです";
    else {
      if((n+1)%3==aite%3) message="あなたの勝ち";
      else message="相手の勝ち";
    }
    document.form1.elements[2].value=message;
  }
}
</script></head>
<body onLoad="imgload()">
じゃんけん大会！　自分の手を選択したら「勝負」を押してね。<br>
<form name="form1">
<select><option>グー<br>
<option>チョキ<br>
<option>パー<select><br>
<input type=button onClick="JavaScript:clickhere();" value="勝負"><br><br>
あなたの手 <img src="guu.gif"><br>
相手の手 <img src="guu.gif"><br>
結果 <input type=text><br>
</form></body></html>

制作講座目次 / PREV（フォームを使いこなせ） / NEXT（タイマーを使いこなせ）