加快画布中移动箭头的速度

时间:2019-03-28 19:53:04

标签: javascript css class animation

我正在尝试加快在画布上水平移动的一些移动箭头图像。我做了一个数组,用箭头“属性”临时保存类。在数组中的最后一个箭头出来的那一刻,我添加了另一个。

当我们的组合计数达到数字x时,我希望速度改变。但是当我这样做时,没有新的箭头被添加到数组中。我认为这可能是因为当我更改速度时,最后一个箭头的x值与检查不匹配,因此没有新的箭头添加到数组中。(但我不确定)

布局:

Illustration 1


var combo = 0;
var counter = 1;
var totalscore = 0;
var arrows = [];

buttonStart.onclick = function() {

  combo = 0;
  counter = 1;
  totalscore = 0;
  arrows = [];

  for(var i= 0; i<10; i++){
    arrows.push(new ARR(counter));
    arrows[i].x = i*(-275)-arrows[i].width;
  };

  intervall = setInterval(moveArrow, 1);
};



//ArrowClass
function ARR(speed){
  this.width = 50;
  this.x = 0 - this.width;
  this.y = 85;
  this.speed = speed;
  this.code = Math.floor(Math.random()*(40-37+1)+37);
};


function drawArrows(){
  ctz.clearRect(0,0, width, height);

  for(var i = 0; i<arrows.length; i++){
      if(arrows[i].code == 37){
          ctz.drawImage(pilHoyre,  arrows[i].x, arrows[i].y, arrows[i].width, arrows[i].width );

      };
      if(arrows[i].code == 38){
          ctz.drawImage(pilOpp, arrows[i].x, arrows[i].y, arrows[i].width, arrows[i].width );

      };
      if(arrows[i].code == 39){
          ctz.drawImage(pilVenstre, arrows[i].x, arrows[i].y, arrows[i].width, arrows[i].width );

      };
      if(arrows[i].code == 40){
          ctz.drawImage(pilNed, arrows[i].x, arrows[i].y, arrows[i].width, arrows[i].width );

      };

  };
}



function moveArrow() {

  //Adds a new arrow right before the last one pops up
  if( arrows[arrows.length-1].x == -arrows[0].width){
      arrows.push(new ARR(counter));
      arrows[arrows.length-1].x = arrows[arrows.length-2].x - 275; 
  };

  if(arrows[0].x >= width){
    if(hit == false){
      totalscore += miss;
    };

    arrows.splice(0,1);

  };


  //gives arrows a new position
  for(var i = 0; i < arrows.length; i++){
      arrows[i].x += arrows[i].speed;
  };

  drawArrows();
};

//points
var miss = -3;
var perfect = 10;
var great = 5;
var good = 1;

//OnKeyDown delay
var movelistener = null;

function delaytimer(){
  movelistener += 1;
  return movelistener;
};



document.onkeydown = function(event){
  totalScore.innerHTML = "";

  //Onkeydown Delay
  if( movelistener === null ){
      movelistener = setInterval(delaytimer, 1);
  } else if ( movelistener <= 200 ){
      text(totalscore, combo);
      return;
  } else {
      movelistener = null;
  };



  //User click wrong button
  if( event.keyCode !== arrows[0].code ){
    totalscore += miss;


    } else if ( event.keyCode == arrows[0].code ){


      //Hits perfect (+/- some pixels)
      if( arrows[0].x >= 630 && arrows[0].x <= 660 ){

        totalscore += perfect;
        combo += 1;
        if(combo != 0 && combo%10 == 0){
            counter += 1;
            for(var i = 0; i < arrows.length; i++){
                arrows[i].speed = counter;
            };
        }


    } else if ( (arrows[0].x >= 600 && arrows[0].x < 630) || (arrows[0].x >= 630 && arrows[0].x <= 710) ){

        totalscore += great;
        combo = 0;

    } else if ( (arrows[0].x > 710 || arrows[0].x < 600) && (arrows[0].x >= 586-arrows[0].width) ){

        totalscore += good;
        combo = 0;

    } else {
        totalscore += miss;
    };
  };
};

0 个答案:

没有答案