• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Dlaczego zwraca undefined jak nadpisuje zmienne w funckji

VPS Starter Arubacloud
0 głosów
217 wizyt
pytanie zadane 8 kwietnia 2022 w JavaScript przez chrystian Gaduła (4,780 p.)
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);

 

komentarz 8 kwietnia 2022 przez chrystian Gaduła (4,780 p.)

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();

 

komentarz 8 kwietnia 2022 przez ScriptyChris Mędrzec (190,190 p.)

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.

1 odpowiedź

0 głosów
odpowiedź 8 kwietnia 2022 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 8 kwietnia 2022 przez chrystian
 
Najlepsza
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.

komentarz 8 kwietnia 2022 przez chrystian Gaduła (4,780 p.)
czyli jak nadpisać wartość w object
komentarz 8 kwietnia 2022 przez chrystian Gaduła (4,780 p.)
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
komentarz 8 kwietnia 2022 przez ScriptyChris Mędrzec (190,190 p.)

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.

komentarz 8 kwietnia 2022 przez chrystian Gaduła (4,780 p.)

@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();

 

komentarz 8 kwietnia 2022 przez chrystian Gaduła (4,780 p.)

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);

 

komentarz 8 kwietnia 2022 przez ScriptyChris Mędrzec (190,190 p.)

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.

komentarz 8 kwietnia 2022 przez ScriptyChris Mędrzec (190,190 p.)

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.

komentarz 8 kwietnia 2022 przez chrystian Gaduła (4,780 p.)

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;
};

 

komentarz 8 kwietnia 2022 przez chrystian Gaduła (4,780 p.)
nwm mam jedynie musiałem poprawić  

   PartArray[i].Part.motion();

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

na

PartArray[i].motion();

        PartArray[i].draw();
komentarz 8 kwietnia 2022 przez chrystian Gaduła (4,780 p.)
mam problem inny dlaczego respi mi te dot tylko na częsci ekranu(1/2) jak jest x * canvas.width

Podobne pytania

+1 głos
3 odpowiedzi 415 wizyt
pytanie zadane 19 lipca 2020 w JavaScript przez kingkushlee Gaduła (3,960 p.)
+2 głosów
2 odpowiedzi 251 wizyt
pytanie zadane 17 kwietnia 2015 w JavaScript przez Mr. Mustache Początkujący (350 p.)
0 głosów
0 odpowiedzi 70 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...