@Rubix
Учусь на React-разработчика.

Как разбить картинку на пиксели?

Всем привет! Делаю игру вроде пиксель-арта, где надо по номерам раскрашивать картинку. Записываю картинки в формате матрицы (row => col => color):
let matrix = [
	['white', 'red', 'white', 'red', 'white'],
	['red', 'red', 'red', 'red', 'red'],
	['red', 'red', 'red', 'red', 'red'],
	['white', 'red', 'red', 'red', 'white'],
	['white', 'white', 'red', 'white', 'white']
]

На примере я показал именованные цвета, но можно и hex'ом.
Для выбора цвета я перебираю этот массив и записываю цвет в отдельный массив. Если такой цвет уже есть, то пропускаю:
let colors = [];
for (let i = 0; i < matrix.length; i++) {
	for (let j = 0; j < matrix[0].length; j++) {
		console.log(matrix[i][j]);
		if (colors.indexOf(matrix[i][j]) === -1) colors.push(matrix[i][j]);
	}
}

Как мне сделать функцию, которая будет разбивать обычную картинку на пиксели и записывать их в matrix? Вручную записывать не удобно.
  • Вопрос задан
  • 135 просмотров
Решения вопроса 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
Загрузить картинку в canvas, взять imageData и пройтись циклом.
См. уроки как работать с canvas на MDN, в частности Pixel Manipulation.

Набросал работающий пример:
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@66demon666
По навыкам джун - по факту безработный
Мне таки думается, что в таких играх под "пикселем" подразумевается некий квадрат определенного размера (тот же div). Вам надо создать сетку из таких квадратов, ловить нажатия по ним и обновлять матрицу соответственно.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Intspirit Краснодар
от 80 000 до 150 000 ₽
25 янв. 2021, в 12:58
1500 руб./за проект
25 янв. 2021, в 12:53
1000 руб./за проект
25 янв. 2021, в 12:32
30000 руб./за проект