Javascript:在多个元素上使用一个函数

Question

我是 JavaScript 新手，我无法弄清楚如何使用一个函数为我的节奏游戏调整多个元素的大小。这是我的 CSP 类，遗憾的是没有使用 jQuery。我还仅限于我正在使用的程序(AppLab)提供的命令。我现在的目标是制作一个圆圈的“动画”，使其增长到所需的大小以指示应该单击它。我需要这些元素出现，而另一个元素正在生长等等。

我知道我的代码可能很糟糕，所以如果还有一种方法可以简化或改进它，我很想知道。

这是我当前的程序代码，而 hitIndicator 函数是我遇到最多麻烦的函数:

var circleSizeW = 0;
var circleSizeL = 0;
var score = 0;

hitCircle("hitcircle", 300, 6, 206);
hitCircle("image2", 300, 6, 682);

function circleEffects(circleid, whentohit) {
  setTimeout(function() {
  onEvent(circleid, "click", function() {
  playSound("47 (1).mp3", false);
  hideElement(circleid);
});  
}, whentohit);
}


function hitIndicator(circleid, growthRate) {
  var xPos = getXPosition(circleid);
  var yPos = getYPosition(circleid);
    var t = setInterval(function() {
      circleSizeW = circleSizeW + growthRate;
      circleSizeL = circleSizeL + growthRate;
      xPos = xPos - (growthRate/2);
      yPos = yPos - (growthRate/2);
      showElement(circleid);
      setSize(circleid, circleSizeW, circleSizeL);
      setPosition(circleid, xPos, yPos);
    if (circleSizeW >= 60) {
      clearInterval(t);
      circleSizeW = 0;
      circleSizeL = 0;
    }
    }, 50);
  }

function scoreSystem(circleid, whentohit) {
  setTimeout(function() {
      onEvent(circleid, "click", function() {
      score = score + 100; 
      setText("scoreTrack", score);
    });
  }, whentohit);
}

function hitCircle(circleid, whentohit, growthRate, appearancetime) {
setTimeout(function() {
  console.log("hitcircle");
circleEffects(circleid, whentohit);
hitIndicator(circleid, growthRate);
scoreSystem(circleid, whentohit);
}, appearancetime);

我的代码也远未完成，所以还有很多事情需要完成。 我不确定如何让多个循环在相似的时间运行该函数，因为当我尝试修复错误/更改函数参数的值时，它们有时会循环两次、无限循环或接收前一个循环的更改值而之前的圈子还在不断扩大。

Answer 1

我对 Javascript 也很陌生，但我很清楚这里应该做什么。

1. 我会编写一个用于实例化圆的对象构造函数。 向下滚动this page了解如何创建对象构造函数。

2. 然后为您的圆形对象添加一个 hitindicator 方法。 This page涵盖方法。

3. 然后设置一个函数，该函数将检索并循环遍历每个实例化的圆对象，并在每个圆上运行 .hitindicator。最好的方法是，将每个实例化的圆添加到圆数组中，然后循环遍历该数组？

4. 然后有一个 update() 函数调用步骤 3 中的函数，并使用 setInterval update() 调用每个“帧”。 p>

链接的页面应该为您提供足够的信息，以便您从这里弄清楚。