xhackjp1/index.html

## index.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%;
        max-width: 500px;
      }
      .content {
        width: 100%;
      }
      .center {
        text-align: center;
      }
      .canvas-wrap {
        width: 375px;
        margin: 0 auto;
      }
      .input-data {
        text-align: right;
      }
      .mt5 {
        max-width: 100%;
        margin: 5px 10px;
      }
    </style>
  </head>
  <body>
    <div class="center">
      <h1 class="center">間違い探し生成</h1>
    </div>

    <div class="canvas-wrap">
      <canvas
        id="canvas"
        class="center"
        width="375"
        height="375"
      ></canvas>
    </div>

    <div class="input-data mt5">
      <div>
        <label>表示する文字</label>
        <input id="messageText1" type="text" placeholder="文字1" value="小" maxlength="1"/>
      </div>
      <div>
        <label>紛らわしい文字</label>
        <input id="messageText2" type="text" placeholder="文字2" value="大" maxlength="1"/>
      </div>
    </div>

    <div class="center mt5">
      <button onclick="drawImage()">間違い探しを生成</button>
    </div>

    <script>
      const messageText1 = document.getElementById("messageText1");
      const messageText2 = document.getElementById("messageText2");

      // canvas要素を取得
      const canvas = document.getElementById("canvas");
      // canvasを操作する機能を持った、オブジェクトを取り出す
      const ctx = canvas.getContext("2d");
      // srcプロパティに画像の取得先のパスをセットする
      function drawImage(text1, text2) {
        // 表示をクリア
        ctx.clearRect(0, 0, 375, 375);
        // 文字を埋め込む時の大きさとフォント
        ctx.font = `20px sans-serif`;

        let rNum = Math.floor(Math.random() * 121);
        let counter = 0;

        for (let i = 0; i < 11; i++) {
          for (let j = 0; j < 11; j++) {
            if (rNum === counter) {
              ctx.fillText(messageText1.value, 25 + 30 * i, 38 + 30 * j);
              flg = true;
            } else {
              ctx.fillText(messageText2.value, 25 + 30 * i, 38 + 30 * j);
            }
            counter += 1;
          }
        }
      }
    </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%;
	max-width: 500px;
	}
	.content {
	width: 100%;
	}
	.center {
	text-align: center;
	}
	.canvas-wrap {
	width: 375px;
	margin: 0 auto;
	}
	.input-data {
	text-align: right;
	}
	.mt5 {
	max-width: 100%;
	margin: 5px 10px;
	}
	</style>
	</head>
	<body>
	<div class="center">
	<h1 class="center">間違い探し生成</h1>
	</div>

	<div class="canvas-wrap">
	<canvas
	id="canvas"
	class="center"
	width="375"
	height="375"
	></canvas>
	</div>

	<div class="input-data mt5">
	<div>
	<label>表示する文字</label>
	<input id="messageText1" type="text" placeholder="文字1" value="小" maxlength="1"/>
	</div>
	<div>
	<label>紛らわしい文字</label>
	<input id="messageText2" type="text" placeholder="文字2" value="大" maxlength="1"/>
	</div>
	</div>

	<div class="center mt5">
	<button onclick="drawImage()">間違い探しを生成</button>
	</div>

	<script>
	const messageText1 = document.getElementById("messageText1");
	const messageText2 = document.getElementById("messageText2");

	// canvas要素を取得
	const canvas = document.getElementById("canvas");
	// canvasを操作する機能を持った、オブジェクトを取り出す
	const ctx = canvas.getContext("2d");
	// srcプロパティに画像の取得先のパスをセットする
	function drawImage(text1, text2) {
	// 表示をクリア
	ctx.clearRect(0, 0, 375, 375);
	// 文字を埋め込む時の大きさとフォント
	ctx.font = `20px sans-serif`;

	let rNum = Math.floor(Math.random() * 121);
	let counter = 0;

	for (let i = 0; i < 11; i++) {
	for (let j = 0; j < 11; j++) {
	if (rNum === counter) {
	ctx.fillText(messageText1.value, 25 + 30 * i, 38 + 30 * j);
	flg = true;
	} else {
	ctx.fillText(messageText2.value, 25 + 30 * i, 38 + 30 * j);
	}
	counter += 1;
	}
	}
	}
	</script>
	</body>
	</html>