时间戳

首页 > 解决方案 > 控制速度和改变球的颜色

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

问题描述

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

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>

标签： javascripthtmlcanvas

解决方案

看看这是不是你要找的：

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>

我显着剥离了您的代码，只是为了专注于颜色变化，这些球有很多属性，我猜您稍后会使用这些属性来做其他事情，但与您目前遇到的问题并不真正相关。

此外，我将您的代码拆分为多个更小的函数，这样更易​​于阅读。

所以我们的想法是检查每个球与所有其他球是否“相遇”，如果他们“相遇”，我们会改变颜色，如果不是，我会放慢你的示例速度以使动画平滑一点红色到绿色这是它显示正在发生的事情

推荐阅读