xhackjp1/index-1.html

## index-1.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" />
  </head>
  <body>
    <div class="center">
      <h1 class="center">間違い探し</h1>
      <h4>一つだけボストンテリアが紛れています</h4>
    </div>
    <div id="app" class="canvas_wrap">
      <canvas
        id="canvas"
        class="center"
        width="360"
        height="360"
        style="background-color: darkslategrey;"
      ></canvas>
    </div>

    <script>
      var canvas = document.getElementById("canvas")
      var ctx = canvas.getContext("2d")

      let img1 = new Image()
      img1.src = "https://storage.tenki.jp/storage/static-images/suppl/article/image/2/27/277/27740/1/large.jpg"

      img1.onload = () => {
        ctx.drawImage(img1, 180 * 0, 180 * 0, 180, 180)
      }
    </script>
  </body>
</html>

## index-2.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" />
  </head>
  <body>
    <div class="center">
      <h1 class="center">間違い探し</h1>
      <h4>一つだけボストンテリアが紛れています</h4>
    </div>
    <div id="app" class="canvas_wrap">
      <canvas
        id="canvas"
        class="center"
        width="360"
        height="360"
        style="background-color: darkslategrey;"
      ></canvas>
    </div>

    <script>
      var canvas = document.getElementById("canvas")
      var ctx = canvas.getContext("2d")

      // img 要素を生成
      let img1 = new Image()
      // http://~~ に通信でデータを取得しにいっている
      // 通信は時間がかかる処理なので、非同期で動いている
      // なぜ非同期で動くかというと、通信の完了には時間がかかるから
      // その間後続の処理を行った方が効率が良いので、そういう実装になっている
      img1.src = "https://storage.tenki.jp/storage/static-images/suppl/article/image/2/27/277/27740/1/large.jpg"
      img1.onload = function () {
        ctx.drawImage(img1, 0, 0, 180, 180)
      }
    </script>
  </body>
</html>

## index-3.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" />
  </head>
  <body>
    <div class="center">
      <h1 class="center">間違い探し</h1>
      <h4>一つだけボストンテリアが紛れています</h4>
    </div>
    <div id="app" class="canvas_wrap">
      <canvas
        id="canvas"
        class="center"
        width="360"
        height="360"
        style="background-color: darkslategrey"
      ></canvas>
    </div>

    <script>
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");

      function drawImage(x, y, srcUrl) {
        // img 要素を生成
        let img = new Image();
        img.src = srcUrl;
        img.onload = function () {
          ctx.drawImage(img, x, y, 120, 120);
        };
      }

      drawImage(0, 0, "https://storage.tenki.jp/storage/static-images/suppl/article/image/2/27/277/27740/1/large.jpg")
      drawImage(120, 0, "https://newsbyl-pctr.c.yimg.jp/r/iwiz-amd/20200320-00168403-roupeiro-000-12-view.jpg")
      drawImage(0, 120, "https://dime.jp/genre/files/2020/11/44817f7cc02f549d516a94cc2710c53f-770x510.png")
      drawImage(120, 120, "https://www.asahicom.jp/articles/images/AS20200804000981_comm.jpg")

      // // img 要素を生成
      // let img2 = new Image();
      // img2.src = "https://newsbyl-pctr.c.yimg.jp/r/iwiz-amd/20200320-00168403-roupeiro-000-12-view.jpg";
      // img2.onload = function () {
      //   ctx.drawImage(img2, 0, 180, 180, 180);
      // };

      // // img 要素を生成
      // let img3 = new Image();
      // img3.src = "";
      // img3.onload = function () {
      //   ctx.drawImage(img3, 180, 0, 180, 180);
      // };

      // // img 要素を生成
      // let img4 = new Image();
      // img4.src = "https://www.asahicom.jp/articles/images/AS20200804000981_comm.jpg";
      // img4.onload = function () {
      //   ctx.drawImage(img4, 180, 180, 180, 180);
      // };
    </script>
  </body>
</html>

