JavaScript数组给为NaN [英] Javascript arrays giving NaN
问题描述
我有一些HTML是应该反弹球（S）周围的画布上，而是存储的坐标阵列似乎是男当我将它们设置为一个随机位置和测试用警报（坐标+（CiRX报[I]）+X+（市2005 [I]））; 。这将返回'坐标为NaN点¯x男。我曾尝试与一球做到这一点，而不阵列和它的工作。我不知道如果我不好，或者是别的东西我的编码阵列。这是我的HTML：
I have a bit of HTML that is supposed to bounce ball(s) around the canvas, but the arrays storing the coordinates seem to be 'NaN' when I set them to a random position and test with alert("Co-ordinates " + (cirX[i]) + " x " + (cirY[i]));. This returns 'Co-ordinates NaN x NaN'. I have tried to do it with one ball without the arrays and it worked. I am not sure if I am coding my arrays badly or if it is something else. Here is my 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，但我似乎做对吗？预先感谢您的帮助！
I have looked up how to initialise arrays e.c.t, but I seem to be doing it right? Thanks in advance for your help!
编辑：结果
尽管固定上述问题，只有一个球移动，并在尽管 moveBall变量来自不同0〜2预期（加入 ballNum 变化的速度（）警报（ballNum）测试）。有谁知道为什么吗？
Despite fixing the above problems, only one ball moves and at varying speeds despite the variable ballNum in moveBall() varying from 0 to 2 as expected (tested by adding alert(ballNum)). Does anyone know why?
推荐答案
您拨打此行
cirX[i] = Math.floor(Math.random()*width);
在宽度仍是不确定的。所以，你只能得到 NaN的作为一个结果。
when width is still undefined. So you can only get NaN as a result.
要正确地从setInterval的调用 moveBall 功能，您可以使用
To properly call the moveBall function from setInterval, you may use
(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);
这篇关于JavaScript数组给为NaN的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
