给出 NaN 的 Javascript 数组答案

【问题标题】：Javascript arrays giving NaN给出 NaN 的 Javascript 数组
【发布时间】：2013-03-06 04:44:59
【问题描述】：

我有一些 HTML 应该在画布周围弹跳球，但是当我将它们设置为随机位置并使用 alert("Co-ordinates " + (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>

我已经查找了如何初始化数组 e.c.t，但我似乎做得对吗？提前感谢您的帮助！

编辑：
尽管解决了上述问题，尽管moveBall() 中的变量ballNum 按预期从0 变化到2（通过添加alert(ballNum) 进行测试），但只有一个球以不同的速度移动。有谁知道为什么？

【问题讨论】：

我认为索引搞砸了，你在检索cirX[i]之前检查了i的值吗？
不，我认为索引很好。我的问题是没有定义宽度。此外，alert("loop " + i) 检查 i。 @Stormherz

标签： javascript arrays

【解决方案1】：

你打这个电话

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

当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);

【讨论】：

【解决方案2】：

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

http://jsbin.com/agavoq/9/edit

要调用 setInterval，您可以使用自调用函数来保留 i 的值

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

或者干脆

setInterval(moveBall,10, i);

或者

setInterval('moveBall(' + i+ ')',10);

【讨论】：

【解决方案3】：

我看到另一个问题，因为看看这一行

setInterval('moveBall(i)',10);

i 不是你想象的那样。您不应该在setTimeout 中使用字符串。

【讨论】：