How to increase the number of balls in a cycle? I tried, I can not, now I manually multiply them

var Ball = function() { this.x = Math.floor(Math.random() * 400); this.y = Math.floor(Math.random() * 400); this.xSpeed = -2; this.ySpeed = 3; }; 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() { this.x += this.xSpeed; this.y += this.ySpeed; }; Ball.prototype.checkCollision = function() { if (this.x < 0 || this.x > width) { this.xSpeed = -this.xSpeed; } if (this.y < 0 || this.y > height) { this.ySpeed = -this.ySpeed; } }; var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var ball = new Ball(); var ball2 = new Ball(); var ball3 = new Ball(); var width = canvas.width; var height = canvas.height; /* for(var i = 0; i < 1; i++){ var ball = new Ball() setInterval(function () { ctx.clearRect(0, 0, width, height); ball.draw(); ball.move(); ball.checkCollision(); ctx.strokeRect(0, 0, width, height); }, 30); } */ setInterval(function() { ctx.clearRect(0, 0, width, height); ball.draw(); ball.move(); ball.checkCollision(); ball2.draw(); ball2.move(); ball2.checkCollision(); ball3.draw(); ball3.move(); ball3.checkCollision(); ctx.strokeRect(0, 0, width, height); }, 30); 
 <canvas id="canvas" width="400" height="400"></canvas>

  • one
    Give the code of how they tried. - Victor Khovanskiy
  • one
    for (var i = 0; i <1; i ++) {var ball = new Ball () setInterval (function () {ctx.clearRect (0, 0, width, height); ball.draw (); ball.move ( ); ball.checkCollision (); ctx.strokeRect (0, 0, width, height);}, 30); } - DivMan

1 answer 1

 var Ball = function() { this.x = Math.floor(Math.random() * 400); this.y = Math.floor(Math.random() * 400); this.xSpeed = -2; this.ySpeed = 3; }; 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() { this.x += this.xSpeed; this.y += this.ySpeed; }; Ball.prototype.checkCollision = function() { if (this.x < 0 || this.x > width) { this.xSpeed = -this.xSpeed; } if (this.y < 0 || this.y > height) { this.ySpeed = -this.ySpeed; } }; var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var width = canvas.width; var height = canvas.height; var ballsCount = 10; var balls = []; for(var i = 0; i < ballsCount; i++){ var ball = new Ball() balls.push(ball); } setInterval(function () { ctx.clearRect(0, 0, width, height); for (var i = 0; i < balls.length; ++i) { balls[i].draw(); balls[i].move(); balls[i].checkCollision(); } ctx.strokeRect(0, 0, width, height); }, 30); 
 <canvas id="canvas" width="400" height="400"></canvas>

  • And at least some explanation will be? - Alexey Shimansky