xhackjp1/間違い探し.html

## 間違い探し.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>間違いさがしゲーム</title>
    <meta name="twitter:card" content="summary_large_image" />
    <meta property="og:title" content="株式会社X-HACK" />
    <meta property="og:description" content="間違い探しゲームです" />
    <meta
      property="og:image"
      content="https://js-hack.s3-ap-northeast-1.amazonaws.com/%E9%96%93%E9%81%95%E3%81%84+%E3%81%95%E3%81%8B%E3%82%99%E3%81%97.png"
    />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      body {
        margin: 0 auto;
        width: 100%;
      }
      .content {
        width: 100%;
      }
      .center {
        text-align: center;
      }
      .canvas_wrap {
        width: 375px;
        margin: 0 auto;
      }
      .input-data {
        text-align: right;
      }
      .hidden {
        display: none;
      }
      #clearText {
        color: red;
      }
      .eventImg {
        width: 100%;
        max-width: 600px;
      }
    </style>
  </head>
  <body>
    <div class="center">
      <h1 class="center">間違い探し(全１０問)</h1>
      <small>一つだけ違う漢字が紛れています</small><br />
      <small>経過時間:</small><label id="timer"></label>
      <div id="start">
        間違いをさがしてタップするだけ!!<br />最速を目指そう!!<br />
        <div>
          <button onclick="start()">START</button>
        </div>
      </div>
      <h4 id="clearText" class="hidden">クリア！！</h4>
    </div>

    <div class="canvas_wrap">
      <canvas
        id="canvas"
        class="center"
        width="375"
        height="375"
        onclick="searchCharacter(event)"
      ></canvas>
    </div>

    <div class="center">
      作り方を詳しく知りたい人はこちら<br />
      <a href="https://x-hack.connpass.com/event/202527/">
        <img
          class="eventImg"
          src="https://connpass-tokyo.s3.amazonaws.com/thumbs/be/7f/be7f0cef6f88b0ef28494d8191d4f752.png"
        />
      </a>
    </div>

    <script>
      // タイマー要素
      const timer = document.getElementById("timer");
      // スタートボタン要素
      const startButton = document.getElementById("start");
      // canvas要素を取得
      const canvas = document.getElementById("canvas");
      // canvasを操作する機能を持った、オブジェクトを取り出す
      const ctx = canvas.getContext("2d");
      // 問題のペア
      const textPairs = [
        { t1: "氷", t2: "水" },
        { t1: "円", t2: "巴" },
        { t1: "璧", t2: "壁" },
        { t1: "霰", t2: "雹" },
        { t1: "貝", t2: "見" },
        { t1: "熊", t2: "態" },
        { t1: "料", t2: "科" },
        { t1: "東", t2: "車" },
        { t1: "鳥", t2: "島" },
        { t1: "銀", t2: "錫" },
      ];
      // クイズの正解の座標
      const cPos = { x: 0, y: 0 };
      // クイズの番号
      let qNum = 0;
      // タイマーのid
      let intervalId = 0;

      // 次の問題を表示する
      function next() {
        if (qNum >= textPairs.length) {
          // 全てクリアした場合
          document.querySelector("#clearText").classList.remove("hidden");
          document.querySelector("#canvas").classList.add("hidden");
          // タイマー止める
          clearInterval(intervalId);
          return;
        }

        // まだ問題が残っている場合、新しい問題を生成
        drawQuizImage(textPairs[qNum].t1, textPairs[qNum].t2);
        qNum += 1; // 出題番号をカウントアップ
      }

      // クリックした時の処理
      function searchCharacter(event) {
        var rect = event.target.getBoundingClientRect();
        mouseX = event.clientX - Math.floor(rect.left);
        mouseY = event.clientY - Math.floor(rect.top);
        if (
          mouseX > cPos.x - 16 &&
          mouseX < cPos.x + 16 &&
          mouseY > cPos.y - 16 &&
          mouseY < cPos.y + 16
        ) {
          next();
        }
      }

      // クイズの問題を生成
      function drawQuizImage(text1, text2) {
        // 縦の行数
        const columnNum = 11;
        // 表示をクリア
        ctx.clearRect(0, 0, 375, 375);
        // 文字を埋め込む時の大きさとフォント
        ctx.font = `20px sans-serif`;

        // 正解の位置を乱数で生成
        let rNum = Math.floor(Math.random() * columnNum**2);
        let counter = 0;

        // 盤面を描画する
        for (let i = 0; i < columnNum; i++) {
          for (let j = 0; j < columnNum; j++) {
            if (rNum === counter) {
              // 紛らわしい文字を生成
              ctx.fillText(text2, 25 + 30 * i, 38 + 30 * j);
              // 文字サイズから計算して、あたり判定の領域を作成
              cPos.x = 25 + 30 * i + 10;
              cPos.y = 25 + 30 * j + 10;
            } else {
              // 通常の文字を作成
              ctx.fillText(text1, 25 + 30 * i, 38 + 30 * j);
            }
            counter += 1;
          }
        }
      }

      // クイズ開始
      function start() {
        let startDate = new Date();
        intervalId = setInterval(() => {
          // 経過時間の表示
          let distant = new Date() - startDate;
          timer.innerHTML = distant;
        });
        startButton.classList.add("hidden");
        next();
      }
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>間違いさがしゲーム</title>
	<meta name="twitter:card" content="summary_large_image" />
	<meta property="og:title" content="株式会社X-HACK" />
	<meta property="og:description" content="間違い探しゲームです" />
	<meta
	property="og:image"
	content="https://js-hack.s3-ap-northeast-1.amazonaws.com/%E9%96%93%E9%81%95%E3%81%84+%E3%81%95%E3%81%8B%E3%82%99%E3%81%97.png"
	/>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<style>
	body {
	margin: 0 auto;
	width: 100%;
	}
	.content {
	width: 100%;
	}
	.center {
	text-align: center;
	}
	.canvas_wrap {
	width: 375px;
	margin: 0 auto;
	}
	.input-data {
	text-align: right;
	}
	.hidden {
	display: none;
	}
	#clearText {
	color: red;
	}
	.eventImg {
	width: 100%;
	max-width: 600px;
	}
	</style>
	</head>
	<body>
	<div class="center">
	<h1 class="center">間違い探し(全１０問)</h1>
	<small>一つだけ違う漢字が紛れています</small><br />
	<small>経過時間:</small><label id="timer"></label>
	<div id="start">
	間違いをさがしてタップするだけ!!<br />最速を目指そう!!<br />
	<div>
	<button onclick="start()">START</button>
	</div>
	</div>
	<h4 id="clearText" class="hidden">クリア！！</h4>
	</div>

	<div class="canvas_wrap">
	<canvas
	id="canvas"
	class="center"
	width="375"
	height="375"
	onclick="searchCharacter(event)"
	></canvas>
	</div>

	<div class="center">
	作り方を詳しく知りたい人はこちら<br />
	<a href="https://x-hack.connpass.com/event/202527/">
	<img
	class="eventImg"
	src="https://connpass-tokyo.s3.amazonaws.com/thumbs/be/7f/be7f0cef6f88b0ef28494d8191d4f752.png"
	/>
	</a>
	</div>

	<script>
	// タイマー要素
	const timer = document.getElementById("timer");
	// スタートボタン要素
	const startButton = document.getElementById("start");
	// canvas要素を取得
	const canvas = document.getElementById("canvas");
	// canvasを操作する機能を持った、オブジェクトを取り出す
	const ctx = canvas.getContext("2d");
	// 問題のペア
	const textPairs = [
	{ t1: "氷", t2: "水" },
	{ t1: "円", t2: "巴" },
	{ t1: "璧", t2: "壁" },
	{ t1: "霰", t2: "雹" },
	{ t1: "貝", t2: "見" },
	{ t1: "熊", t2: "態" },
	{ t1: "料", t2: "科" },
	{ t1: "東", t2: "車" },
	{ t1: "鳥", t2: "島" },
	{ t1: "銀", t2: "錫" },
	];
	// クイズの正解の座標
	const cPos = { x: 0, y: 0 };
	// クイズの番号
	let qNum = 0;
	// タイマーのid
	let intervalId = 0;

	// 次の問題を表示する
	function next() {
	if (qNum >= textPairs.length) {
	// 全てクリアした場合
	document.querySelector("#clearText").classList.remove("hidden");
	document.querySelector("#canvas").classList.add("hidden");
	// タイマー止める
	clearInterval(intervalId);
	return;
	}

	// まだ問題が残っている場合、新しい問題を生成
	drawQuizImage(textPairs[qNum].t1, textPairs[qNum].t2);
	qNum += 1; // 出題番号をカウントアップ
	}

	// クリックした時の処理
	function searchCharacter(event) {
	var rect = event.target.getBoundingClientRect();
	mouseX = event.clientX - Math.floor(rect.left);
	mouseY = event.clientY - Math.floor(rect.top);
	if (
	mouseX > cPos.x - 16 &&
	mouseX < cPos.x + 16 &&
	mouseY > cPos.y - 16 &&
	mouseY < cPos.y + 16
	) {
	next();
	}
	}

	// クイズの問題を生成
	function drawQuizImage(text1, text2) {
	// 縦の行数
	const columnNum = 11;
	// 表示をクリア
	ctx.clearRect(0, 0, 375, 375);
	// 文字を埋め込む時の大きさとフォント
	ctx.font = `20px sans-serif`;

	// 正解の位置を乱数で生成
	let rNum = Math.floor(Math.random() * columnNum**2);
	let counter = 0;

	// 盤面を描画する
	for (let i = 0; i < columnNum; i++) {
	for (let j = 0; j < columnNum; j++) {
	if (rNum === counter) {
	// 紛らわしい文字を生成
	ctx.fillText(text2, 25 + 30 * i, 38 + 30 * j);
	// 文字サイズから計算して、あたり判定の領域を作成
	cPos.x = 25 + 30 * i + 10;
	cPos.y = 25 + 30 * j + 10;
	} else {
	// 通常の文字を作成
	ctx.fillText(text1, 25 + 30 * i, 38 + 30 * j);
	}
	counter += 1;
	}
	}
	}

	// クイズ開始
	function start() {
	let startDate = new Date();
	intervalId = setInterval(() => {
	// 経過時間の表示
	let distant = new Date() - startDate;
	timer.innerHTML = distant;
	});
	startButton.classList.add("hidden");
	next();
	}
	</script>
	</body>
	</html>