javascript - 控制速度和改变球的颜色

Question

我正在尝试创建一个网站来监控这类事情。在这里我需要控制球的速度。怎么做？然后，如果球与其他球发生碰撞或重叠，我需要将球的颜色更改为红色。如果不是，它应该保持绿色。我不知道如何做这些事情。任何人都可以帮忙吗？

function getBall(xVal, yVal, dxVal, dyVal, rVal, colorVal) {
  var ball = {
    x: xVal,
    lastX: xVal,
    y: yVal,
    lastY: yVal,
    dx: dxVal,
    dy: dyVal,
    r: rVal,
    color: colorVal,
    normX: 0,
    normY: 0,
    durationAverage: 0,
    durationMin: Number.MAX_SAFE_INTEGER,
    durationMax: 0,
    bounceCount: 0
  };
  return ball;
}

var canvas = document.getElementById("Canvas");

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

var containerR = 200;
canvas.width = containerR * 2;
canvas.height = containerR * 2;
canvas.style["border-radius"] = containerR + "px";

var balls = [
  getBall(canvas.width / 2, canvas.height - 30, 2, -2, 8, "#32CD32"),
  getBall(canvas.width / 3, canvas.height - 50, 3, -3, 8, "#32CD32"),
  getBall(canvas.width / 4, canvas.height - 60, -3, 4, 8, "#32CD32"),
  getBall(canvas.width / 2, canvas.height / 5, -1.5, 3, 8, "#32CD32")
];

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (var i = 0; i < balls.length; i++) {
    var curBall = balls[i];
    ctx.beginPath();
    ctx.arc(curBall.x, curBall.y, curBall.r, 0, Math.PI * 2, false);
    ctx.fillStyle = curBall.color;
    ctx.fill();
    ctx.closePath();
    curBall.lastX = curBall.x;
    curBall.lastY = curBall.y;
    curBall.x += curBall.dx;
    curBall.y += curBall.dy;
    var dx = curBall.x - containerR;
    var dy = curBall.y - containerR;
    if (Math.sqrt(dx * dx + dy * dy) >= containerR - curBall.r) {

      var start = performance.now();

      // current speed
      var v = Math.sqrt(curBall.dx * curBall.dx + curBall.dy * curBall.dy);
      // Angle from center of large circle to center of small circle,
      // which is the same as angle from center of large cercle
      // to the collision point
      var angleToCollisionPoint = Math.atan2(-dy, dx);
      // Angle of the current movement
      var oldAngle = Math.atan2(-curBall.dy, curBall.dx);
      // New angle
      var newAngle = 2 * angleToCollisionPoint - oldAngle;
      // new x/y speeds, using current speed and new angle
      curBall.dx = -v * Math.cos(newAngle);
      curBall.dy = v * Math.sin(newAngle);

      var end = performance.now();
      var curDuration = end - start;
      curBall.bounceCount++;
      curBall.durationAverage = (((curBall.bounceCount - 1) * curBall.durationAverage) + curDuration) / curBall.bounceCount;
      if (curDuration < curBall.durationMin) {
        curBall.durationMin = curDuration
      }
      if (curDuration > curBall.durationMax) {
        curBall.durationMax = curDuration
      }
    }
  }
  requestAnimationFrame(draw);
}
draw();

canvas {
  background: #eee;
}

<canvas id="Canvas"></canvas>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Answer 1

看看这是不是你要找的:

function getBall(xVal, yVal, dxVal, dyVal, rVal, colorVal) {
  var ball = {x: xVal, y: yVal, dx: dxVal, dy: dyVal, r: rVal, color: colorVal
  };
  return ball;
}

var canvas = document.getElementById("Canvas");
var ctx = canvas.getContext("2d");
ctx.globalAlpha = 0.8

var containerR = 100;
canvas.width = canvas.height = containerR * 2;

var balls = [
  getBall(canvas.width / 2, canvas.height - 30, 1, -0.5, 18, "#32CD32"),
  getBall(canvas.width / 3, canvas.height - 50, 1.2, -1, 15, "#32CD32"),
  getBall(canvas.width / 4, canvas.height - 60, -1.6, 1, 12, "#32CD32"),
  getBall(canvas.width / 2, canvas.height / 5, -1.5, 1, 8, "#32CD32")
];

function drawBall(curBall) {
  ctx.beginPath();
  ctx.arc(curBall.x, curBall.y, curBall.r, 0, Math.PI * 2, false);
  ctx.fillStyle = curBall.color;
  ctx.fill();
  ctx.stroke();
  ctx.closePath();
}

function updateBallPos(curBall) {
  curBall.x += curBall.dx;
  curBall.y += curBall.dy;
  var dx = curBall.x - containerR;
  var dy = curBall.y - containerR;

  if (Math.sqrt(dx * dx + dy * dy) >= containerR - curBall.r) {
    var v = Math.sqrt(curBall.dx * curBall.dx + curBall.dy * curBall.dy);

    var angleToCollisionPoint = Math.atan2(-dy, dx);
    var oldAngle = Math.atan2(-curBall.dy, curBall.dx);

    var newAngle = 2 * angleToCollisionPoint - oldAngle;
    curBall.dx = -v * Math.cos(newAngle);
    curBall.dy = v * Math.sin(newAngle);
  }
}

function ballsMeet(b1, b2) {
  return (Math.hypot(Math.abs(b1.x - b2.x), Math.abs(b1.y - b2.y)) < (b1.r + b2.r))
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (var i = 0; i < balls.length; i++) {
    drawBall(balls[i])
    updateBallPos(balls[i])

    meet = false
    for (var j = 0; j < balls.length; j++) {
      if (ballsMeet(balls[i], balls[j]) && i != j) {
        meet = true
        balls[j].color = "red"
      }
    }
    balls[i].color = (meet) ? "red" : "lime"
  }
  requestAnimationFrame(draw);
}

draw();

<canvas id="Canvas"></canvas>

我大大剥离了您的代码，只专注于颜色变化，这些球有很多属性，我猜您稍后会用到其他东西，但与您目前遇到的问题并不真正相关。

我还把你的代码分成多个更小的函数，这样更容易阅读。

所以我们的想法是检查每个球与所有其他球的对比，看看它们是否“相遇”，如果它们相遇，我们就改变颜色，我放慢你的例子的速度，让动画稍微平滑一点，如果不是的话，我得到了很多从红色到绿色的变化，这表明正在发生什么