javascript - 粒子(用构造函数创建)在碰撞时扩展和消失

Question

当用户单击任何粒子时，我希望它扩展和淡出，并且在与任何其他粒子碰撞时，该粒子也会扩展和淡出。现在我的问题是我想知道是否有一种方法可以让这些粒子(在本例中由构造函数制成)在碰撞时相互影响。链接至Codepen

var bubbles = [];

function setup() {
	frameRate(25);
	// Creates Canvas
	createCanvas(windowWidth, windowHeight);
	//Genrates 100 Particles with random a & y
	for (var i = 0; i < 80; i++) {
		var x = random(width);
		var y = random(height);
		bubbles[i] = new Bubble(x, y);
	}
}

function mousePressed() {
	for (var i = 0; i < bubbles.length; i++) {
		bubbles[i].clicked();
	}
}

function draw() {
	clear();
	//Adds color and motion
	for (var bubble of bubbles) {
		fill(bubble.color.red, bubble.color.green, bubble.color.blue);
		bubble.move();
		bubble.display();
	}
}

function Bubble(x, y) {
	this.x = x;
	this.y = y;
	this.wh = 15;
	this.speedX = random(1, 5);
	this.speedY = random(1, 5);

	//Individual Particle Creation
	this.display = function() {
		noStroke();
		ellipse(this.x, this.y, this.wh, this.wh);
	};

	//Interactivity
	this.clicked = function() {
		var d = dist(this.x, this.y, mouseX, mouseY);
		if (d < 8) {
			this.wh = 100;
		}
	};

	//Randomizes colors
	this.color = {
		red: random(255),
		green: random(255),
		blue: random(255)
	};

	//Particle Motion
	this.move = function() {
		//Motion in X direction
		this.x += this.speedX;

		//Bouncing back on X-axis
		if (this.x > windowWidth || this.x < 0) {
			this.speedX = -this.speedX;
		}
		//Motion in Y Direction
		this.y += this.speedY;
		//Bouncing back on Y-axis
		if (this.y > windowHeight || this.y < 0) {
			this.speedY = -this.speedY;
		}
	};
}

function windowResized() {
	resizeCanvas(windowWidth, windowHeight);
}

::-webkit-scrollbar{
	display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/p5.js"></script>

Answer 1

使用嵌套的for循环。

第 1 步:在气泡上循环。使用 for 循环执行此操作。

第 2 步:对于每个气泡，循环遍历其余气泡(如果您位于气泡 4，则从气泡 5 开始)。在第一个循环中使用另一个 for 循环来执行此操作。

第 3 步:现在您已经有了两个气泡，让它们之间发生碰撞。

如果您在实现该功能时遇到困难，请从小规模开始。从一个更简单的程序开始，该程序仅显示两个硬编码的气泡并执行 collision detection他们之间。