Question

我正在尝试更改模拟中的弹跳球数量。我正在使用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);
}

Answer 1

假设newNumBalls是新的球数。

如果newNumBalls小于numBalls，您想要从balls中删除元素。您可以通过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;。您可以使用slice执行此操作。

完整的逻辑是：

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 {
    for (var i = numBalls; i < 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 an array of balls
  balls = new Array(numBalls);
  for(i = 0 ; i < numBalls ; i++){
     balls[i] = new Ball();
  }
  
  bounce();

});

function Ball(){
    // random radius
    this.radius = Math.floor(Math.random()*(10-5+1))+5;

    // random x and 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 the balls on the 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 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 frameRate times a 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>

ul > li:hover > ul {
     display: block;
}

在模拟期间更改数组元素的数量

1 个答案: