Вопрос по javascript и canvas

116

20 декабря 2019, 20:20

var canvas = document.getElementById('canvas'); 
var c = canvas.getContext('2d'); 
canvas.style.backgroundColor = "grey"; 
var obje = {
  width : 20,
  height : 30,
  speed : 5,
  color : "white",
}
var arr = [];
for (i=0; i<10; i++) {
  c.fillStyle = obje.color;
  x=500*Math.random(); // ВЫЧИСЛЯЕМ РАНДОМНЫЕ КООРДИНАТЫ ПО ИКСУ
  y=500*Math.random(); // ПО ИГРИКУ
  obje.x = x; // ПРИСВАЕМ ЭТИ РАНДОМНЫЕ КООРДИНАТЫ В СВОЙСТВА ОБЪЕКТА
  obje.y = y; 
  c.fillRect(x,y,obje.height,obje.width);
  arr.push(obje);
};

Почему всем объектам присваиваются одни координаты?

Я жду, что каждый получит новые случайные)

Answer 1

Каждый вызов метода push() в твоем скрипте, создает новую ссылку (на тот же самый obje), а не новый объект.
Объекты в JavaScript всегда передаются по ссылке.

Проще всего добавлять в массив новый объект созданный литеральной записью:

const cnv = document.getElementById('cnv'),  
      ctx = cnv.getContext('2d'),  
      objects = [];  
const rndUInt = to => Math.floor(Math.random() * to);  
 
for (let i = 0; i < 10; i++) { 
  let newObj = { 
    x: rndUInt(300),  
    y: rndUInt(200),  
    width: 20, 
    height: 30, 
    speed: 5, 
    color: 'green' 
  };  
  ctx.fillStyle = newObj.color; 
  ctx.fillRect(newObj.x, newObj.y, newObj.width, newObj.height);  
  objects.push(newObj); 
}

html, body, #cnv { height: 100%; margin: 0; padding: 0; } 
#cnv { width: 100%; }

<canvas id="cnv"></canvas>

Если же ты хочешь именно копировать имеющийся объект, то в данном случае подойдет такое выражение:

let newObj = Object.assign({}, obje);

Оно копирует все свойства obje (и их значения) в новый пустой объект {} - и затем, ссылку на него присваивает переменнной.

Создание интернет-магазина строительных материалов в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как присвоить класс при нажатии на внутренний блок?

Есть несколько таких блоков кода, как при нажатии на кнопку отправить присвоить классу mainli ещё один класс active?

119

javascript

Сортировка у меня правильно сделана? [закрыт]

Хотите улучшить этот вопрос? Update the question so it's on-topic for Stack Overflow на русском

157

javascript

Запись данных в значение объекта

Хочу сделать подобие строительного калькулятора где будут вписаны данныеДо конца не могу понять 1 вещь

133

javascript

jquery не видит переменную в window load

Я пытаюсь создать переменную (объект), затем отредактировать ее после загрузки DOMВ данном случае в переменной pageQuery находятся селекторы, которые...

146