Рисунки у Javascript Піксель-арт | JavaScript

Зміст:

Створімо власні рисунки у Javascript Піксель-арт – це особливий вид мистецтва малювання зображень на комп’ютері, який відносить до ігор 90-х. На цьому уроці ми створимо редактор для малювання у піксельних зображень.

Практика.
Піксель-арт у JavaScript

1: (HTML) Створіть новий проєкт. Додайте тег div з id=”art”. Це буде контейнер для нашої таблички.

  <div id="art">

  </div>

2: (CSS) Додаймо стилів квадратику. Додайте ще такі стилі : колір фону: чорний.

#art {
  display: table;
  border-spacing: 1px;
  border: 5px solid black;
}

3: (HTML) Додайте блок div з класом row, в середину нього додайте 3 елементи div з класом pixel.

Рисунки у Javascript Піксель-арт | JavaScript для дітей | ITisFuture

4: (CSS) Додаймо ще стилів. Замініть назви властивостей на правильні де треба:

.row {
  display: table-row;
}

.pixel {
  display: table-cell;
  колір-фону: білий;
  ширина: 40пікселів;
  висота: 40пікселів;
  рамка: 1px solid чорний;
}

Зверніть увагу: Ви використали клас (стиль починається з крапки) замість ідентифікатора (стиль починається з решітки) для стилізації рядків і пікселів у div. Це тому, що їх буде багато.

5: (HTML) Змініть код, створивши поле 3 на 3.

Підказка, якщо треба

Знайдіть тег з класом row і скопіюйте його, включно з рядками, позначеними pixel, які знаходяться всередині нього, аж до відповідного тегу.
Вставте цей код безпосередньо під секцією, яку ви щойно скопіювали, щоб створити ще один рядок. Повторіть ще раз, щоб у вас було три рядки по три пікселі у кожному.

6: (HTML) Створіть файл для скриптів і підключіть його.

<script src="scripts.js"></script>

7: (JavaScript) Створіть функцію у коді javascript. Функція має називатися setPixelColour і мати один параметр pixel. В середині функції один рядок коду:

  pixel.style.backgroundColor = "black";

8: (HTML) До div class=”pixel” додайте властивість: onclick=”setPixelColour(this)” , щоб викликати функцію JS, коли клікнуть на квадратик.

8: (HTML) Розширте поле до розміру 8 на 8. Кожен pixel має мати властивість onclick.

Спробуйте клікнути на квадратики. Вони зафарбовуються у чорний?

Створюємо палітру кольорів

9: (CSS) Додайте наступні стилі для палітри. Вона буде показувати набір кольорів зверху сітки. Розміри та спільні властивості задаємо у стилях, кольори визначимо у html пізніше.

.pen {
  display: inline-block;
  ширина: 40пікселів;
  висота: 40пікселів;
  border: 2px solid чорний;
}

10: (HTML) Вставте код палітри перед id=”art”.
Додайте блок div id=”palette”. В середину цього div додайте ще блок div з class=”pen” style=”background-color:black;”. Також в середину додайте такий же рядок, тільки з білим кольором, замість чорного (решта коду точно така ж).

11: (JavaScript) Створіть змінну penColour зі значенням ‘black’;

12: (JavaScript) Створіть нову функцію setPenColour з вхідним параметром pen. В середині функції такий код: penColour = pen;
Змініть функцію setPixelColour, щоб вона використовувала змінну penColour замість ‘black’:

13: (HTML) додайте властивість onclick=”setPenColour(‘white’) до блоків pen у палітрі. (Приклад для білого кольору, аналогічно для чорного)