## index-4.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" />
  </head>
  <body>
    <div class="center">
      <h1 class="center">間違い探し</h1>
      <h4>一つだけボストンテリアが紛れています</h4>
    </div>
    <div id="app" class="canvas_wrap">
      <canvas
        id="canvas"
        class="center"
        width="360"
        height="360"
        style="background-color: darkslategrey"
      ></canvas>
    </div>

    <script>
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");
      // マジックナンバーは定数として定義しておく(なんのための数字か変数名で理解できるようにするため)
      const MAX_COLUMN = 3;
      const IMAGE_WIDTH = 120;
      const IMAGES = [
        "https://www.asahicom.jp/articles/images/AS20200804000981_comm.jpg",
        "https://newsbyl-pctr.c.yimg.jp/r/iwiz-amd/20200320-00168403-roupeiro-000-12-view.jpg",
        "https://www.asahicom.jp/articles/images/AS20200804000981_comm.jpg",
        "https://www.asahicom.jp/articles/images/AS20200804000981_comm.jpg",
        "https://www.asahicom.jp/articles/images/AS20200804000981_comm.jpg",
        "https://www.asahicom.jp/articles/images/AS20200804000981_comm.jpg",
        "https://www.asahicom.jp/articles/images/AS20200804000981_comm.jpg",
        "https://www.asahicom.jp/articles/images/AS20200804000981_comm.jpg",
        "https://www.asahicom.jp/articles/images/AS20200804000981_comm.jpg",
      ]

      function drawImage(x, y, srcUrl) {
        // img 要素を生成
        const img = new Image();
        img.src = srcUrl;
        img.onload = function () {
          ctx.drawImage(img, x, y, IMAGE_WIDTH, IMAGE_WIDTH);
        };
      }

      let counter = 0;
      for(let i=0;i<MAX_COLUMN;i++){
        for(let j=0;j<MAX_COLUMN;j++){
          drawImage(IMAGE_WIDTH * i, IMAGE_WIDTH * j, IMAGES[counter])
          counter += 1
        }
      }
    </script>
  </body>
</html>

## index-5.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" />
  </head>
  <body>
    <div class="center">
      <h1 class="center">間違い探し</h1>
      <h4>一つだけボストンテリアが紛れています</h4>
    </div>
    <div id="app" class="canvas_wrap">
      <canvas
        id="canvas"
        class="center"
        width="360"
        height="360"
        style="background-color: darkslategrey"
      ></canvas>
    </div>

    <script>
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");
      // マジックナンバーは定数として定義しておく(なんのための数字か変数名で理解できるようにするため)
      const MAX_COLUMN = 3;
      const IMAGE_WIDTH = 120;

      function drawImage(x, y, srcUrl) {
        // img 要素を生成
        const img = new Image();
        img.src = srcUrl;
        img.onload = function () {
          ctx.drawImage(img, x, y, IMAGE_WIDTH, IMAGE_WIDTH);
        };
      }

      let counter = 0;
      let randomNumber = Math.floor(Math.random() * 8)
      for(let i=0;i<MAX_COLUMN;i++){
        for(let j=0;j<MAX_COLUMN;j++){
          if(counter === randomNumber){
            drawImage(IMAGE_WIDTH * i, IMAGE_WIDTH * j, `./dogs/ボストンテリア_2.png`)
          }else{
            drawImage(IMAGE_WIDTH * i, IMAGE_WIDTH * j, `./dogs/フレンチブルドッグ_${counter}.png`)
          }
          counter += 1
        }
      }
    </script>
  </body>
</html>

