プログラムを覚えるには、ゲームを作ると良いと思う。
最初に、ゲームでよく使われるサイコロを作ってみよう。
サイコロをマウスでクリックすると、乱数表からランダムに数を拾って
その数のサイコロに入れ替える部分を作ることにする。
１、サイコロのイメーファイルを用意する。
立体置場「ｓａｉ」にファイル名を格納する。
<![CDATA[
sai=new Array("sai0.gif","sai1.gif","sai2.gif","sai3.gif","sai4.gif",
"sai5.gif","sai6.gif");
]]>
２、サイコロを一つ表示する
<![CDATA[
<img src="sai1.gif" name="saikoro" width=200 height=200>
]]>
ＮＡＭＥオプションを使って、イメージに名前を付けておく。
２、サイコロをクリックしたら入れ替える命令を呼び出すようにする
<![CDATA[
<a href="JavaScript:chg()">
]]>
<![CDATA[
<img src="sai1.gif" name="saikoro" width=200 height=200>
]]>
<![CDATA[
</a>
]]>
サイコロをクリックしたら、Ｊａｖａｓｃｒｉｐｔの命令が呼び出せるようにするには
＜Ａ＞タグを使います。
ＨＲＥＦ＝”の後に
ＨＴＴＰ：と付ければウエブ上のホームページを呼び出すのはご存知の通りですが
Javascripr：と書いた場合はＪａｖａｓｃｒｉｐｔの命令が呼び出します。
ＩＥとＮＮ６以降は＜Ａ＞タグを使わなくても＜ＩＭＧ＞タグ内に
onClick="chg()"
のように書いても機能するようです。
５、乱数表でサイコロの目を入れ替える命令を作る
サイコロを入れ替えるＪａｖａＳｃｒｉｐｔは次のようなものです。
<![CDATA[
function chg(){
r=Math.random()*6; //乱数表で０〜５.９９９９を発生させる
rr=Math.floor(r)+1; //切り捨てて０〜５の整数にし＋１する
document.saikoro.src=sai[rr]; //サイコロを立体置場から入れ替える
}
]]>
Math.random()は、０〜０.９９９９９９９、を無作為に発生させます。
これを６倍すれば、０〜５.９９９９９９、になります。
Math.floor()、を使うと、切り捨てて、０，１，２，３，４，５、のいずれかになり、
１を加えれば、サイコロの種類の一つになります。
サイコロを最初に書いたときに付けた名前を使って立体置場から入れ替えます。
６、体験してみよう
サイコロをクリックしてください
ソース
<![CDATA[
<html>
<head>
<title>javascript入門no22</title>
<script language="javascript">
<!--
//サイコロファイルを立体置場に//
sai=new Array("sai0.gif","sai1.gif","sai2.gif","sai3.gif","sai4.gif","sai5.gif","sai6.gif");
//サイコロ入れ替え//
function chg(){
r=Math.random()*6; //乱数表
rr=Math.floor(r)+1; //切り捨てて＋１する
document.saikoro.src=sai[rr]; //サイコロを入れ替える
}
//-->
</script>
</head>
<body>
<center>
サイコロをクリックしてください<br>
<table border=1 bgcolor=#eeeeee><tr><td>
<a href="JavaScript:chg()">
<img src="sai1.gif" name="saikoro" width=200 height=200 border=0>
</a>
</td></tr></table>
</center>
</body>
</html>
]]>
|
