WEST MiRa(1,739 Byte)
JavaScript(1,601 Byte)
 iTunes StoreiJapanj

■ JavaScript - サンプル集(257種類) - ゲーム
   - たし巻きたまごVer2(グラフィカル版)

足し算を遊んで覚えるためのスクリプトです。
これは1桁から3桁までの足し算に対応しています。

まず計算に使う一つ目の数字をクリックして選択した後、+記号をクリックします。 その後2つ目の数字を選択して「こたえは?」のボタンを押すと結果が出ます。
もう一度チャレンジする時は、「もういちど!」ボタンを押して下さい。

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





[ ソース ]

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

  pic=new Array();
  for(i=0;i<10;i++)
    {pic[i]=new Image();
     pic[i].src=""+i+".gif";}
  pic[10]=new Image();
  pic[10].src="hatena.gif";

  img_name=new Array("hitotu","hitotu2","hitotu3","hutatu","hutatu2","hutatu3","kotae3","kotae2","kotae1","kotae0");

  suuji=new Array("a","a","a","a","a","a");

  k=0;

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

  function hajime()
    {for(i=0;i<10;i++)
       {document.images[img_name[i]].src=pic[10].src;}
     k=0;  suuji=new Array("a","a","a","a","a","a");}

  function kuku(kazu)
     {if(kazu!='+' && kazu!='keisann')
         {if(k==0||k==3)
            document.images[img_name[k]].src=pic[kazu].src;
          else if(k==1||k==4)
            {document.images[img_name[k]].src=document.images[img_name[k-1]].src;
             document.images[img_name[k-1]].src=pic[kazu].src;}
          else if(k==2||k==5)
            {document.images[img_name[k]].src=document.images[img_name[k-1]].src;
	     document.images[img_name[k-1]].src=document.images[img_name[k-2]].src;
	     document.images[img_name[k-2]].src=pic[kazu].src;}

          suuji[k]=kazu;
          k++;}

      else if(kazu=='+')k=3;

      else if(kazu=='keisann')
         {a2=0; b2=0;
	  for(i=0; i<3; i++){
		if(suuji[i]!="a"){if(a2==0){a=String(suuji[i]);  a2=1;}
			else a+=String(suuji[i]);}
		if(suuji[i+3]!="a"){if(b2==0){b=String(suuji[i+3]);  b2=1;}
			else b+=String(suuji[i+3]);}
          }
	kekka=String(eval(a)+eval(b));
	kekka2=new Array();
	for(i=0; i<kekka.length; i++){kekka2[i]=kekka.charAt(i);}
	kekka2.reverse();
	len=kekka.length;

	if(len<=4)document.images["kotae3"].src=pic[0].src;
	if(len<=3){document.images["kotae2"].src=pic[0].src;
	document.images["kotae1"].src=pic[0].src;}
	j=len-1;
        for(i=0; i<len; i++) {document.images["kotae"+i].src=pic[kekka2[i]].src;}
	}
      }

  //-->
  </script>

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

<table align="center" bgcolor="#ffffff" cellpadding=7 border=1><tr><td align="center">
<table>
<tr>
<td><a href="javaScript:kuku(1);"><img src="1.gif" border="0"></a></td>
<td><a href="javaScript:kuku(2);"><img src="2.gif" border="0"></a></td>
<td><a href="javaScript:kuku(3);"><img src="3.gif" border="0"></a></td>
<td><a href="javaScript:kuku(4);"><img src="4.gif" border="0"></a></td>
<td><a href="javaScript:kuku(5);"><img src="5.gif" border="0"></a></td>
</tr><tr>
<td><a href="javaScript:kuku(6);"><img src="6.gif" border="0"></a></td>
<td><a href="javaScript:kuku(7);"><img src="7.gif" border="0"></a></td>
<td><a href="javaScript:kuku(8);"><img src="8.gif" border="0"></a></td>
<td><a href="javaScript:kuku(9);"><img src="9.gif" border="0"></a></td>
<td><a href="javaScript:kuku(0);"><img src="0.gif" border="0"></a></td>
</tr></table>

<hr width="55%">

<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td colspan="3"></td>
<td><img src="hatena.gif" name="hitotu3" border="0"></td>
<td><img src="hatena.gif" name="hitotu2" border="0"></td>
<td><img src="hatena.gif" name="hitotu" border="0"></td>
</tr>
<tr>
<td valign="bottom"><a href="javaScript:kuku('+');"><img src="+.gif" border="0"></a></td>
<td rowspan="2" valign="bottom"><img src=").gif" border="0"></td>
<td></td>
<td><img src="hatena.gif" name="hutatu3" border="0"></td>
<td><img src="hatena.gif" name="hutatu2" border="0"></td>
<td><img src="hatena.gif" name="hutatu" border="0"></td>
</tr>
<tr>
<td colspan=2></td>
<td colspan="4" valign="top"><img src="line.gif" border="0"></td>
</tr>
<tr>
<td colspan=2></td>
<td><img src="hatena.gif" name="kotae3" border="0"></td>
<td><img src="hatena.gif" name="kotae2" border="0"></td>
<td><img src="hatena.gif" name="kotae1" border="0"></td>
<td><img src="hatena.gif" name="kotae0" border="0"></td>
</tr>
</table>
<form name="form1">
  <input type="button" value="こたえは?" onClick="kuku('keisann');">
  <input type="button" value="もういちど!" onClick="hajime();">
  <img src="" name="hidden" width="1" height="1" border="0">
</form>
</td></tr></table>

</body>
</html>


[ 解説 ]

まず0〜9の各数字画像を用意します。
ファイル名は「0」ならば「0.gif」、「1」ならば「1.gif」と付けて下さい。

「+」や「)_」の画像も必要ならば作って下さい。
「)_」の画像は、「)」と「_」の二つに分けて作成してください。

下から12行目に<body>があります。
ボディタグ内にはお好きな属性を加えてあげて下さい。
壁紙や文字色など、お好きに設定して下さい。
ボディ内のHTMLに関しましても、お好きに設定して下さい。

ただし下から10行目の<form name="form1">と、 下から4行目の</form>の間は触らないで下さい。


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

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