## index-6.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" />
  </head>
  <body>
    <div class="center">
      <h1 class="center">間違い探し</h1>
      <h4>一つだけボストンテリアが紛れています</h4>
    </div>
    <div id="app" class="canvas_wrap">
      <canvas
        id="canvas"
        class="center"
        width="360"
        height="360"
        style="background-color: darkslategrey"
      ></canvas>
    </div>

    <script>
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");
      // マジックナンバーは定数として定義しておく(なんのための数字か変数名で理解できるようにするため)
      const MAX_COLUMN = 3;
      const IMAGE_WIDTH = 120;

      function drawImage(x, y, srcUrl) {
        // img 要素を生成
        const img = new Image();
        img.src = srcUrl;
        img.onload = function () {
          ctx.drawImage(img, x, y, IMAGE_WIDTH, IMAGE_WIDTH);
        };
      }

      let counter = 0;
      let randomNumber = Math.floor(Math.random() * 8)
      for(let i=0;i<MAX_COLUMN;i++){
        for(let j=0;j<MAX_COLUMN;j++){
          if(counter === randomNumber){
            drawImage(IMAGE_WIDTH * i, IMAGE_WIDTH * j, `./dogs/ボストンテリア_2.png`)
          }else{
            drawImage(IMAGE_WIDTH * i, IMAGE_WIDTH * j, `./dogs/フレンチブルドッグ_${counter}.png`)
          }
          counter += 1
        }
      }

      // addEventListenerは複数のイベントを登録できる
      // 別のイベントをつけるときは、removeEventListener で
      // くっつけたイベントを取り外すことを忘れずに
      canvas.addEventListener("click", (event) => {
        console.log({ x: event.layerX, y: event.layerY })
      })
    </script>
  </body>
</html>

## index-final.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" />
  </head>
  <body>
    <div class="center">
      <h1 class="center">間違い探し</h1>
      <h4>一つだけボストンテリアが紛れています</h4>
    </div>
    <div id="app" class="canvas_wrap">
      <canvas
        id="canvas"
        class="center"
        width="360"
        height="360"
        style="background-color: darkslategrey"
      ></canvas>
    </div>

    <script>
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");
      // マジックナンバーは定数として定義しておく(なんのための数字か変数名で理解できるようにするため)
      const MAX_COLUMN = 3;
      const IMAGE_WIDTH = 120;
      let ngImagePosition = {
        x1: null,
        x2: null,
        y1: null,
        y2: null,
      }

      function drawImage(x, y, srcUrl) {
        // img 要素を生成
        const img = new Image();
        img.src = srcUrl;
        img.onload = function () {
          ctx.drawImage(img, x, y, IMAGE_WIDTH, IMAGE_WIDTH);
        };
      }

      let counter = 0;
      let randomNumber = Math.floor(Math.random() * 8)
      for(let i=0;i<MAX_COLUMN;i++){
        for(let j=0;j<MAX_COLUMN;j++){
          if(counter === randomNumber){
            // 正解の画像
            drawImage(IMAGE_WIDTH * i, IMAGE_WIDTH * j, `./dogs/ボストンテリア_2.png`)
            // 正解の画像の位置を記憶しておく・・・
            ngImagePosition.x1 = IMAGE_WIDTH * i
            ngImagePosition.x2 = IMAGE_WIDTH * i + 120
            ngImagePosition.y1 = IMAGE_WIDTH * j
            ngImagePosition.y2 = IMAGE_WIDTH * j + 120
          }else{
            drawImage(IMAGE_WIDTH * i, IMAGE_WIDTH * j, `./dogs/フレンチブルドッグ_${counter}.png`)
          }
          counter += 1
        }
      }

      // addEventListenerは複数のイベントを登録できる
      // 別のイベントをつけるときは、removeEventListener で
      // くっつけたイベントを取り外すことを忘れずに
      canvas.addEventListener("click", (event) => {
        // console.log({ x: event.layerX, y: event.layerY })
        let xPosRange = ngImagePosition.x1 <= event.layerX && ngImagePosition.x2 >= event.layerX
        let yPosRange = ngImagePosition.y1 <= event.layerY && ngImagePosition.y2 >= event.layerY

        if(xPosRange && yPosRange){
          console.log("正解")
        }
      })
    </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" />
	</head>
	<body>
	<div class="center">
	<h1 class="center">間違い探し</h1>
	<h4>一つだけボストンテリアが紛れています</h4>
	</div>
	<div id="app" class="canvas_wrap">
	<canvas
	id="canvas"
	class="center"
	width="360"
	height="360"
	style="background-color: darkslategrey;"
	></canvas>
	</div>

	<script>
	var canvas = document.getElementById("canvas")
	var ctx = canvas.getContext("2d")

	let img1 = new Image()
	img1.src = "https://storage.tenki.jp/storage/static-images/suppl/article/image/2/27/277/27740/1/large.jpg"

	img1.onload = () => {
	ctx.drawImage(img1, 180 * 0, 180 * 0, 180, 180)
	}
	</script>
	</body>
	</html>