Javascript 在模拟过程中更改阵列元素的数量

我试图在模拟中更改反弹球的数量。我正在使用Socket.IO传递所需的数字，但我正在努力更改球的数量。下面是JavaScript：

var width = 100,
    height = 200,
    numBalls,
    balls;

$(document).ready(function() {

  var socket = io();

   socket.on('message', function (data) {
    console.log(data.count);

    numBalls = data.count

     });

  $('#myCanvas').click(bounce);

  // create an array of balls
  balls = new Array(numBalls);
  for(i = 0 ; i < numBalls ; i++){
     balls[i] = new Ball();
  }

});

function Ball(){
    // random radius
    this.radius = Math.floor(Math.random()*(10-5+1))+5;

    // random x and y
    this.x = Math.floor(Math.random()*(width-this.radius+1))+this.radius;
    this.y = Math.floor(Math.random()*(width-this.radius+1))+this.radius;

    // random direction, +1 or -1
    this.dx = Math.floor(Math.random()*2) * 2 - 1;
    this.dy = Math.floor(Math.random()*2) * 2 - 1;

    //random colour, r, g or b
    var rcol = Math.floor(Math.random()*3);
    this.col = rcol==0 ? "red" :
               rcol==1 ? "blue" : "green";
}

// draw the balls on the canvas
function draw(){
  var canvas = document.getElementById("myCanvas");

  // check if supported
  if(canvas.getContext){

    var ctx=canvas.getContext("2d");

    //clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.globalAlpha = 0.5;
    ctx.strokeStyle="black";

    // draw each ball
    for(i = 0; i < numBalls ; i++){
      var ball = balls[i];
      ctx.fillStyle=ball.col;
      ctx.beginPath();

      // check bounds
      // change direction if hitting border
      if(ball.x<=ball.radius ||
         ball.x >= (width-ball.radius)){
        ball.dx *= -1;
      }
      if(ball.y<=ball.radius ||
         ball.y >= (height-ball.radius)){
        ball.dy *= -1;
      }

      // move ball
      ball.x += ball.dx;
      ball.y += ball.dy;

      // draw it
      ctx.arc(ball.x, ball.y, ball.radius, 0, 2*Math.PI, false);
      ctx.stroke();
      ctx.fill();
    }
  }
  else{
    //canvas not supported
  }
}

// calls draw every 10 millis
function bounce(){
    setInterval(draw, 10);
}

var宽度=100，
高度=200，
麻木球，
球；
$（文档）.ready（函数（）{
var socket=io（）；
socket.on（'message'，函数（数据）{
console.log（data.count）；
numBalls=data.count
});
$（“#我的画布”）。单击（反弹）；
//创建一个球数组
球=新阵列（数球）；
对于（i=0；i

假设

newNumBalls

是新的球数

如果

newNumBalls

小于

numBalls

，则需要从

球中删除元素。您可以通过取一个
balls
并将其分配给
balls
来实现这一点

如果
newNumBalls
大于
numBalls
，则需要制作新球并将其添加到
balls
。你可以用它来做

完整的逻辑是：

if (newNumBalls < numBalls) {
  balls = balls.slice(0, newNumBalls);
} else {
  for (var i = numBalls; i < newNumBalls; ++i) {
    balls.push(new Ball());
  }
}
numBalls = newNumBalls;


不支持画布。
球数：
设置
假设
newNumBalls
是新的球数

如果
newNumBalls
小于
numBalls
，则需要从
球中删除元素。您可以通过取一个
balls
并将其分配给
balls
来实现这一点

如果
newNumBalls
大于
numBalls
，则需要制作新球并将其添加到
balls
。你可以用它来做

完整的逻辑是：

if (newNumBalls < numBalls) {
  balls = balls.slice(0, newNumBalls);
} else {
  for (var i = numBalls; i < newNumBalls; ++i) {
    balls.push(new Ball());
  }
}
numBalls = newNumBalls;


不支持画布。
球数：
设置
谢谢！稍后我将实现它，并让您知道它是如何运行的。请查看我添加到答案中的代码片段。我认为这满足了你的问题。如果你同意，请接受我的回答。谢谢！稍后我将实现它，并让您知道它是如何运行的。请查看我添加到答案中的代码片段。我认为这满足了你的问题。如果你同意，请接受我的回答。