提供NaN的Javascript数组_Javascript_Arrays

提供NaN的Javascript数组

javascript arrays

提供NaN的Javascript数组,javascript,arrays,Javascript,Arrays,我有一点HTML应该是在画布上弹起球，但是当我将它们设置为随机位置并使用alert（“坐标”+（cirX[I]）+“x”+（cirY[I]））进行测试时，存储坐标的数组似乎是“NaN”。这将返回“坐标NaN x NaN”。我试着在没有阵列的情况下用一个球做到这一点，结果成功了。我不确定我的数组编码是否糟糕，或者是其他原因。这是我的HTML： <!Doctype HTML> <head> <script> var cirX = []; var cirY = []

我有一点HTML应该是在画布上弹起球，但是当我将它们设置为随机位置并使用

alert（“坐标”+（cirX[I]）+“x”+（cirY[I]））进行测试时，存储坐标的数组似乎是“NaN”。这将返回“坐标NaN x NaN”。我试着在没有阵列的情况下用一个球做到这一点，结果成功了。我不确定我的数组编码是否糟糕，或者是其他原因。这是我的HTML：
<!Doctype HTML>
<head>
<script>
var cirX = [];
var cirY = [];
var chX = [];
var chY = [];
var width;
var height;

function initCircle(nBalls) {
  alert(nBalls)
  for(var i = 0; i<nBalls;i++) {
    alert("loop  " + i)
    chX[i] = (Math.floor(Math.random()*200)/10);
    chY[i] = (Math.floor(Math.random()*200)/10);
    cirX[i] = Math.floor(Math.random()*width);
    cirY[i] = Math.floor(Math.random()*height);
    alert("Co-ordinates " + (cirX[i]) + " x " + (cirY[i]));

    circle(cirX[i],cirY[i],3);
    setInterval('moveBall(i)',10);
  }
}

function moveBall(ballNum) {
    if(cirX[ballNum] > width||cirX[ballNum] < 0) {
      chX[ballNum] = 0-chX[ballNum];
    }
    if(cirY[ballNum] > height|| cirY[ballNum] < 0) {
      chY[ballNum] = 0-chY[ballNum];
    }
    cirX[ballNum] = cirX[ballNum] + chX[ballNum];
    cirY[ballNum] = cirY[ballNum] + chY[ballNum];
    circle(cirX[ballNum],cirY[ballNum],3);

}

function circle(x,y,r) {
  var c=document.getElementById("canvas");
  var ctx=c.getContext("2d");
  canvas.width = canvas.width;
  ctx.fillStyle="#FF0000";
  ctx.beginPath();
  ctx.arc(x, y, r, 0, Math.PI*2, true);
  ctx.fill();
  width = canvas.width;
  height = canvas.height;
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300">
</canvas>
<script>
initCircle(3); //this sets the number of circles
</script>
</body>


var-cirX=[]；
var-cirY=[]；
var chX=[]；
var-chY=[]；
var宽度；
变异高度；
函数initCircle（nball）{
警报（nball）
对于（变量i=0；i宽度| | cirX[ballNum]<0）{
chX[ballNum]=0-chX[ballNum]；
}
如果（cirY[ballNum]>高度| | cirY[ballNum]<0）{
chY[ballNum]=0-chY[ballNum]；
}
cirX[ballNum]=cirX[ballNum]+chX[ballNum]；
西里[巴勒姆]=西里[巴勒姆]+希[巴勒姆]；
圆圈（cirX[ballNum]，cirY[ballNum]，3）；
}
函数圆（x，y，r）{
var c=document.getElementById（“画布”）；
var ctx=c.getContext（“2d”）；
canvas.width=canvas.width；
ctx.fillStyle=“#FF0000”；
ctx.beginPath（）；
弧（x，y，r，0，数学π*2，真）；
ctx.fill（）；
宽度=画布宽度；
高度=画布高度；
}
初始圆（3）//这将设置圆的数量

我查过如何初始化数组e.c.t，但我似乎做得对吗？提前感谢您的帮助
编辑：

尽管解决了上述问题，但尽管moveBall（）
中的变量ballNum
按预期从0到2变化（通过添加alert（ballNum）
进行测试），但只有一个球以不同的速度移动。有人知道为什么吗？
我看到了另一个问题，因为请看这一行
setInterval('moveBall(i)',10);

cirX[i] = Math.floor(Math.random()*width);

i
不是你想象的那样。您不应该在setTimeout
中使用字符串
 你叫这条线
setInterval('moveBall(i)',10);

cirX[i] = Math.floor(Math.random()*width);

当宽度
仍未定义时。因此，结果只能得到NaN

要从setInterval正确调用moveBall
函数，可以使用
(function(i) { // embedds i to protect its value (so that it isn't the one of end of loop
   setInterval(function(){moveBall(i)}, 10);
})(i);

这是因为当第一次执行语句时，width
是未定义的。您可以在开始时获取画布及其维度，并使其保持全局

要调用setInterval，可以使用一个自调用函数来保存i

(function(x){
  setInterval(moveBall,10, x);
})(i);

或者干脆
setInterval(moveBall,10, i);

或
我认为索引是乱七八糟的，在检索cirX[I]之前，你检查过I的值吗？不，我认为索引是好的。我的问题是宽度没有定义。此外，警报（“循环”+i）
检查i@斯托默兹