Negotiant,
как-то так... Предварительно сформированный массив, конечно, не очень...
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
var coord = [];
for(var i = 0; i < 10; i++){
coord[i] = [];
for(var j = 0; j < 10; j++){
coord[i][j]= {};
coord[i][j].x = (i + 1) *(j + 1) * 10;
coord[i][j].y = i * 15 + j * 10;
}
}
alert(JSON.stringify(coord));
var Ball = function (i) {
this.x = coord[i][0].x;
this.y = coord[i][0].y;;
};
var circle = function (x, y, radius, fillCircle) {
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
if (fillCircle) {
ctx.fill();
}
else {
ctx.stroke();
}
};
Ball.prototype.draw = function () {
circle(this.x, this.y, 3, true);
};
Ball.prototype.move = function (i,j) {
this.x = coord[i][j].x;
this.y = coord[i][j].y;
};
Ball.prototype.checkCollision = function (i,j) {
if(i==9 && j==9) clearInterval(loop);
};
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ball = [];
for(var i = 0; i < 10; i++){
ball[i] = new Ball(i);
}
var width = canvas.width;
var height = canvas.height;
var j = 0;
var loop = setInterval(function () {
ctx.clearRect(0, 0, width, height);
for(var i = 0; i < 10; i++){
ball[i].draw();
ball[i].move(i,j);
ball[i].checkCollision(i,j);
} ;
ctx.strokeRect(0, 0, width, height);
j++;
}, 100);
</script>
</body>
</html>