to4iki/game01.html

## game01.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>jsの勉強03 tips</title>
</head>
<body onload="initCards();">

  <h1>神経衰弱</h1>
  <p>Your score: <span id="score"></span></p>
  <input type="button" id="button_0" value="" onclick="flip(0);" />
  <input type="button" id="button_1" value="" onclick="flip(1);" />
  <input type="button" id="button_2" value="" onclick="flip(2);" />
  <input type="button" id="button_3" value="" onclick="flip(3);" /><br/>
  <input type="button" id="button_4" value="" onclick="flip(4);" />
  <input type="button" id="button_5" value="" onclick="flip(5);" />
  <input type="button" id="button_6" value="" onclick="flip(6);" />
  <input type="button" id="button_7" value="" onclick="flip(7);" /><br/>
  <input type="button" id="button_8" value="" onclick="flip(8);" />
  <input type="button" id="button_9" value="" onclick="flip(8);" />
  <input type="button" id="button_10" value="" onclick="flip(10);" />
  <input type="button" id="button_11" value="" onclick="flip(11);" /><br/>
  <input type="button" id="button_12" value="" onclick="flip(12);" />
  <input type="button" id="button_13" value="" onclick="flip(13);" />
  <input type="button" id="button_14" value="" onclick="flip(14);" />
  <input type="button" id="button_15" value="" onclick="flip(15);" />

  <hr/>

  <script>

    // 1枚目のカードが選択されているかどうか
    var cardSelected = false;
    // どのカードが開かれたか
    var currentCard;
    // 1枚目開けたボタンのId
    var opendButtonId;
    // 何枚開けたか
    var cardsCount = 0;
    // おされたカードの番号
    var cards = [];

    // スコア
    var score = 0;
    var timerId;

    function runTimer() {
      document.getElementById('score').innerHTML = ++score;
      timerId = setTimeout(runTimer, 10); // 100分の一秒でカウントアップ
    }


    // 0 -> 0
    // 1 -> 0
    // 2 -> 1
    // 3 -> 1
    // ...
    // 14 -> 7
    // 15 -> 7
    function initCards() {
      for (var i=0; i<=15; i++) {
        var flag = true;
        while (flag) {
          var a = Math.floor(Math.random() * 16); // 0~15の数値をランダムに
          if (cards[a] === undefined) {
            cards[a] = Math.floor(i/2); // 少数点切り捨てでペアを7つ作成
            // document.getElementById('button_'+a).value = '?';
            document.getElementById("button_" + a).value = '? (' + cards[a] + ')' ;
            flag = false;
          }
        }
      }
      runTimer();
    }

    function flip(n) {
      // おされた番号のカードを開く
      document.getElementById("button_" + n).value = cards[n];
      if (cardSelected) {
        // すでに1枚開かれている時の処理 - 2枚目
        if (currentCard === cards[n]) {
          // 正解
          cardsCount++;
          if (cardsCount > 7) {
            alert('Game Over! Your Score: ' + score);
            clearTimeout(timerId); // timerを止める
          }
        } else {
          // 違う - 時間差で表示さしておく
          setTimeout(function() {
            document.getElementById('button_' + n).value = '?'; // 2枚目
            document.getElementById('button_' + opendButtonId).value = '?'; // 1枚目
          }, 500);
        }
        cardSelected = false;
      } else {
        // 開かれていない時の処理 - 1枚目
        currentCard = cards[n];
        opendButtonId = n;
        cardSelected = true;
      }
    }

  </script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<title>jsの勉強03 tips</title>
	</head>
	<body onload="initCards();">

	<h1>神経衰弱</h1>
	<p>Your score: <span id="score"></span></p>
	<input type="button" id="button_0" value="" onclick="flip(0);" />
	<input type="button" id="button_1" value="" onclick="flip(1);" />
	<input type="button" id="button_2" value="" onclick="flip(2);" />
	<input type="button" id="button_3" value="" onclick="flip(3);" /><br/>
	<input type="button" id="button_4" value="" onclick="flip(4);" />
	<input type="button" id="button_5" value="" onclick="flip(5);" />
	<input type="button" id="button_6" value="" onclick="flip(6);" />
	<input type="button" id="button_7" value="" onclick="flip(7);" /><br/>
	<input type="button" id="button_8" value="" onclick="flip(8);" />
	<input type="button" id="button_9" value="" onclick="flip(8);" />
	<input type="button" id="button_10" value="" onclick="flip(10);" />
	<input type="button" id="button_11" value="" onclick="flip(11);" /><br/>
	<input type="button" id="button_12" value="" onclick="flip(12);" />
	<input type="button" id="button_13" value="" onclick="flip(13);" />
	<input type="button" id="button_14" value="" onclick="flip(14);" />
	<input type="button" id="button_15" value="" onclick="flip(15);" />

	<hr/>

	<script>

	// 1枚目のカードが選択されているかどうか
	var cardSelected = false;
	// どのカードが開かれたか
	var currentCard;
	// 1枚目開けたボタンのId
	var opendButtonId;
	// 何枚開けたか
	var cardsCount = 0;
	// おされたカードの番号
	var cards = [];

	// スコア
	var score = 0;
	var timerId;

	function runTimer() {
	document.getElementById('score').innerHTML = ++score;
	timerId = setTimeout(runTimer, 10); // 100分の一秒でカウントアップ
	}


	// 0 -> 0
	// 1 -> 0
	// 2 -> 1
	// 3 -> 1
	// ...
	// 14 -> 7
	// 15 -> 7
	function initCards() {
	for (var i=0; i<=15; i++) {
	var flag = true;
	while (flag) {
	var a = Math.floor(Math.random() * 16); // 0~15の数値をランダムに
	if (cards[a] === undefined) {
	cards[a] = Math.floor(i/2); // 少数点切り捨てでペアを7つ作成
	// document.getElementById('button_'+a).value = '?';
	document.getElementById("button_" + a).value = '? (' + cards[a] + ')' ;
	flag = false;
	}
	}
	}
	runTimer();
	}

	function flip(n) {
	// おされた番号のカードを開く
	document.getElementById("button_" + n).value = cards[n];
	if (cardSelected) {
	// すでに1枚開かれている時の処理 - 2枚目
	if (currentCard === cards[n]) {
	// 正解
	cardsCount++;
	if (cardsCount > 7) {
	alert('Game Over! Your Score: ' + score);
	clearTimeout(timerId); // timerを止める
	}
	} else {
	// 違う - 時間差で表示さしておく
	setTimeout(function() {
	document.getElementById('button_' + n).value = '?'; // 2枚目
	document.getElementById('button_' + opendButtonId).value = '?'; // 1枚目
	}, 500);
	}
	cardSelected = false;
	} else {
	// 開かれていない時の処理 - 1枚目
	currentCard = cards[n];
	opendButtonId = n;
	cardSelected = true;
	}
	}

	</script>

	</body>
	</html>