Как я могу заставить мои надувные шарики менять цвет после того, как они сталкиваются друг с другом в JavaScript и холст ⇐ CSS

[Anonymous]

В настоящее время я создаю своего рода физическую симуляцию, в которой кучка шариков с разными радиусами отскакивает друг от друга и от стен. Чтобы перед рефакторингом он выглядел лучше, я хотел бы, чтобы шары меняли цвет при столкновении, но я не уверен, где мне это добавить и как.

Примечание. Цвет должен быть случайным с помощью

randomColor = Math.floor(Math.random() * 16777215).toString(16);

color = "#" + случайный цвет;

Примечание: только шары, участвующие в столкновении, должны изменить цвет. Таким образом, если два шарика соприкасаются, они оба должны изменить цвет, но не другой.

Вопрос: Как сделать так, чтобы после каждого столкновения шарики меняли цвет?

function lineMessage(msg) { document.querySelector('#myMessage').textContent += msg + '. '; } функция groupMessage(msg) { document.querySelector('#myMessage').innerHTML += msg + '
'; } const Canvas = document.querySelector('#canvas'); const ctx = Canvas.getContext("2d"); холст.ширина = 1000; холст.высота = 550; const ballCount = document.querySelector('#ball-count'); константная гравитация = 0; константная стенаПотеря = 1; пусть numBalls = 0; // приблизительно так же, как не будет добавляться мяч, если место не найдено константный minBallSize = 10; константный maxBallSize = 100; константа велМин = 1; константа велМакс = 5; const maxResolutionCycles = 100; Мат.ТАУ = Мат.ПИ * 2; Math.rand = (мин, макс) => Math.random() * (макс – мин) + мин; Math.randI = (мин, макс) => Math.random() * (макс – мин) + мин | 0; // только для положительных чисел 32-битное целое число со знаком Math.randItem = arr => arr[Math.random() * arr.length | 0]; // только для массивов длиной < 2 ** 31 - 1 //точки соприкосновения двух окружностей радиуса r1, r2, движущихся по двум линиям (a,e)-(b,f) и (c,g)-(d,h) Math.circlesInterceptUnitTime = (a, e, b, f, c, g, d, h, r1, r2) => { const A = a*a, B = b*b, C = c*c, D = d*d; const E = e*e, F = f*f, G = g*g, H = h*h; вар R = (r1 + r2)**2; const AA = A + B + C + F + G + H + D + E + b * c + c * b + f * g + g * f + 2 * (a * d - a * b - a * c - б*г – в*д – е*ж + е*ч – е*г – ж*ч – г*ч); const BB = 2 * (-A + a * b + 2 * a * c - a * d - c * b - C + c * d - E + e * f + 2 * e * g - e * h - g *ж – Г+г*ч); const CC = A - 2 * a * c + C + E - 2 * e * g + G - R; вернуть Math.quadRoots(AA, BB, CC); } Math.quadRoots = (a, b, c) => { // находим корни квадратного уравнения если (Math.abs(a) 0) { д = д** 0,5; return [0,5 * (-b + d), 0,5 * (-b - d)] } вернуть d === 0 ? [0,5 * -b] : []; } Math.interceptLineBallTime = (x, y, vx, vy, x1, y1, x2, y2, r) => { константа хх = х2 - х1; const yy = y2 - y1; const d = vx * yy - vy * xx; if (d > 0) { // только при движении к линии const dd = r/(xx * xx + yy * yy) ** 0,5; const nx = хх * дд; const ny = гг * дд; return (xx * (y - (y1 + nx)) - yy * (x - (x1 - ny))) / d; } } константные шары = []; константные строки = []; функция Line(x1, y1, x2, y2) { это.x1 = x1; это.y1 = y1; это.x2 = x2; это.y2 = y2; } Линия.прототип = { рисовать() { ctx.moveTo(this.x1, this.y1); ctx.lineTo(this.x2, this.y2); }, обеспечить регресс() { константа х = this.x1; const y = this.y1; это.x1 = это.x2; это.y1 = это.y2; это.x2 = х; this.y2 = y; верните это; } } function Ball(x, y, vx, vy, r = 45, m = 4/3 * Math.PI * (r ** 3)) { это.р = р; this.m = м; это.х = х; это.у = у; this.vx = vx; this.vy = вы; } Ball.prototype = { обновлять() { это.х += это.vx; this.y += this.vy; this.vy += гравитация; }, рисовать() { ctx.moveTo(this.x + this.r, this.y); ctx.arc(this.x, this.y, this.r, 0, Math.TAU); }, interceptLineTime(l, время) { const u = Math.interceptLineBallTime(this.x, this.y, this.vx, this.vy, l.x1, l.y1, l.x2, l.y2, this.r); if (u >= время && u minTime && t this.r + b.r) { константное время = Math.circlesInterceptUnitTime( это.х, это.у, это.x + это.vx, это.y + это.vy, б.х, б.у, б.х + б.вх, б.у + б.вы, это.р, б.р. ) если (times.length) { если (times.length === 1) { if (this.checkBallBallTime(times[0], time)) { время возврата[0] } возвращаться; } если (раз[0] ((x * x + y * y) ** 0,5); } } функция canAdd(мяч) { for (const b шаров) { если (ball.doesOverlap(b)) { вернуть ложь } } вернуть истину; } функция создания (bCount) { //Вместо bCount = 1 вы также можете использовать create(1) бКаунт = 1; lines.push(new Line(-10, 10, ctx.canvas.width + 10, 5)); lines.push((new Line(-10, ctx.canvas.height - 2, ctx.canvas.width + 10, ctx.canvas.height - 10)).reverse()); lines.push((new Line(10, -10, 4, ctx.canvas.height + 10)).reverse()); lines.push(new Line(ctx.canvas.width - 3, -10, ctx.canvas.width - 10, ctx.canvas.height + 10)); в то время как (bCount--) { пусть пытается = 100; отладчик в то время как (пытается--) { const dir = Math.rand(0, Math.TAU); const vel = Math.rand(velMin, velMax); const ball = новый мяч( Math.rand(maxBallSize + 10, Canvas.width - maxBallSize - 10), Math.rand(maxBallSize + 10, Canvas.height - maxBallSize - 10), Math.cos(каталог) * вел, Math.sin(реж) * вел, Math.rand(minBallSize, maxBallSize), ) если (canAdd(мяч)) { balls.push(мяч); перерыв; } } } } функцияsolveCollisions() { вар minTime = 0, minObj, minBall, разрешение = true, idx = 0, idx1, after = 0, e = 0; while (разрешение && e++ < maxResolutionCycles) { // слишком основной шар может создать очень одиночный цикл разрешения. е ограничивает это разрешение = ложь; minObj = не определено; minBall = не определено; минВремя = 1; идентификатор = 0; for(const b шаров) { идентификаторx1 = идентификаторx + 1; while (idx1