◀︎ ▶︎

<html lang="ja">
<meta charset="utf-8">
<title>RGB 色当てゲーム</title>
<style>
div{text-align:center;
margin-top:40px;}
</style>
<div>
<p>
<a href="javascript:答え(0);"><img id="絵0"src="000000.jpg"width="32"height="32"name="0"border="0"alt="000000.jpg"></a>
<a href="javascript:答え(1);"><img id="絵1"src="ffffff.jpg"width="32"height="32"name="1"border="0"alt="ffffff.jpg"></a>
</p>
<p>
<a href="javascript:答え(2);"><img id="絵2"src="ff0000.jpg"width="32"height="32"name="2"border="0"alt="ff0000.jpg"></a>
<a href="javascript:答え(3);"><img id="絵3"src="00ff00.jpg"width="32"height="32"name="3"border="0"alt="00ff00.jpg"></a>
<a href="javascript:答え(4);"><img id="絵4"src="0000ff.jpg"width="32"height="32"name="4"border="0"alt="0000ff.jpg"></a>
</p>
<p>
<a href="javascript:答え(5);"><img id="絵5"src="00ffff.jpg"width="32"height="32"name="5"border="0"alt="00ffff.jpg"></a>
<a href="javascript:答え(6);"><img id="絵6"src="ff00ff.jpg"width="32"height="32"name="6"border="0"alt="ff00ff.jpg"></a>
<a href="javascript:答え(7);"><img id="絵7"src="ffff00.jpg"width="32"height="32"name="7"border="0"alt="ffff00.jpg"></a>
</p>
<form name="質問">

<input type="text"size="30"name="説明文"readonly>
<p>
<input type="button"value="ゲーム・スタート"onclick="すたーと();">
<input type="button"value="リセット"onclick="りせっと();">
</p>
</form>
</div>

/*
これらは同じく 6桁の16進数のカラー・コード に見えますが, 先頭に#が付いています.
使用目的
ユーザーに表示するメッセージの中で色を示すために使われています. 
もしも正解した場合に, 例えば「#ff00ff 正解です」と表示されるのは,
この記述があるからです.
*/
let 表示文字=["#000000","#ffffff","#ff0000","#00ff00","#0000ff","#ffff00","#ff00ff","#00ffff"];

// このプログラムに 乱数 という名前の変数を登録します
let 乱数;

// ページ読み込み時に画像を設定する関数を追加
function 初期設定()

// for 文で繰り返しを設定します
{for(let 愛=0;愛<8;愛++)

// jpgの画像番号を設定
{document.getElementById("絵"+愛).src=からーの設定[愛]+".jpg";}}

// ゲームをスタートさせる 関数 を記述します
function すたーと()
{document.質問.説明文.value="";

// ランダムな色のメッセージを表示(ランダムな数を生成する)
// 乱数を 0 〜 7 の範囲に設定します
// これで8種類の中からランダムにゲームを選ぶことがでます
乱数=Math.floor(Math.random()*8);
document.質問.説明文.value=表示文字[乱数]+"をクリックしてください";}

// 
/*リセット関数: 初期設定が呼び出されるので
ゲーム(テキスト・フィールド)をリセットできます*/
function りせっと()
{document.質問.説明文.value="";
初期設定();}

// ゲームの正誤を判断する 関数 を記述します
function 答え(発表)
{if(乱数===発表)
// 正解時のメッセージ
{document.質問.説明文.value=表示文字[乱数]+" 正解です";}
// 正解ならば「正解です」と表示させます
// 不正解ならば「残念, 違います!」とアラートが出ます
else
{alert("残念, 違います!");}}

// ページが読み込まれたときに初期設定を呼び出します
window.onload=初期設定;
</script>

</html>