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

■ JavaScript - サンプル集(257種類) - ゲーム
   - ひき肉ハンバーグ(グラフィカル版Ver1)

引き算を遊んで覚えるためのスクリプトです。
数字をクリックして選択した後、「答えは?」のボタンを押すと結果が出ます。 もう一度チャレンジする時は、「もう一度!」ボタンを押して下さい。 これは一桁の引き算に対応しています。

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





[ ソース ]

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

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

  function hajime()
    {document.images["hitotu"].src=suuji[10].src;
     document.images["hutatu"].src=suuji[10].src;
     document.images["kotae1"].src=suuji[10].src;
     document.images["kotae2"].src=suuji[10].src;}

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

  function kuku(kazu)
     {if(document.images["hitotu"].src==suuji[10].src)
        {document.images["hitotu"].src=suuji[kazu].src;
         a=eval(kazu);}

      else if(document.images["hutatu"].src==suuji[10].src)
        {document.images["hutatu"].src=suuji[kazu].src;
         b=eval(kazu);}

      else 
        {kekka=String(a-b);
         if(kekka.length>1)
           {document.images["kotae1"].src=suuji[11].src;
            document.images["kotae2"].src=suuji[eval(kekka.charAt(1))].src;}
         else 
           {document.images["kotae1"].src=suuji[0].src;
            document.images["kotae2"].src=suuji[eval(kekka)].src;}
         }
     }

  //-->
  </script>

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

<div align="center">
<a href="javaScript:kuku(1);"><img src="1.gif" border="0"></a>
<a href="javaScript:kuku(2);"><img src="2.gif" border="0"></a>
<a href="javaScript:kuku(3);"><img src="3.gif" border="0"></a>
<a href="javaScript:kuku(4);"><img src="4.gif" border="0"></a>
<a href="javaScript:kuku(5);"><img src="5.gif" border="0"></a><br>
<a href="javaScript:kuku(6);"><img src="6.gif" border="0"></a>
<a href="javaScript:kuku(7);"><img src="7.gif" border="0"></a>
<a href="javaScript:kuku(8);"><img src="8.gif" border="0"></a>
<a href="javaScript:kuku(9);"><img src="9.gif" border="0"></a>
<a href="javaScript:kuku(0);"><img src="0.gif" border="0"></a>

<hr width="55%">

<img src="hatena.gif" name="hitotu" border="0">
<img src="-.gif" border="0">
<img src="hatena.gif" name="hutatu" border="0">
<img src="=.gif" border="0">
<img src="hatena.gif" name="kotae1" border="0">
<img src="hatena.gif" name="kotae2" border="0">

<form name="form1">
  <input type="button" value="答えは?" onClick="kuku();">
  <input type="button" value="もう一度!" onClick="hajime();">
<img src="" name="hidden" width="1" height="1" border="0">
</form>
</div>
</body>
</html>


[ 解説 ]

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

「-」や「=」の画像も必要ならば作って下さい。
文字でも良いのならば、下から13行目が「-」、 下から11行目が「=」のタグに対応しているので、文字に置き換えて下さい。

下から12行目に<body>があります。
ボディタグ内にはお好きな属性を加えてあげて下さい。
壁紙や文字色など、お好きに設定して下さい。
ボディ内のHTMLに関しましても、お好きに設定して下さい。
ただし下から10行目の<form name="form1">と、 下から4行目の</form>の間は触らないで下さい。


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

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