как сделать чтобы мячи отскакивали друг от друга при косание

Question

<html>

<head>

  <style>
    canvas {
      border: 10px solid rgb(250, 0, 0);
      margin: 0 auto;
    }
  </style>

</head>

<body>

  <canvas id="myCanvas" width="1000" height="720"></canvas>
  <script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var ballRadius = 50;
    var x = 50;
    var y = 50;
    var x2 = 350;
    var y2 = 550;
    var dx = 5;
    var dy = -5;
    var dx2 = 5;
    var dy2 = -5;

    function drawBall() {
      ctx.beginPath();
      ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
    }

    function drawBall2() {
      ctx.beginPath();
      ctx.arc(x2, y2, ballRadius, 0, Math.PI * 2);
      ctx.fillStyle = "red";
      ctx.fill();
      ctx.closePath();
    }

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


      if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
        dx = -dx;
      }
      if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
        dy = -dy;
      }
      if (x2 + dx > canvas.width - ballRadius || x2 + dx2 < ballRadius) {
        dx2 = -dx2;
      }
      if (y2 + dy > canvas.height - ballRadius || y2 + dy2 < ballRadius) {
        dy2 = -dy2;
      }
      x += dx;
      y += dy;
      x2 += dx2;
      y2 += dy2;
    }
    setInterval(draw, 10);
  </script>
</body>

</html>

БЛОГ НА HUSL

как сделать чтобы мячи отскакивали друг от друга при косание

Ответы (0 шт):