Как вывести все изображения?

Question

[Иван Симонов]

Здравствуйте
Есть код https://jsfiddle.net/3hqwL4vf/

Массив изображений

const imgBalls = [
		'https://placehold.jp/ffffff/000000/200x200.png',
		'https://placehold.jp/ffffff/000000/180x180.png',
		'https://placehold.jp/ffffff/000000/140x140.png',
		'https://placehold.jp/ffffff/000000/120x120.png',
		'https://placehold.jp/ffffff/000000/80x80.png',
		'https://placehold.jp/ffffff/000000/62x62.png'
	]

в этом блоке пытаюсь их отобразить

Ball.prototype.draw = function (ctx) {
		// Wireframe ball
		// ctx.beginPath();
		// ctx.arc(this.x, this.y, this.radius, 0, TWO_PI);
		// ctx.stroke();

		for (let i = 0; i < imgBalls.length; i++) {
			img = new Image();
			ballSrc = imgBalls[i];
			img.src = ballSrc;
			if (stackBall) {
				ctx.drawImage(
					img,
					this.x - this.radius - xOffset,
					this.y - this.radius - xOffset,
					this.width,
					this.height
				);
			} else {
				ctx.drawImage(
					img,
					this.x - xOffset,
					this.y - yOffset,
					this.width,
					this.height
				);
			}
		}
	};

Но отображается последний элемент массива
Подскажите, как вывести все элементы массива
Заранее спасибо

Answer 1

[Vest]

Я не знаю, какая у вас задача, но я так понял, что мячик (объект) - это одна картинка. А раз так, давайте выберем случайную картинку из массива:

const Ball = function (x, y, radius, width, height) {
    ...
    this.ballNum = Math.round(Math.random() * imgBalls.length)

А потом в вашем методе draw не будем перебирать все картинки, а возьмём лишь ту, которую выбрал наш мяч:

Ball.prototype.draw = function (ctx) {
    // for (let i = 0; i < imgBalls.length; i++) {
    img = new Image();
    ballSrc = imgBalls[this.ballNum];
    ...
    // }
};

Comments

[Иван Симонов]

Задача - отобразить все изображения

[Vest]

Иван Симонов, создайте Ball в цикле. Можете передать i как параметр в конструктор. Сейчас попробую сделать вам пример.
upd: надеюсь, не домашку вам решаю.

[Иван Симонов]

Vest, нет это не домашка

[Vest]

Держите: https://jsfiddle.net/fxoL5kw4/
Не знаю, так ли вы хотели, я думаю, что код вы где-то взяли, но не стёрли половину неиспользуемых переменных.

Мой код не идеален, так как там случайное наполнение шариков страдает, но в целом пользуйтесь на здоровье.

[Иван Симонов]

Vest, да вы правы, код взят из песочницы codepen (80%). Это черновой вариант, буду разбираться. Спасибо и удачного дня

[Vest]

и вам удачи, посмотрите, те ли шарики болтаются?

[Иван Симонов]

Vest, да, все ок