javascript - 如何检查两个类实例是否具有相同的值

Question

为了学习一些 javascript，我在 codepen 中创建了一个小粒子系统。你可以在这里看到它:Particles

这是js代码:

const canvas = document.querySelector('#canvas');
const canvasHeight = canvas.height;
const canvasWidth = canvas.width;
const ctx = canvas.getContext('2d');
let amountOfParticles = 300;
let rate = 50;
const velocity = 2;
let size = 2;
let allParticles = [];

const rateInput = document.querySelector('#rate-range');
const amountInput = document.querySelector('#amount-range');
const sizeInput = document.querySelector('#size-range');
const rateNumber = document.querySelector('#rate-number');
const amountNumber = document.querySelector('#amount-number');
const sizeNumber = document.querySelector('#size-number');


class Particle {
   constructor(xPos, yPos) {
     this.xPos = xPos;
     this.yPos = yPos;
     this.size = size;
     this.particleColor = 'rgba(255, 255, 255, .5)'; 
     this.originalX = xPos;
     this.originalY = yPos;
     this.colors = ['rgba(255, 255, 255, .75)',
                    'rgba(107, 185, 240, .75)',
                    'rgba(37, 116, 169, .75)',
                    'rgba(103, 65, 114, .75)',
                    'rgba(207, 0, 15, .75)',
                    'rgba(230, 126, 34, .75)',
                    'rgba(245, 215, 110, .75)'];
   }

  createSquare() {
    ctx.fillStyle = this.particleColor;
    ctx.fillRect(this.xPos, this.yPos, this.size, this.size);
  }

  moveParticle() {
    let directionX = Math.random() * 100;
    if (directionX < 40) {
      this.xPos -= velocity;
    } else if (directionX > 60) {
      this.xPos += velocity;
    }
    let directionY = Math.random() * 100;
    if (directionY < 40) {
      this.yPos -= velocity;
    } else if (directionY > 60) {
      this.yPos += velocity;
    }
    this.setColor();
    this.createSquare();
  }

  setColor() {
    let distance = Math.hypot(this.originalX - this.xPos, this.originalY - this.yPos);
    if (distance < 10) {
      this.particleColor = this.colors[0];
    } else if (distance >= 20 && distance < 40) {
      this.particleColor = this.colors[1];
    } else if (distance >= 41 && distance < 60) {
      this.particleColor = this.colors[2];
    } else if (distance >= 61 && distance < 90) {
      this.particleColor = this.colors[3];
    } else if (distance >= 91 && distance < 120) {
      this.particleColor = this.colors[4];
    } else if (distance >= 121 && distance < 160) {
      this.particleColor = this.colors[5];
    } else {
      this.particleColor = this.colors[6];
    }

  }
} // end of Particle class


function makeParticles() {
  for(let i = 0; i < amountOfParticles; i++) {
    let randomX = Math.floor(Math.random() * canvasWidth);
    let randomY = Math.floor(Math.random() * canvasHeight);
    let newParticle = new Particle(randomX, randomY);
    newParticle.createSquare();
    allParticles.push(newParticle);
  }
}

makeParticles();
setInitialValues();
drawInterval = setInterval(function(){ move(); }, rate);

function move() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);;
  for (let i = 0; i < allParticles.length; i++) {
    allParticles[i].moveParticle();
  }
}

function setInitialValues() {
  rateInput.value = rate;
  rateNumber.innerHTML = rate;
  amountInput.value = amountOfParticles;
  amountNumber.innerHTML = amountOfParticles;
  sizeInput.value = size;
  sizeNumber.innerHTML = size;
}

function updateRate() {
  let newRate = parseInt(rateInput.value);
  rateNumber.innerHTML = newRate;
  rate = newRate;
  clearInterval(drawInterval);
  drawInterval = setInterval(function(){ move(); }, rate);
}

function updateAmount() {
  let newAmount = parseInt(amountInput.value);
  amountNumber.innerHTML = newAmount;
  amountOfParticles = newAmount;
  remakeParticles();
}

function updateSize() {
  let newSize = parseInt(sizeInput.value);
  sizeNumber.innerHTML = newSize;
  size = newSize;
  remakeParticles();
}

function remakeParticles() {
  allParticles = [];
  makeParticles();
}

我现在想添加一个新想法。如果两个粒子接触，那么我希望它们长大。

我想我可以循环遍历包含所有粒子的数组，并将当前粒子位置与数组中的每个粒子进行比较。由于浏览器“阻塞”，我无法真正实现这一点。

做这样的事情最好的方法是什么？

检测碰撞肯定是人们经常做的事情，我想有一些很好的方法可以做到这一点。

谢谢!

=)

Answer 1

如果您需要进行长时间的计算，并且不想阻塞 UI，请使用 Web Worker。

https://www.w3schools.com/htmL/html5_webworkers.asp

您的计算代码将放在另一个脚本中，您将使用窗口消息传递来发送参数和检索值。