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

时间:2017-04-06 23:56:14

标签: javascript function

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

我的代码还远未完成,因此仍有许多事情需要完成。 我不确定如何在相似的时间让多个圆圈运行该函数,因为当我尝试修复错误/更改函数参数的值时,它们有时会循环两次,无限循环或接收前一个圆的更改值而前一个圈子仍在增长。

1 个答案:

答案 0 :(得分:0)

我对Javascript也很新,但我对这里应该做的事情有一个很好的了解。

  1. 我会写一个对象构造函数来实例化圈子。 向下滚动this page以查看如何创建对象构造函数。

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

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

  4. 然后有一个 update()函数调用第3步中的函数,并使用setInterval update()调用每个“frame”

  5. 链接的页面应该为您提供足够的信息,以便从这里找到它。