Dlaczego zwraca undefined jak nadpisuje zmienne w funckji

Question

var piece = {
	// this.x = CordsUpdate.x;
	// this.y = CordsUpdate.y;
	x: undefined,
	y: undefined,
	radius: undefined,
	motionX: undefined,
	motionY: undefined,
	Part() {
		this.x = Math.random() * canvas.width;
		this.y = Math.random() * canvas.height;
		this.radius = Math.random() * 5 + 1;
		this.motionX = Math.random() * 3 - 1.5;
		this.motionY = Math.random() * 3 - 1.5;
	},
	//which direction  circle going
	motion() {
		this.x += this.motionX;
		this.y += this.motionY;
	},
	//creating a circle
	draw() {
		var colors = ["#780000", "#c1121f", "#fdf0d5", "#003049", "#669bbc"];
		// context.fillStyle = colors[Math.round(Math.random() * colors.length - 1)];
		context.fillStyle = "whitesmoke";
		context.beginPath();
		context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
		context.fill();
	},
};

PartArray = [];
//make particles
function start() {
	for (let i = 0; i < 100; i++) {
		PartArray.push(piece.Part());
	}
}
start();
console.log(PartArray);

 

Comments

a coś takiego dlaczego nic nie wypisuje na ekran 

var piece = {};
function Part() {
	// this.x = CordsUpdate.x;
	// this.y = CordsUpdate.y;
	piece.x = Math.random() * canvas.width;
	piece.y = Math.random() * canvas.height;
	piece.radius = Math.random() * 5 + 1;
	piece.motionX = Math.random() * 3 - 1.5;
	piece.motionY = Math.random() * 3 - 1.5;
	//direction when circle going
	piece.motion = function () {
		this.x += this.motionX;
		this.y += this.motionY;
	};
	//creating a circle
	piece.draw = function () {
		var colors = ["#780000", "#c1121f", "#fdf0d5", "#003049", "#669bbc"];
		// context.fillStyle = colors[Math.round(Math.random() * colors.length - 1)];
		context.fillStyle = "whitesmoke";
		context.beginPath();
		context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
		context.fill();
	};
	return piece;
}

PartArray = [];
//make particles
function start() {
	for (let i = 0; i < 100; i++) {
		PartArray.push(Part());
	}
}
start();
console.log(PartArray);
//trigger motion and draw
function makeThemBe() {
	for (let i = 0; i < PartArray.Length; i++) {
		PartArray[i].piece.motion();
		PartArray[i].piece.draw();
	}
}
//display
function animate() {
	context.clearRect(0, 0, canvas.width, canvas.height);
	makeThemBe();
	requestAnimationFrame(animate);
}

animate();

 

---

a coś takiego dlaczego nic nie wypisuje na ekran

Nie wiem, bo brakuje HTML-a, żeby można było to przetestować z Canvasem.

---

Natomiast popełniasz podobny błąd (tylko w innej formie), który opisałem niżej - operujesz na tym samym obiekcie piece. Przenieś tą zmienną z pierwszej linijki skryptu, do pierwszej linijki funkcji Part i wtedy w pętli będą się generować nowe obiekty z różnymi wartościami.

Answer 1

PartArray.push(piece.Part());

Tutaj wywołujesz metodę piece.Part() i jej zwracany wynik wstawiasz do tablicy PartArray. Problem polega na tym, że w metodzie piece.Part nic nie zwracasz, więc niejawnie zwraca undefined. Dlatego tablica zawiera 100 elementów o wartości undefined.

Comments

czyli jak nadpisać wartość w object

---

oraz u góry w kometarzu podałem przykłąd który zwraca już wartość ale nic nie wypusje na ekran nie amma pojecia dlaczego

---

Zwróć z metody piece.Part wartość this, a wtedy w tablicy zobaczysz 100 razy ten sam obiekt z nadpisanymi wartościami (właściwie z wartościami ustawionymi w ostatniej iteracji) - bo operujesz tutaj na jednym obiekcie. A powinieneś raczej w pętli tworzyć nowe obiekty i tam odpowiednio ustawiać im wartości.

---

@ScriptyChris czy teran funkcja motion odwołuje się do wartośść w construktorze part() 

// makes object witch can be acces in other functions

function Part() {
	// this.x = CordsUpdate.x;
	// this.y = CordsUpdate.y;
	this.x = Math.random() * canvas.width;
	this.y = Math.random() * canvas.height;
	this.radius = Math.random() * 5 + 1;
	this.motionX = Math.random() * 3 - 1.5;
	this.motionY = Math.random() * 3 - 1.5;
}
function motion() {
	//direction when circle going
	this.x += this.motionX;
	this.y += this.motionY;
}
function draw() {
	//creating a circle
	var colors = ["#780000", "#c1121f", "#fdf0d5", "#003049", "#669bbc"];
	// context.fillStyle = colors[Math.round(Math.random() * colors.length - 1)];
	context.fillStyle = "whitesmoke";
	context.beginPath();
	context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
	context.fill();
}

