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

■ JavaScript - サンプル集(257種類) - ゲーム
   - 絵本

ブラウザ上で読める絵本です。
「まえへ」を押すと1ページ前に、「つぎへ」を押すと1ページ次に進みます。
「はじめから」を押すと、一番最初のページに戻ります。

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





[ ソース ]

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

    pic=new Array();   moji=new Array();
    pic[0] ="title.jpg";
    moji[0]="";
    pic[1] ="title.jpg";
    moji[1]="明日は家族みんなで、遊園地に行くんだ。";
    pic[2] ="home_kumori.gif";
    moji[2]="窓から外を見ると、真っ暗だ。";
    pic[3] ="home_kaze.gif";
    moji[3]="ぼんやり空を見上げてたら、窓が揺れだした。";
    pic[4] ="home_kaze.gif";
    moji[4]="そうだ!\nおばあちゃんに、もう一つ教えてもらった事があった。";
    pic[5] ="teruteru.jpg";
    moji[5]="これこれ!\nてるてる坊主を窓にぶら下げて・・・";
    pic[6] ="home_ame.gif";
    moji[6]="夜になると、風はもっと強くなってきた。";
    pic[7] ="home.jpg";
    moji[7]="目が覚めた時、すずめの鳴き声が聞こえた。";
    pic[8] ="teruteru.jpg";
    moji[8]="「てるてる坊主さん、ありがとう!」";
    pic[9] ="teruteru2.jpg";
    moji[9]="てるてる坊主さんをよく見ようとしたら、あっちの部屋で物音が聞こえた。";

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

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

    kazu=0;
    function pic_hyouji(dotti)
       {if(kazu>-1 && kazu<pic.length)kazu+=dotti;
	else if(kazu==-1 && dotti==1)kazu=1;
	else if(kazu==pic.length && dotti==-1)kazu=pic.length-2;

	if(dotti==0){
	   kazu=0; document.images["mypic"].src=pics[kazu].src;
	   document.form1.text1.value="";}
	else if(dotti==-1 && kazu<0)alert("まえはないよ!");
	else if(dotti==1 && kazu>pic.length-1)alert("おわり。");
	else {document.images["mypic"].src=pics[kazu].src;
	      document.form1.text1.value=moji[kazu];}
	}

  //-->
  </script>

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

<table bgcolor="#ebc4a1" cellpadding="3" border="1" align="center">
<tr><th>
<img src="title.jpg" width="250" height="250" name="mypic">
<br>
</th></tr>
<tr><td align="center">
<form name="form1">
  <textarea name="text1" cols="50" rows="6" wrap="soft"></textarea><br>
  <input type="button" value=" ま え へ " onClick="pic_hyouji(-1);">  <input type="button" value="はじめから" onClick="pic_hyouji(0);">  <input type="button" value=" つ ぎ へ " onClick="pic_hyouji(1);">
<img src="" name="hidden" width="1" height="1" border="0">
</form>
</th></tr></table>

</body>
</html>


[ 解説 ]

まず絵本で使う画像と、文章を用意してください。
画像を作成する時に注意して頂きたいのは、全ての画像を同じサイズで作成する事です。
画像は、全て縦横の大きさを揃えてください。

次に用意した画像と文章を、スクリプトに埋め込んでいきます。
ソースの上から6行目〜25行目が、画像及び文章を埋め込む場所です。

pic[0] ="title.jpg";
moji[0]="";

の2行で1ページ分のデータが構成されています。
上の行に表示したい画像、下の行に表示したい文字を記述します。

一番最初の行には、タイトル画像を指定しておくのが良いです。
で、文字などは何も指定せずに空白にしておきます。

サンプルでは全部で10ページ有りますので、上の2行と同じ様な行が10組有ります。
もし実際に使用される絵本が、10ページ未満ならば、不要な行を削除して下さい。

ただし、この時必ず下から削除します。
例えば使用したい絵本が9ページならば、ソース上から24、25行目の

pic[9] ="teruteru2.jpg";
moji[9]="てるてる坊主さんをよく見ようとしたら、あっちの部屋で物音が聞こえた。";

を削除します。

同じ要領で、余計な行を削除して下さい。

ページ数がもっと多い場合は、減らすのではなく2行を増やしてあげます。

pic[9] ="teruteru2.jpg";
moji[9]="てるてる坊主さんをよく見ようとしたら、あっちの部屋で物音が聞こえた。";

をコピーペーストして、その真下に付け加えてください。

で、数字の「9」の部分を1つ繰り上げて「10」にします。

もっと増やすのなら、同じようにコピーペーストして数字部分をどんどん繰り上げて下さい。

(補足)

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


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

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