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" />
  </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 IMAGE_WIDTH = 120;

      class DogImage {
        constructor(context, x, y, srcImage) {
          this.context = context;
          this.x = x;
          this.y = y;
          this.speedX = Math.floor(Math.random() * 30) - 15; // -15 ~ 15
          this.speedY = Math.floor(Math.random() * 30) - 15; // -15 ~ 15
          this.image = new Image();
          this.image.src = srcImage;
        }

        update() {
          this.x += this.speedX;
          this.y += this.speedY;
          if (this.x > 240 || this.x < 0) {
            this.speedX *= -1;
          }
          if (this.y > 240 || this.y < 0) {
            this.speedY *= -1;
          }
          this.context.drawImage(
            this.image,
            this.x,
            this.y,
            IMAGE_WIDTH,
            IMAGE_WIDTH
          );
        }
      }

      let dog0 = new DogImage(ctx, 180, 180, "./dogs/フレンチブルドッグ_0.png");
      let dog1 = new DogImage(ctx, 180, 180, "./dogs/フレンチブルドッグ_1.png");
      let dog2 = new DogImage(ctx, 180, 180, "./dogs/フレンチブルドッグ_2.png");
      let dog3 = new DogImage(ctx, 180, 180, "./dogs/フレンチブルドッグ_3.png");
      let dog4 = new DogImage(ctx, 180, 180, "./dogs/フレンチブルドッグ_4.png");
      let dog5 = new DogImage(ctx, 180, 180, "./dogs/フレンチブルドッグ_5.png");
      let dog6 = new DogImage(ctx, 180, 180, "./dogs/フレンチブルドッグ_6.png");
      let dog7 = new DogImage(ctx, 180, 180, "./dogs/フレンチブルドッグ_7.png");
      let dog8 = new DogImage(ctx, 180, 180, "./dogs/フレンチブルドッグ_8.png");
      let dog9 = new DogImage(ctx, 180, 180, "./dogs/ボストンテリア_0.png");

      // メインの処理
      setInterval(() => {
        ctx.clearRect(0,0,360,360)
        dog0.update()
        dog1.update()
        dog2.update()
        dog3.update()
        dog4.update()
        dog5.update()
        dog6.update()
        dog7.update()
        dog8.update()
        dog9.update()
      }, 33)
    </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>
	const canvas = document.getElementById("canvas");
	const ctx = canvas.getContext("2d");
	// マジックナンバーは定数として定義しておく(なんのための数字か変数名で理解できるようにするため)
	const IMAGE_WIDTH = 120;

	class DogImage {
	constructor(context, x, y, srcImage) {
	this.context = context;
	this.x = x;
	this.y = y;
	this.speedX = Math.floor(Math.random() * 30) - 15; // -15 ~ 15
	this.speedY = Math.floor(Math.random() * 30) - 15; // -15 ~ 15
	this.image = new Image();
	this.image.src = srcImage;
	}

	update() {
	this.x += this.speedX;
	this.y += this.speedY;
	if (this.x > 240 \|\| this.x < 0) {
	this.speedX *= -1;
	}
	if (this.y > 240 \|\| this.y < 0) {
	this.speedY *= -1;
	}
	this.context.drawImage(
	this.image,
	this.x,
	this.y,
	IMAGE_WIDTH,
	IMAGE_WIDTH
	);
	}
	}

	let dog0 = new DogImage(ctx, 180, 180, "./dogs/フレンチブルドッグ_0.png");
	let dog1 = new DogImage(ctx, 180, 180, "./dogs/フレンチブルドッグ_1.png");
	let dog2 = new DogImage(ctx, 180, 180, "./dogs/フレンチブルドッグ_2.png");
	let dog3 = new DogImage(ctx, 180, 180, "./dogs/フレンチブルドッグ_3.png");
	let dog4 = new DogImage(ctx, 180, 180, "./dogs/フレンチブルドッグ_4.png");
	let dog5 = new DogImage(ctx, 180, 180, "./dogs/フレンチブルドッグ_5.png");
	let dog6 = new DogImage(ctx, 180, 180, "./dogs/フレンチブルドッグ_6.png");
	let dog7 = new DogImage(ctx, 180, 180, "./dogs/フレンチブルドッグ_7.png");
	let dog8 = new DogImage(ctx, 180, 180, "./dogs/フレンチブルドッグ_8.png");
	let dog9 = new DogImage(ctx, 180, 180, "./dogs/ボストンテリア_0.png");

	// メインの処理
	setInterval(() => {
	ctx.clearRect(0,0,360,360)
	dog0.update()
	dog1.update()
	dog2.update()
	dog3.update()
	dog4.update()
	dog5.update()
	dog6.update()
	dog7.update()
	dog8.update()
	dog9.update()
	}, 33)
	</script>
	</body>
	</html>