ゲームではサイコロを複数使うのが通例です。
そこでサイコロを６個使うように改造します。
さらにＪａｖａＳｃｒｉｐｔにＨＴＭＬを書かせる方法やＪａｖａｓｃｒｉｐｔへの情報伝達法も紹介します。
１、複数のサイコロの配置
まずサイコロを判別するためのサイコロ名を立体置場に準備しておく。
sai_no=new Array("sai_0","sai_1","sai_2","sai_3","sai_4","sai_5","sai_6");
前項まではサイコロが１個だったので
<img src="sai1.gif" name="saikoro">
のようにＨＴＭＬ文を直接書き、サイコロ名も”saikoro”と固定して書き込んだ
６個ならこれを６回、名前だけ変えて書けばよい。
しかし６０個だったら、６００個だったら、大変な作業です。
２、ＨＴＭＬ文をＪａｖａｓｃｒｉｐｔに書かせる
そこで、ＪａｖａＳｃｒｉｐｔに書かせてしまう方法使うことにする。
ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（ ’書かせる文字列 ’）；
のように書きます。
名前の部分だけ立体置場のものを使って、別の名前にしなければならないが
それには文字列を「＋」を使って結合することにする。
’・・・・ ｎａｍｅ＝”’＋立体置場［階数］＋’”・・・・’
のように
また、命令を呼び出すときも、どのサイコロが呼び出しているのが解るように
ｏｎＭｏｕｓｅｏｖｅｒ（”サイコロ名”） //マウスを乗せたら
のように（ ）に情報をつけて読み出します。
具体的には
document.writeln('<a href="javascript:void(0) onMouseover("'+sai_no[i]+'") onMouseOut="at()">');
document.writeln('<img src="sai1.gif" name="'+sai_no[i]+'"><a>');
のようになります。
これを６回書くには
ｆｏｒ（ｉ＝１；ｉ＜＝６；ｉ＋＋）｛
｝
という「から〜まで」の繰り返し命令を使えばよい
具体的には
<![CDATA[
for(i=1;i<=6;i++){
document.writeln('<a href="JavaScript:void(0)" onMouseover="chg(\''+sai_no[i]+'\')" onMouseout="at( )">');
document.writeln('<img src="',sai_file[0],'" name="'+sai_no[i]+'" width=80 height=80 border=0></a>');
}
]]>
のようになり、これが実行されると
<![CDATA[
<a href="JavaScript:void(0)" onMouseover="chg('sai_1')" onMouseout="at( )">
<img src="sai0.gif" name="sai_1" width=80 height=80 border=0>
</a>
<a href="JavaScript:void(0)" onMouseover="chg('sai_2')" onMouseout="at( )">
<img src="sai0.gif" name="sai_2" width=80 height=80 border=0>
</a>
<a href="JavaScript:void(0)" onMouseover="chg('sai_3')" onMouseout="at( )">
<img src="sai0.gif" name="sai_3" width=80 height=80 border=0>
</a>
<a href="JavaScript:void(0)" onMouseover="chg('sai_4')" onMouseout="at( )">
<img src="sai0.gif" name="sai_4" width=80 height=80 border=0>
</a>
<a href="JavaScript:void(0)" onMouseover="chg('sai_5')" onMouseout="at( )">
<img src="sai0.gif" name="sai_5" width=80 height=80 border=0>
</a>
<a href="JavaScript:void(0)" onMouseover="chg('sai_6')" onMouseout="at( )">
<img src="sai0.gif" name="sai_6" width=80 height=80 border=0>
</a>
]]>
のように展開されるのです。
３、情報の受け渡し
サイコロを転がす命令側では、（ ）内で送られてきた情報を使って
サイコロ名を判別して、そのサイコロを回転させます。
具体的には
function chg(s){
img_no=s;
r=Math.random()*6+1;
rr=Math.floor(r);
document.images[img_no].src=sai_file[rr];
tim=setTimeout('chg("'+img_no+'")',50);
}
のようになります。
４、体験してみよう
マウスで横に撫でてください
ソース
<![CDATA[
<html>
<head>
<title>javascript入門no24</title>
<script language="javascript">
<!--
sai_file=new Array("sai0.gif","sai1.gif","sai2.gif","sai3.gif","sai4.gif","sai5.gif","sai6.gif");
sai_no=new Array("sai_0","sai_1","sai_2","sai_3","sai_4","sai_5","sai_6");
//停止
function at(s){
clearTimeout(tim);
}
//回転
function chg(s){
no=s;
r=Math.random()*6+1;
rr=Math.floor(r);
document.images[sai_no[no]].src=sai_file[rr];
tim=setTimeout('chg('+no+')',100);
}
//初期化
function cls(){
for(i=1;i<=6;i++){
document.images[sai_no[i]].src=sai_file[0];
}
}
//-->
</script>
</head>
<body>
<center>
<h1>２４、ゾロ目やフィーバー</h1>
マウスで横に撫でてください<br>
<table border=1 bgcolor=#eeeeee><tr>
<script language="javascript">
<!--
for(i=1;i<=6;i++){
document.write('<td><a href="JavaScript:void(0)" onMouseover="chg('+i+')" onMouseout="at( )">');
document.write('<img src="'+sai_file[0]+'" name="'+sai_no[i]+'" width=80 height=80 border=0>');
document.writeln('</a></td>')
}
//-->
</script>
</tr></table>
<form><input type=button value="初期化" onClick="cls()"></form>
</center>
</body>
</html>
]]>
|