WEST MiRa(1,739 Byte)
JavaScript(1,601 Byte)
jbZ

■ JavaScript - サンプル集(257種類) - ゲーム
   - おみくじVer4

簡易おみくじです。
これは、結果がテキストエリアに表示されます。
また、結果に適した画像も表示させます。

サンプルを見る
ソースを保存する
(右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。)
ソースを見る
解説を見る





[ ソース ]

<html><head>
<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp

    my_bun=new Array();
    my_pic=new Array();
    my_bun[0]="大吉!絶好調です。何もかも貴方の思い通り!";
    my_pic[0]="daikiti.gif";
    my_bun[1]="中吉!何か良いことがありそう。";
    my_pic[1]="tyuukiti.gif";
    my_bun[2]="吉。穏やかな日々が過ごせそうです。";
    my_pic[2]="kiti.gif";
    my_bun[3]="小吉。今日はゆっくりと過ごしましょう。";
    my_pic[3]="syoukiti.gif";
    my_bun[4]="凶…忘れ物に注意!";
    my_pic[4]="kyou.gif";
    my_bun[5]="大凶…ミスを連発しそうです。";
    my_pic[5]="daikyou.gif";
    my_bun[6]="中吉。懐かしい人に出会えそう。";
    my_pic[6]="tyuukiti.gif";
    my_bun[7]="小吉。残り物には福がある。";
    my_pic[7]="syoukiti.gif";
    my_bun[8]="凶…こんな日は大人しくしていよう。";
    my_pic[8]="kyou.gif";
    my_bun[9]="吉。懐かしい人に連絡を取ってみよう。";
    my_pic[9]="kiti.gif";

    hajime="omikuji.gif";

    pics=new Array();
    for(i=0; i<my_pic.length; i++)
	{
	pics[i]=new Image();
	pics[i].src=my_pic[i];
	}

    function img_load()
	{
	for(i=0; i<my_pic.length; i++)document.images["hidden"].src=pics[i].src;
	document.images["hidden"].src=hajime;
	}

    function omikuji()
	{a=Math.floor(Math.random()*10);
	 document.images["kuji_pic"].src=pics[a].src;
	 document.form1.text1.value=my_bun[a];
	}

     function my_reset()
	{document.form1.text1.value="";
	document.images["kuji_pic"].src=hajime;}

//-->
</script>
</head>
<body onLoad="img_load();">

<div align="center">
<img src="omikuji.gif" width="100" height="50" alt="おみくじ" name="kuji_pic">
<form name="form1">
  <textarea name="text1" rows="5" cols="35" wrap="soft"></textarea><br>
  <input type="button" value="御神籤" onClick="omikuji();">
  <input type="button" value="RESET" onClick="my_reset();";>
<img src="" name="hidden" width="1" height="1" border="0">
</form>
</div>
 ・
 ・
 ・
</body></html>


[ 解説 ]

まずはおみくじの画像を、それぞれご用意下さい。
サイズは特に問いません。
お好きなサイズで、画像をお作り下さい。

ただし、全ての画像サイズ(横幅、高さ)は統一してください。

また、サンプルでは「大吉」「中吉」「吉」「小吉」「凶」「大凶」の6つの画像を使い回しています。
しかし、文章毎に全く異なる画像を使用する事も出来ます。

そして、初期状態で表示される画像も、一つご用意下さい。
(サンプルで、「御神籤」となっている画像の事です。)


次におみくじの内容と、画像URLを書き換えます。
上から7〜26行目に、おみくじの内容と、表示させたい画像URLのデータがあります。
まずは、お好きなように、おみくじの内容部分を書き換えて下さい。

次に画像URLを指定します。
各行の下の行が、そのおみくじ内容に対応した画像URLとなっています。

例えば1番上の大吉の画像URLを書き換えたいなら、8行目の
my_pic[0]="daikiti.gif";
を、書き換えます。

同じ要領で、全ての画像URLを書き換えて下さい。

次は、初期状態の画像URLを設定します。
上から28行目にある
hajime="omikuji.gif";
に、初期状態で使用する画像URLをお書き下さい。


最後は、HTMLのカスタマイズです。
下から11行目に、画像を表示させるタグがあります。
ここには、初期状態の画像URLを指定し、必要に応じて内容を書き換えて下さい。

また、下から8行目がおみくじボタンです。
「御神籤」と書いてある場所には、ボタンに表示させたいお好きな文字を書いて下さい。

結果が表示されるテキストエリアのサイズなども、ご自由にご変更下さい。

(補足)

テキストエリア内の文字を改行させたい場合は、改行させたい箇所に「\n」を書いてください。


バナー、リンクについて  ,   利用規約  ,   ヘルプ

Copyright (C) 1998-2007 WEST MiRa. All rights reserved.