Javascript arrays giving NaN

Question

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>

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!

EDIT:
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?

I think the index is messed up, did you check the value of i, before retrieving cirX[i]? — Stormherz, Mar 05 '13 at 19:52
No, I think the index is fine. My problem was that width was not defined. Also, `alert("loop " + i)` checks i. @Stormherz — Daniel Causebrook, Mar 05 '13 at 20:14

Denys Séguret · Accepted Answer · 2013-03-05T20:19:16.667

1

You call this line

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

when width is still undefined. So you can only get NaN as a result.

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

edited Mar 05 '13 at 20:19

answered Mar 05 '13 at 19:54

Denys Séguret

372,613
87
782
758

Diode · Answer 2 · 2013-03-05T20:17:44.113

It is because width is undefined when the statement gets executed for the first time. You can get the canvas and its dimension in the beginning and keep it global.

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

To call setInterval you can use a self invoking function preserving the value of i

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

Or simply

setInterval(moveBall,10, i);

Or

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

score 0 · Answer 3 · answered Mar 05 '13 at 19:53

0

I see another issue because look at this line

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

The i is not what you think it is. You should not use a string in setTimeout.

answered Mar 05 '13 at 19:53

epascarello

204,599
20
195
236

Javascript arrays giving NaN

3 Answers3

Linked