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

■ JavaScript - サンプル集(257種類) - ゲーム
   - 色当てゲーム

色の名前を覚えるためのスクリプトです。
質問の答えの色をクリックして下さい。

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





[ ソース ]

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

  iro=new Array("blue","red","green","skyblue","orange","pink","black","white","gray","purple","yellow","kimidori");
  color_pic=new Array();
  for(i=0;i<12;i++)
    {color_pic[i]=new Image();
     color_pic[i].src=""+iro[i]+".gif";}
  color_pic[12]=new Image();
  color_pic[12].src="maru.gif";

  color_name=new Array("あお","あか","みどり","みず","かき","もも","くろ","しろ","はい","むらさき","き","きみどり");

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

  function hajime()
    {document.form1.text1.value="";
     for(i=0;i<12;i++)document.images[i].src=color_pic[i].src;
     ran=Math.floor(Math.random()*100);
     while( ran > 11 )ran=Math.floor(Math.random()*100);
     document.form1.text1.value=color_name[ran]+"いろって、どのいろ?";}

  function colors(kazu)
     {if(ran == kazu)
		{document.form1.text1.value=color_name[ran]+"いろは、このいろ。だいせーかいっ!";
		 for(i=0; i<12; i++)if(i!=kazu)document.images[i].src=color_pic[12].src;}
       else alert("はずれ・・・");
     }

  //-->
  </script>

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

<table align="center" bgcolor="#F2E2CB" cellpadding=7 border=1>
<tr><td align="center">
<form name="form1">
<input type=text size=50 name=text1>

<br><br>

<a href="javaScript:colors(0);"><img src="blue.gif" name="0" border="0"></a>
<a href="javaScript:colors(1);"><img src="red.gif" name="1" border="0"></a>
<a href="javaScript:colors(2);"><img src="green.gif" name="2" border="0"></a>
<a href="javaScript:colors(3);"><img src="skyblue.gif" name="3" border="0"></a>
<a href="javaScript:colors(4);"><img src="orange.gif" name="4" border="0"></a>
<a href="javaScript:colors(5);"><img src="pink.gif" name="5" border="0"></a><br>
<a href="javaScript:colors(6);"><img src="black.gif" name="6" border="0"></a>
<a href="javaScript:colors(7);"><img src="white.gif" name="7" border="0"></a>
<a href="javaScript:colors(8);"><img src="gray.gif" name="8" border="0"></a>
<a href="javaScript:colors(9);"><img src="purple.gif" name="9" border="0"></a>
<a href="javaScript:colors(10);"><img src="yellow.gif" name="10" border="0"></a>
<a href="javaScript:colors(11);"><img src="kimidori.gif" name="11" border="0"></a>

<hr width="55%">

  <input type="button" value="はじめる!" onClick="hajime();">
  <input type="button" value="やりなおし" onClick="hajime();">
<img src="" name="hidden" width="1" height="1" border="0">
</form>
</td></tr></table>
</body>
</html>


[ 解説 ]

まず12枚の各色の画像を用意します。
また正解が出た際に表示させる、正解マークの画像を一つ用意します。

次に上から5行目の位置に、各色の画像名が拡張子抜きで記述されています。
もし画像をオリジナルのものを使用した場合には、この部分をご使用の画像ファイル名に変更してください。

上から11行目の「color_pic[12].src="maru.gif";」で正解時の画像を定義しています。
「maru.gif」の部分に、実際に使用される画像名をお書き下さい。

上から18行目、22行目、24行目にひらがなが書いてあります。
それぞれ質問時の文字、正解時の文字、不正解時の文字になっていますので、 こちらも変更を加えたい方はご自由に変更してください。
(必ず日本語部分のみの変更にとどめてください。)

下から11〜23行目に各画像のタグがあります。
オリジナルの画像を使用される方は、ここで画像ファイルの名前を変更してください。
各タグ内に「img src="blue.gif"」と言う部分がありますので、 「blue.gif」を変更してあげます。

ボディタグ内にはお好きな属性を加えて下さって構いません。
壁紙や文字色など、お好きに設定して下さい。
他のボディ内のHTMLに関しましても、ご自由にどうぞ。


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

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