0

var ellipse = function(x, y, radius) {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI * 2, false);
  ctx.fill();
};

var Ball = function(x, y) {
  this.x = x;
  this.y = y;
  this.xSpeed = 2;
  this.ySpeed = 3;
};

Ball.prototype.draw = function() {
  ellipse(this.x, this.y, 4);
};

Ball.prototype.move = function() {
  this.x = this.x + this.xSpeed;
  this.y = this.y + this.ySpeed;
};

Ball.prototype.checkBord = function() {
  if (this.x < 0 || this.x > 200) {
    this.xSpeed = -this.xSpeed
  }
  if (this.y < 0 || this.y > 200) {
    this.ySpeed = -this.ySpeed
  }
};

var canvas = document.getElementById('c1');
var ctx = canvas.getContext('2d');
var ball1 = new Ball(200, 50);
var ball2 = new Ball(100, 50);

setInterval(function() {
  ctx.clearRect(0, 0, 200, 200);
  ball1.draw();
  ball1.move();
  ball1.checkBord();
  ball2.draw();
  ball2.move();
  ball2.checkBord();
}, 53);

if (ball1 < ball2 || ball1 > ball2) {
  this.xSpeed = -this.xSpeed
}

if (ball1 > ball2 || ball1 < ball2) {
  this.ySpeed = -this.ySpeed
}
canvas {
  width: 200px;
  height: 200px;
  border: 3px solid black;
  margin: 40px;
}
<noscript>Подключите JS</noscript>
<canvas id="c1" width='200' height='200'>Подключите</canvas>

1 ответ 1

3

const radius = 10;

var ellipse = function(x, y, radius) {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI * 2, false);
  ctx.fill();
};

var Ball = function(x, y) {
  this.x = x;
  this.y = y;
  this.xSpeed = Math.random() * 2;
  this.ySpeed = Math.random() * 2;
};

Ball.prototype.draw = function() {
  ellipse(this.x, this.y, radius);
};

Ball.prototype.move = function() {
  this.x = this.x + this.xSpeed;
  this.y = this.y + this.ySpeed;
};

Ball.prototype.checkBord = function() {
  if (this.x < 0 || this.x > 200) {
    this.xSpeed = -this.xSpeed
  }
  if (this.y < 0 || this.y > 200) {
    this.ySpeed = -this.ySpeed
  }
};

function getDistance(ball1, ball2) {
  return ((ball1.x - ball2.x) ** 2 + (ball1.y - ball2.y) ** 2) ** 0.5;
}

function ifCollapse(ball1, ball2) {
  return radius * 2 > getDistance(ball1, ball2);
}

function getCoeff(ball) {
  return ball.ySpeed / ball.xSpeed;
}

function getAngle(k1, k2) {
  return Math.atan((k2 - k1) / (1 + k1 * k2));
}

function getModuleLength(ball) {
  return (ball.xSpeed ** 2 + ball.ySpeed ** 2) ** 0.5;
}

function getXYProections(k, length, xSpeed, ySpeed) {
  const sin = k / (1 + k ** 2) ** 0.5 * Math.sign(ySpeed);
  const cos = 1 / (1 + k ** 2) ** 0.5 * Math.sign(xSpeed);

  return [sin * length, cos * length];
}

function collapse(ball1, ball2) {
  if (!ifCollapse(ball1, ball2)) {
    return
  }
  const k = ((ball2.y - ball1.y) / (ball2.x - ball1.x)) || 0;
  const b = k * (-ball1.x) + ball1.y;

  const k1 = getCoeff(ball1);
  const k2 = getCoeff(ball2);

  const angle1 = getAngle(k, k1);
  const angle2 = getAngle(k, k2);

  const alongLength1 = Math.cos(angle1) * getModuleLength(ball1);
  const alongLength2 = Math.cos(angle2) * getModuleLength(ball2);
  
  const [yComponent1, xComponent1] = getXYProections(k, alongLength1, ball1.xSpeed, ball1.xSpeed);
  const [yComponent2, xComponent2] = getXYProections(k, alongLength2, ball2.xSpeed, ball2.xSpeed);
  
  ball1.xSpeed = ball1.xSpeed - xComponent1 + xComponent2;
  ball1.ySpeed = ball1.ySpeed - yComponent1 + yComponent2;
  
  ball2.xSpeed = ball2.xSpeed - xComponent2 + xComponent1;
  ball2.ySpeed = ball2.ySpeed - yComponent2 + yComponent1;
}

var canvas = document.getElementById('c1');
var ctx = canvas.getContext('2d');
var ball1 = new Ball(200, 50);
var ball2 = new Ball(100, 50);

setInterval(function() {
  ctx.clearRect(0, 0, 200, 200);
  ball1.draw();
  ball1.move();
  ball1.checkBord();
  ball2.draw();
  ball2.move();
  ball2.checkBord();
  collapse(ball1, ball2);
}, 30);
canvas {
  width: 200px;
  height: 200px;
  border: 3px solid black;
  margin: 40px;
}
<noscript>Подключите JS</noscript>
<canvas id="c1" width='200' height='200'>Подключите</canvas>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.