はじめに

ChatGPTを使って、HTMLとCSS、Javascriptのみのドット絵を作成してみました。
今回はハートを作成します。

今回利用したプロンプト

あなたはプロのエンジニアです。

以下の制約条件と入力文をもとに、HTMLとCSSを使ったドット絵を出力してください。

# 制約条件
  - HTMLとCSSとJavascriptのみ
  - htmlファイルを1ファイルで出力する
  - 表示位置をセンターとする

# 入力文
HTMLとCSSとJavascriptを使ったハートのドット絵を出力してほしい
16x16のドット絵
ハートの色を赤、背景を黒

完成

ドット絵（HTMLを画面で出力したもの）

ChatGPTが出力したコード

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ハートのドット絵</title>

	<style>
		.container {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			background-color: #000000;
		}
		.pixel {
			width: 20px;
			height: 20px;
			border-radius: 50%;
			position: relative;
			top: 10px;
			transform: rotate(-45deg);
			margin: 0 4px;
		}
		.red {
			background-color: #FF0000;
		}
	</style>
</head>
<body>
	<div class="container"></div>

	<script>
		const container = document.querySelector('.container');
		const pixels = [];

		for (let i = 0; i < 256; i++) {
			pixels[i] = document.createElement('div');
			pixels[i].classList.add('pixel');
			container.appendChild(pixels[i]);
		}

		for (let i = 0; i < 256; i++) {
			if ((i >= 0 && i <= 7) || (i >= 248 && i <= 255)) {
				pixels[i].classList.add('red');
			} else if ((i >= 8 && i <= 15) || (i >= 240 && i <= 247)) {
				pixels[i].classList.add('red');
			} else if ((i >= 16 && i <= 31) || (i >= 224 && i <= 239)) {
				pixels[i].classList.add('red');
			} else if ((i >= 32 && i <= 47) || (i >= 208 && i <= 223)) {
				pixels[i].classList.add('red');
			} else if ((i >= 48 && i <= 63) || (i >= 192 && i <= 207)) {
				pixels[i].classList.add('red');
			} else if ((i >= 64 && i <= 79) || (i >= 176 && i <= 191)) {
				pixels[i].classList.add('red');
			} else if ((i >= 80 && i <= 95) || (i >= 160 && i <= 175)) {
				pixels[i].classList.add('red');
			} else if ((i >= 96 && i <= 111) || (i >= 144 && i <= 159)) {
				pixels[i].classList.add('red');
			} else if ((i >= 112 && i <= 127) || (i >= 128 && i <= 143)) {
				pixels[i].classList.add('red');
			}
		}
	</script>
</body>
</html>

追記（動的なドット絵を作成）

プロンプト

あなたはプロのエンジニアです。

以下の制約条件と入力文をもとに、HTMLとCSSを使ったドット絵を出力してください。

# 制約条件
  - HTMLとCSSとJavascriptのみ
  - htmlファイルを1ファイルで出力する
  - 表示位置をセンターとする

# 入力文
HTMLとCSSとJavascriptを使ったハートのドット絵を出力してほしい
16x16のドット絵
ハートの色を赤、背景を黒
ハートが5秒ごとに動くようにしたい

結果

コード

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: black;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
      }
      .pixel {
        width: 20px;
        height: 20px;
      }
      .black {
        background-color: black;
      }
      .red {
        background-color: red;
      }
      .grid {
        display: flex;
        flex-wrap: wrap;
        width: 320px;
        position: relative;
        animation: moveHeart 5s linear infinite;
      }
      @keyframes moveHeart {
        0% {
          transform: translateX(0);
        }
        50% {
          transform: translateX(100px);
        }
        100% {
          transform: translateX(0);
        }
      }
    </style>
  </head>
  <body>
    <div id="grid" class="grid">
      <!-- Pixel elements will be inserted here by JavaScript -->
    </div>

    <script>
      var heart = [
        "0000001001000000",
        "0000111001110000",
        "0001111111111000",
        "0011111111111100",
        "0011111111111100",
        "0001111111111000",
        "0000111111110000",
        "0000011111100000",
        "0000001111000000",
        "0000000110000000",
        "0000000000000000",
        "0000000000000000",
        "0000000000000000",
        "0000000000000000",
        "0000000000000000",
        "0000000000000000"
      ];

      var grid = document.getElementById("grid");

      heart.forEach(function (row) {
        for (var i = 0; i < row.length; i++) {
          var pixel = document.createElement("div");

          pixel.classList.add("pixel");

          if (row[i] === "0") {
            pixel.classList.add("black");
          } else {
            pixel.classList.add("red");
          }

          grid.appendChild(pixel);
        }
      });
    </script>
  </body>
</html>