戻る
JavaScriptの中身
タロット占い(5枚用)のHTMLとJavaScriptの中身を記載しています。
カラーの部分はコメントです。非常にわかりにくいです。もうしわけありません。
<html>
<head>
<title>タロット(5)</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<SCRIPT language="JavaScript"> 以下、JavaScriptの記述が始まります。<head>内では変数の宣言と、関数の定義を行います。
<!--
IMC=new Array(); IMCという変数の配列を宣言します。
IMC[0]="lin.gif"; IMCに0が代入されると、lin.gifになるという宣言です。
IMC[1]="lin.gif"; 後述する乱数生成によって0が生成することは極めてまれなので、1においてもlin.gifになるようにします。
IMC[2]="nen.gif";
＜中略＞ 長いので、略します。
IMC[81]="56.gif"; 81の画像に対応する変数配列の宣言が終わりました。
function Dorou(){ 占いの結果を表示するDorou()という関数の記述を始めます。
typ=document.myForm.tySelect.selectedIndex;
→typはこのページ(document)のmyFormというformのtySelectで選択された値である、という宣言です。
すなわちtypは「使うセット」で選択された値です。選択肢が4つですので、値は上から順に0,1,2,3,のどれかになります。
sez=document.myForm.seSelect.selectedIndex;
→こちらはsezは「並列」で選択された値であるとの宣言です。選択肢が2つなので、値は0か1になります。
if(typ==0&&sez==0){ もしセットが「一般(22枚)」(==0)で並列が「無し」(==0)のとき……
nam=Math.ceil(Math.random()*22);
nim=Math.ceil(Math.random()*22);
num=Math.ceil(Math.random()*22);
nem=Math.ceil(Math.random()*22);
nom=Math.ceil(Math.random()*22);
→五枚のカードに対応するnam,nim,num,nem,nomの五つの変数を生成して宣言しています。
各変数の生成過程は次の通りです。
Math.random()によって0〜1間の乱数が生成されます。これに「一般(22枚)」の枚数22をかけることによって、0〜22間の乱数となります。
Math.ceil()によって、小数点以下を整数に切り上げます。(例えば0.1…のような数も1になる。故に、変数が0になることは極めてまれである)
if(nim==0.0){
nim=1;
}
→namが1でnimが0だった場合、同じlin.gifの画像が表示されてしまいます。
それを防ぐため、このようにnimを1にしてしまいます。(しかし、namが0でnimが1だった場合は防げません……)
while(nim==nam){
nim=Math.ceil(Math.random()*22);
}
→namとnimが同じ数であることをさけるため、二つの数が等しいあいだ「while(nim==nam)」は、
nimに違う数が代入されるまで乱数生成を繰り返してもらいます。
(このとき0が出てしまうと、前項でしたことがまったく無駄になってしまうのですが……)
以下、他の数もnimと同様の処理を行います。
if(num==0.0){
num=1;
}
while(num==nam||num==nim){
num=Math.ceil(Math.random()*22);
}
(→numの場合はnam,nimと同じ数になることを避けるため、条件が増えます。||は、orと同じ意味だと思って下さい)
if(nem==0.0){
nem=1;
}
while(nem==nam||nem==nim||nem==num){ (※同様に条件が増えていきます)
nem=Math.ceil(Math.random()*22);
}
if(nom==0.0){
nom=1;
}
while(nom==nam||nom==nim||nom==num||nom==nem){
nom=Math.ceil(Math.random()*22);
}
} これで、セット「一般(22枚)」並列が「無し」のときの変数宣言は終了です。
else if(typ==1&&sez==0){ あるいはセットが「アウレシアンセット(25枚)」(==1)で並列が「無し」(==0)のとき……
nam=Math.ceil(Math.random()*25);
nim=Math.ceil(Math.random()*25);
num=Math.ceil(Math.random()*25);
nem=Math.ceil(Math.random()*25);
nom=Math.ceil(Math.random()*25);
→アウレシアンセットはカードが25枚なので、0〜25間の乱数を生成します。
以下、前段と同様の処理を行います。
if(nim==0.0){
nim=1;
}
while(nim==nam){
nim=Math.ceil(Math.random()*25);
}
if(num==0.0){
num=1;
}
while(num==nam||num==nim){
num=Math.ceil(Math.random()*25);
}
if(nem==0.0){
nem=1;
}
while(nem==nam||nem==nim||nem==num){
nem=Math.ceil(Math.random()*25);
}
if(nom==0.0){
nom=1;
}
while(nom==nam||nom==nim||nom==num||nom==nem){
nom=Math.ceil(Math.random()*25);
}
}
else if(typ==2&&sez==0){ あるいはセットが「一般(78枚)」(==2)で並列が「無し」(==0)のとき……
nam=Math.ceil(Math.random()*81);
nim=Math.ceil(Math.random()*81);
num=Math.ceil(Math.random()*81);
nem=Math.ceil(Math.random()*81);
nom=Math.ceil(Math.random()*81); 小アルカナを含むので、0〜81間の乱数を生成します。
while(nam==23||nam==24||nam==25){
nam=Math.ceil(Math.random()*81);
}
→23,24,25はアウレシアンセットだけの画像に割り当てられているので、このようにして23,24,25を避けます。
以下、前段までと同様の処理を行いますが、いずれも23,24,25を避ける条件を加えます。
if(nim==0.0){
nim=1;
}
while(nim==nam||nim==23||nim==24||nim==25){
nim=Math.ceil(Math.random()*81);
}
if(num==0.0){
num=1;
}
while(num==nam||num==nim||num==23||num==24||num==25){
num=Math.ceil(Math.random()*81);
}
if(nem==0.0){
nem=1;
}
while(nem==nam||nem==nim||nem==num||nem==23||nem==24||nem==25){
nem=Math.ceil(Math.random()*81);
}
if(nom==0.0){
nom=1;
}
while(nom==nam||nom==nim||nom==num||nom==nem||nom==23||nom==24||nom==25){
nom=Math.ceil(Math.random()*81);
}
}
else if(typ==3&&sez==0){ あるいはセットが「アウレシアンセット(81枚)」(==3)で並列が「無し」(==0)のとき……
nam=Math.ceil(Math.random()*81);
nim=Math.ceil(Math.random()*81);
num=Math.ceil(Math.random()*81);
nem=Math.ceil(Math.random()*81);
nom=Math.ceil(Math.random()*81);
→前段と同様に0〜81間の乱数を生成します。
全部のカードを使うので、前段のような途中の数を避ける処理は必要としません。以下、前々段までと同様の処理が続きます。
if(nim==0.0){
nim=1;
}
while(nim==nam){
nim=Math.ceil(Math.random()*81);
}
if(num==0.0){
num=1;
}
while(num==nam||num==nim){
num=Math.ceil(Math.random()*81);
}
if(nem==0.0){
nem=1;
}
while(nem==nam||nem==nim||nem==num){
nem=Math.ceil(Math.random()*81);
}
if(nom==0.0){
nom=1;
}
while(nom==nam||nom==nim||nom==num||nom==nem){
nom=Math.ceil(Math.random()*81);
}
}
else if(typ==0&&sez==1){ あるいはセットが「一般(22枚)」(==0)で並列が「有り」(==1)のとき……
nam=Math.ceil(Math.random()*22);
nim=Math.ceil(Math.random()*22);
num=Math.ceil(Math.random()*22);
nem=Math.ceil(Math.random()*22);
nom=Math.ceil(Math.random()*22);
}
→ここからは、並列が「有り」のときの条件式の記述が始まります。
同じカードが出る=各変数が同じ数になることを避けなくてもいいため、記述がぐっと減ります。
else if(typ==1&&sez==1){ あるいはセットが「アウレシアンセット(25枚)」(==1)で並列が「有り」(==1)のとき……
nam=Math.ceil(Math.random()*25);
nim=Math.ceil(Math.random()*25);
num=Math.ceil(Math.random()*25);
nem=Math.ceil(Math.random()*25);
nom=Math.ceil(Math.random()*25); 乱数の範囲が変わるだけです。
}
else if(typ==2&&sez==1){ あるいはセットが「一般(78枚)」(==2)で並列が「有り」(==1)のとき……
nam=Math.ceil(Math.random()*81);
nim=Math.ceil(Math.random()*81);
num=Math.ceil(Math.random()*81);
nem=Math.ceil(Math.random()*81);
nom=Math.ceil(Math.random()*81);
→乱数の範囲が変わると同時に、以下でアウレシアンセットの画像に割り当てられた23,24,25を避ける条件式を記述します。
while(nam==23||nam==24||nam==25){
nam=Math.ceil(Math.random()*81);
}
while(nim==23||nim==24||nim==25){
nim=Math.ceil(Math.random()*81);
}
while(num==23||num==24||num==25){
num=Math.ceil(Math.random()*81);
}
while(nem==23||nem==24||nem==25){
nem=Math.ceil(Math.random()*81);
}
while(nom==23||nom==24||nom==25){
nom=Math.ceil(Math.random()*81);
}
}
else{ その他の場合。つまりセットが「アウレシアンセット(81枚)」(==3)で並列が「有り」(==1)のとき……
nam=Math.ceil(Math.random()*81);
nim=Math.ceil(Math.random()*81);
num=Math.ceil(Math.random()*81);
nem=Math.ceil(Math.random()*81);
nom=Math.ceil(Math.random()*81); 前々段と同様に、乱数の範囲が変わるだけです。
} これで、すべての条件式が出そろいました。いよいよページ本体に表示の命令を下します。
setTimeout("document.Carta.src=IMC[nam]",2000);
setTimeout("document.Carta1.src=IMC[nim]",4000);
setTimeout("document.Carta2.src=IMC[num]",6000);
setTimeout("document.Carta3.src=IMC[nem]",8000);
setTimeout("document.Carta4.src=IMC[nom]",10000);
→setTimeout()によって時間差をおいて命令を実行します。かっこ内の左が命令、右が命令を実行する秒数(1/1000)です。
例えば最後の行では10秒後にこのページ(document)のCarta2という名のイメージにIMC[num]を表示せよと命じています。
IMC[ ]は冒頭で宣言したように、[ ]に代入した数によって画像が割り当てられているので、そのどれかの画像が表示されることになります。
} これで、メインであるDorou()関数の記述を終わります。
function ChaBg(){ 背景色を変えるChaBg()という関数です。
bgz=document.myForm.bgSelect.selectedIndex; bgzは「背景色」で選択された値であるとの宣言です。値は0から5になります。
if(bgz=="0"){
document.bgColor="azure"; 背景色をazureにせよとの命令です。
}
if(bgz=="1"){
document.bgColor="white"; 以下同様です。
}
if(bgz=="2"){
document.bgColor="cornsilk";
}
if(bgz=="3"){
document.bgColor="indianred";
}
if(bgz=="4"){
document.bgColor="#99CC00"; 16進数による色指定もできます。
}
if(bgz=="5"){
document.bgColor="#FF99CC";
}
}
function Ura(){ 「設定を元に戻す」ボタンを押したときの関数です。
document.Carta.src="jun.gif"; カードを裏に戻す―すなわちそれぞれの画像にjun.gifを表示する命令です。
document.Carta1.src="jun.gif";
document.Carta2.src="jun.gif";
document.Carta3.src="jun.gif";
document.Carta4.src="jun.gif";
document.bgColor="azure"; 背景色を元のazureに変える命令です。
}
// -->
</SCRIPT> <head>内のJavaScriptの記述が終わります。
</head>
<body bgcolor="azure">
<small><a href="index.html">戻る</a>
<br><a href="manual.htm" target="_blank">使い方</a>
</small>
<center>
<font size="6" color="royalblue"><i>アウレシア版タロット占い-５枚</i></font>
<br>
<small>
<font color="royalblue">ギリシア十字法と呼ばれる占い方です。</font>
</small>
<br>
<form name="myForm"> フォームを始めます。名前はmyFormとつけました。
<table border="0" width="450">
<tr>
<td>
</td>
<td align="center">
<img src="jun.gif" width="100" height="150" name="Carta2">
→3枚目に開かれるカードの画像の指定です。裏面であるjun.gifを表示、名前はCarta2とつけました。
<br>
<b>3.</b><input type="text" size="10" value="障害">
<font size="1">
<a href="directio.htm" target="_blank">正逆</a>
<a href="support.htm" target="_blank">補助</a>
</font>
<br><br>
</td>
</tr>
<tr>
<td align="center">
<img src="jun.gif" width="100" height="150" name="Carta"> 同様に、1枚目に開かれるカードの画像の指定です。
<br>
<b>1.</b><input type="text" size="10" value="現在">
<font size="1">
<a href="directio.htm" target="_blank">正逆</a>
<a href="support.htm" target="_blank">補助</a>
</font>
</td>
<td align="center">
<img src="jun.gif" width="100" height="150" name="Carta4"> 同様に、5枚目に開かれるカードの画像の指定です。
<br>
<b>5.</b><input type="text" size="10" value="結果">
<font size="1">
<a href="directio.htm" target="_blank">正逆</a>
<a href="support.htm" target="_blank">補助</a>
</font>
</td>
<td align="center">
<img src="jun.gif" width="100" height="150" name="Carta1"> 同様に、2枚目に開かれるカードの画像の指定です。
<br>
<b>2.</b><input type="text" size="10" value="未来">
<font size="1">
<a href="directio.htm" target="_blank">正逆</a>
<a href="support.htm" target="_blank">補助</a>
</font>
</td>
</tr>
<tr>
<td>
</td>
<td align="center">
<br>
<img src="jun.gif" width="100" height="150" name="Carta3"> 同様に、4枚目に開かれるカードの画像の指定です。
<br>
<b>4.</b><input type="text" size="10" value="対策">
<font size="1">
<a href="directio.htm" target="_blank">正逆</a>
<a href="support.htm" target="_blank">補助</a>
</font>
</td>
</tr>
</table>
<br>
<input type="button" value="占う" onClick="Dorou()"> 「占う」ボタンの指定です。押す(onClick)ことでDorou()関数が起動します。
<br><br>
<small>
<b>
<font color="green">
使うセット
<select name="tySelect"> 「使うセット」の選択メニューの記述です。名前はtySelectとしました。
<option>一般(22枚)
<option>アウレシアンセット(25枚)
<option>一般(78枚)
<option>アウレシアンセット(81枚)
</select>
並列
<select name="seSelect"> 「並列」の選択メニューの記述です。名前はseSelectとしました。
<option>無し
<option>有り
</select>
背景色
</font>
</b>
</small>
<select name="bgSelect" onChange="ChaBg()">
→「背景色」の選択メニューの記述です。名前はbgSelectとしました。
この選択メニューは、選択すると(onChange)すぐに関数ChaBg()が起動して背景色を変えるようになっています。
<option>azure
<option>白色
<option>cornsilk
<option>indianred
<option>草色
<option>ピンク色
</select>
<br>
<br>
<input type="reset" value="設定を元に戻す" onClick="Ura()">
→「設定を元に戻す」ボタンの指定です。type=resetなので、押すとフォーム内の情報がresetされます(text boxの中身や選択メニュー)。
それと同時にUra()関数が起動します。
</form> フォームを閉じます。
＜中略＞ 以下、カードの意味ですので、略します。
<form> こちらは、ウインドウを「閉じる」ボタンのフォームです。
<input type="button" value="閉じる" onClick="window.close()">
</form>
</center>
</body>
</html>