ВебмастерскаяСекреты вебмастера

Создание PixelArt на HTML и JS

Создание PixelArt на HTML и JS

Здравствуйте. В сегодняшней статье мы рассмотрим создание простого PixelArt с помощью HTML и JavaScript. Данное направление считается одним из современных видов цифрового искусства. Итак, приступим. Для начала, создадим HTML разметку. Далее выделим элемент pixel и размножим его до требуемого количества. Затем добавим возможность выделения ячейки определенным цветом, при клике по ней. Перейдем к коду.


<!DOCTYPE html>
<html>
<head>
  <title>Пиксель-арт с HTML и JS</title>
  <style>
    .pixel {
      width: 10px;
      height: 10px;
      border: 1px solid #000;
      display: inline-block;
    }
  </style>
</head>
<body>
  <div id="canvas"></div>
  <button onclick="savePixelArt()">Сохранить</button>
  <script>

const canvas = document.getElementById('canvas');
let isDrawing = false;

function createPixel() {
  const pixel = document.createElement('div');
  pixel.className = 'pixel';

  pixel.addEventListener('mousedown', () => {
    isDrawing = true;
    pixel.style.backgroundColor = 'red';
  });

  pixel.addEventListener('mouseover', () => {
    if (isDrawing) {
      pixel.style.backgroundColor = 'red';
    }
  });

  pixel.addEventListener('mouseup', () => {
    isDrawing = false;
  });

  return pixel;
}

function savePixelArt() {
  const pixels = canvas.querySelectorAll('.pixel');
  let pixelArt = '';
  pixels.forEach((pixel, index) => {
    pixelArt += pixel.style.backgroundColor === 'red' ? '1' : '0';
    if ((index + 1) % 10 === 0) {
      pixelArt += 'n'; // Добавляем перенос строки каждые 10 пикселей (можно изменить)
    }
  });
  console.log(pixelArt); // Здесь можно использовать полученные данные, например, отправить на сервер или сохранить в файл
}

// Создаем сетку 20x20 пикселей
for (let i = 0; i < 100 * 100; i++) {
  canvas.appendChild(createPixel());
}

  </script>
</body>
</html>

Таким образом, мы создали подобие холста с пикселями на JavaScript для вывода PixelArt картин.

Источник

Статьи по теме

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Back to top button