PartArray = [];
//make particles
function start() {
	for (let i = 0; i < 100; i++) {
		PartArray.push(new Part());
	}
}
start();
console.log(PartArray);
//trigger motion and draw
function makeThemBe() {
	for (let i = 0; i < PartArray.Length; i++) {
		PartArray[i].motion();
		PartArray[i].draw();
	}
}
//display
function animate() {
	context.clearRect(0, 0, canvas.width, canvas.height);
	makeThemBe();
	requestAnimationFrame(animate);
}

animate();

 

---

tutaj html 

  <canvas class="canvas" width="560" height="868"></canvas>

cały kod 

const canvas = document.querySelector(".canvas");
const context = canvas.getContext("2d");

//function seting window Size
function windowSize() {
	canvas.width = window.innerWidth * 2;
	canvas.height = window.innerHeight * 2;
	canvas.style.height = window.innerHeight + "px";
	canvas.style.width = window.innerWidth + "px";
	context.scale(2, 2);
	// console.log("windowSize");
}
var CordsUpdate = {
	x: undefined,
	y: undefined,
	Drawing: false,
};

// makes object witch can be acces in other functions

function Part() {
	// this.x = CordsUpdate.x;
	// this.y = CordsUpdate.y;
	this.x = Math.random() * canvas.width;
	this.y = Math.random() * canvas.height;
	this.radius = Math.random() * 5 + 1;
	this.motionX = Math.random() * 3 - 1.5;
	this.motionY = Math.random() * 3 - 1.5;
}
function motion() {
	//direction when circle going
	this.x += this.motionX;
	this.y += this.motionY;
}
function draw() {
	//creating a circle
	var colors = ["#780000", "#c1121f", "#fdf0d5", "#003049", "#669bbc"];
	// context.fillStyle = colors[Math.round(Math.random() * colors.length - 1)];
	context.fillStyle = "whitesmoke";
	context.beginPath();
	context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
	context.fill();
}

PartArray = [];
//make particles
function start() {
	for (let i = 0; i < 100; i++) {
		PartArray.push(new Part());
	}
}
start();
console.log(PartArray);
//trigger motion and draw
function makeThemBe() {
	for (let i = 0; i < PartArray.Length; i++) {
		PartArray[i].motion();
		PartArray[i].draw();
	}
}
//display
function animate() {
	context.clearRect(0, 0, canvas.width, canvas.height);
	makeThemBe();
	requestAnimationFrame(animate);
}

animate();

//mouse follow spray the circles
canvas.addEventListener("mousedown", function () {
	CordsUpdate.Drawing = true;
});

canvas.addEventListener("mousemove", function (e) {
	if (CordsUpdate.Drawing === true) {
		// Circle.sprayCircle();
		// Circle.DontTryToShrinkGypsy();
		CordsUpdate.x = e.offsetX;
		CordsUpdate.y = e.offsetY;
	}
});
window.addEventListener("mouseup", function () {
	if (CordsUpdate.Drawing === true) {
		CordsUpdate.Drawing = false;
	}
});
//end

windowSize();
window.addEventListener("resize", windowSize, false);

 

---

Teraz jest już lepiej, bo do tablicy PartArray wstawiasz nowe obiekty i one mają różne wartości. Ale co się dalej dzieje odnośnie Canvasa to nie wiem, bo nie pokazałeś HTML-a.

---

Odnośnie Canvasa. Tutaj pętla się nie wykonuje, ponieważ zrobiłeś literówkę Length (powinno być z małej litery):

function makeThemBe() {
    for (let i = 0; i < PartArray.Length; i++) {

Jak już pętla się uruchomi, to w konsoli pojawia się błąd, że obiekt PartArray[i].motion nie jest funkcją (analogicznie z PartArray[i].draw), bo te metody są samodzielnymi funkcjami - wrzuć je do obiektu, albo lepiej do prototypu, a najlepiej jakbyś to przepisał na klasy.

---

Uzywajac prototypu to coś ma być w tym stylu czy źle myślę

Part.prototype.motion = function () {
	//direction when circle going
	this.x += this.motionX;
	this.y += this.motionY;
};

 

---

nwm mam jedynie musiałem poprawić  

   PartArray[i].Part.motion();

        PartArray[i]..Part.draw();

na

PartArray[i].motion();

        PartArray[i].draw();

---

mam problem inny dlaczego respi mi te dot tylko na częsci ekranu(1/2) jak jest x * canvas.width