我等待射击的时间越长，箭头在屏幕上出现的时间就越长 (javascript)

Question

所以我正在为学校制作这个简单的游戏，我需要以一种有点逼真的方式从弓上射箭，这是射箭和显示弓的代码。出于某种原因，我等待单击鼠标射击的时间越长，箭头从弓上出现的距离就越远。我只是想不通哪里出了问题。

// Player Vars
 var arrows = new Array();
 var angles = new Array();
 var xBow = 0, yBow = 0;
 var loaded = false;
 var timeload = 0;
 var BowC, BowR;
 var xBowW, yBowH;
 var shoot = false;
 var angleBow;
 var vel;
 var acel = 0.1;

function drawThatBow(){
 angleBow = Math.atan2(yRato-yBow-bow.height/2, xRato-xBow);
 
 ctx.save();
 ctx.translate( xBow, yBow + bow.height/2 );
 ctx.rotate( angleBow );
 ctx.translate( 0, -bow.height/2 );
 ctx.drawImage(bow, BowC * xBowW, BowR, xBowW, yBowH, 0, 0, xBowW, yBowH);
 ctx.restore();
}

function Play() {
 if (mouseIsDown) {
  shoot = true;
 } else if (mouseIsUp && shoot) {
  SpawnArrow();
  shoot = false;
 }
 
 DrawArrows();
}

function SpawnArrow(){
 arrows.push( {x: xBow, y: yBow, imagem: arrow, angle: angleBow, timer: 0} );
}

function DrawArrows() {
 vel = 10;
 for (var i = 0; i < arrows.length; i++) {
  arrows[i].timer++;
  
  ctx.save();
  ctx.translate( x, y );
  ctx.rotate( arrows[i].angle );
  ctx.translate( 0, -arrows[i].height/2 );
  ctx.drawImage(arrows[i].imagem, 0, 0);
  ctx.restore();
  
  var x = arrows[i].x + vel * Math.cos(-(arrows[i].angle)) * arrows[i].timer;
  var y = arrows[i].y + bow.height/2 - vel * Math.sin(-(arrows[i].angle)) * arrows[i].timer + acel / 2 * arrows[i].timer * arrows[i].timer;
  
  if (arrows[i].x > larg || arrows[i].y > alt) {
   arrows.splice(arrows[i], 1);
  }
 }
}

Answer 1

好的，没关系，我明白了。我必须在函数外声明变量 x 和 y 之后它工作正常我也将它向上移动了一点：

for (var i = 0; i < arrows.length; i++) {
    arrows[i].timer++;

    x = arrows[i].x + vel * Math.cos(-(arrows[i].angle)) * arrows[i].timer;
    y = arrows[i].y + bow.height/2 - vel * Math.sin(-(arrows[i].angle)) * arrows[i].timer + acel / 2 * arrows[i].timer * arrows[i].timer;

    ctx.save();
    ctx.translate( x, y );
    ctx.rotate( arrows[i].angle );
    ctx.translate( 0, -arrows[i].height/2 );
    ctx.drawImage(arrows[i].imagem, 0, 0);
    ctx.restore();

    if (arrows[i].x > larg || arrows[i].y > alt) {
        arrows.splice(arrows[i], 1);
    }
}

我等待射击的时间越长，箭头在屏幕上出现的时间就越长 (javascript)

The longer i wait to shoot the further the arrow appears in the screen (javascript)

javascript

canvas

game-physics

html5-canvas