我等待拍摄的时间越长，箭头在屏幕上出现的越远(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);
    }
}