javascript - Changing number of array elements during a simulation -

i trying change number of bouncing balls in simulation. passing required number using socket.io, i'm struggling change number of balls. here 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 array of balls   balls = new array(numballs);   for(i = 0 ; < numballs ; i++){      balls[i] = new ball();   }  });  function ball(){     // random radius     this.radius = math.floor(math.random()*(10-5+1))+5;      // random x , 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 balls on 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; < 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       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); } 

let's newnumballs new number of balls.

if newnumballs less numballs, want remove elements balls. can taking slice of balls , assigning balls.

if newnumballs greater numballs, want make new balls , add them balls. can push.

the complete logic this:

if (newnumballs < numballs) {   balls = balls.slice(0, newnumballs); } else {   (var = numballs; < newnumballs; ++i) {     balls.push(new ball());   } } numballs = newnumballs; 

below snippet implements logic.

var width,      height,      numballs = 10,      balls;    $('#setnumballs').click(function () {    var newnumballs = parseint($('#inputnumballs').val(), 10);    if (newnumballs < numballs) {      balls = balls.slice(0, newnumballs);      //$('#display').html('removed ' + (numballs - newnumballs) + ' balls');    } else {      (var = numballs; < newnumballs; ++i) {        balls.push(new ball());      }      //$('#display').html('added ' + (newnumballs - numballs) + ' new balls');    }    numballs = newnumballs;  });    $(document).ready(function() {    width = $('#mycanvas').width();    height = $('#mycanvas').height();    var canvas = $('#mycanvas')[0];    canvas.width = width;    canvas.height = height;        $('#inputnumballs').val(numballs);      // create array of balls    balls = new array(numballs);    for(i = 0 ; < numballs ; i++){       balls[i] = new ball();    }        bounce();    });    function ball(){      // random radius      this.radius = math.floor(math.random()*(10-5+1))+5;        // random x , y      var margin = 2 * this.radius;      this.x = math.floor(math.random()*(width-margin))+margin/2;      this.y = math.floor(math.random()*(width-margin+1))+margin/2;        // 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 balls on canvas  function draw(){    var canvas = $('#mycanvas')[0];      // check if supported    if (canvas.getcontext) {        var ctx = canvas.getcontext("2d");        //clear canvas      ctx.clearrect(0, 0, width, height);        ctx.globalalpha = 0.5;      ctx.strokestyle="black";        // draw each ball      for(var = 0; < 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        ctx.arc(ball.x, ball.y, ball.radius, 0, 2*math.pi, false);        ctx.stroke();        ctx.fill();      }    }    else{      //canvas not supported    }  }    // calls draw framerate times second.  function bounce() {    var framerate = 60;    setinterval(draw, 1000 / framerate);  }

body {    font-family: sans-serif;  }  #mycanvas {    float: left;    margin: 0 10px 0 0;    width: 160px;    height: 160px;    border: 1px solid #888;  }  #inputnumballs {    font-size: 18px;    padding: 5px 8px;    margin: 5px;    text-align: center;    outline: none;  }  .button {    display: inline;    cursor: pointer;    padding: 2px 8px;    border-radius: 5px;    border: 2px solid #888;  }  .button:hover {    background: #ffd;    border-color: #000;  }  #display {    width: 200px;    height: 50px;    padding: 10px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>    <canvas id="mycanvas"> canvas not supported. </canvas>    <div>    number of balls:    <input type="text" id="inputnumballs" size="3" />    <div class="button" id="setnumballs">set</div>    <div id="display"></div>  </div>