我已经编写了一个代码，其中有两个跟随鼠标的圆圈。我设法进行碰撞检测，它暂时工作得很好，但是我不能让圆圈保持在一起而不会被击退。
我试过使用一个布尔值，只要它们重叠就设置为true，然后我检查布尔值是否为真，然后我再次将加速度乘以-1，但它只是不起作用，因为它们只是＆＃34;合并＆＃34 ;.
我也试过将其他圆的半径添加到它的位置，但它只是做了一个传送＆＃34;。这不是学校作业，它是个人项目:)）
编辑：预期的行为不会被另一个圈子排斥，而是保持在一起并围绕圆圈移动并前进到鼠标位置而不会被击退。就像在游戏agar.io上一样，当你在移动时分裂细胞并且碰撞它们时它们不会排斥但是它们会顺畅地相互移动。
// Setting all up
const canvas = document.getElementById("cv");
const ctx = canvas.getContext("2d");
canvas.width = innerWidth;
canvas.height = innerHeight;
// Math Variables and utilities
const PI = Math.PI;
const TWO_PI = PI * 2;
const HALF_PI = PI / 2;
const random = (n1, n2 = 0) => {
return Math.random() * (n2 - n1) + n1;
};
const distance = (n1, n2, n3, n4) => {
let dX = n1 - n3;
let dY = n2 - n4;
return Math.sqrt(dX * dX + dY * dY);
};
let circles = []; // Array that stores the two circles
let mouse = {
x: 0,
y: 0
}; // mouse object
// Creating the circle class
function Circle(px, py, r, ctx) {
this.x = px; // X Position
this.y = py; // Y Position
this.r = r; // Radius
this.ctx = ctx; // Canvas context
this.acc = 0.005; // HardCoded acceleration value
// Draw circle function
this.show = function() {
this.ctx.beginPath();
this.ctx.fillStyle = "#fff";
this.ctx.arc(this.x, this.y, this.r, 0, TWO_PI, false);
this.ctx.fill();
};
this.update = function(x, y) {
// Distance between the mouse's X and Y coords and circle's // X and Y coords
let dist = {
x: x - this.x,
y: y - this.y
};
// Distance formula stated above
let d = distance(x, y, this.x, this.y);
if (d > 1) {
this.x += dist.x * this.acc;
this.y += dist.y * this.acc;
}
};
// Circle collision
this.collides = function(other) {
let d1 = distance(this.x, this.y, other.x, other.y);
if (d1 <= other.r + this.r) {
//this.acc *= -1;
// Do stuff to make the circle that collides to round the other
// Without getting inside it
}
}
}
// Generating the circles
const genCircles = () => {
// Just generating two circles
for (let i = 0; i < 2; i++) {
circles.push(new Circle(random(canvas.width / 2), random(canvas.height / 2), 50, ctx));
}
};
genCircles();
// Displaying and updating the circles
const showCircles = () => {
for (let i = 0; i < circles.length; i++) {
// Mouse Event to update mouse's coords
canvas.addEventListener("mousemove", (e) => {
mouse.x = e.x;
mouse.y = e.y;
}, true);
// Iterating over the circles to check for collision
for (let j = 0; j < circles.length; j++) {
if (i !== j) {
circles[i].collides(circles[j])
}
}
// Doing the movement and the display functions
circles[i].update(mouse.x, mouse.y);
circles[i].show();
}
};
// Loop to make it run
const update = () => {
requestAnimationFrame(update);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, canvas.width, canvas.height);
showCircles();
};
update();html body {
margin: 0;
padding: 0;
overflow: hidden;
display: block;
}<canvas id="cv"></canvas>
答案 0 :(得分：1)
它离完美还很远，但是我已经提到了：你可以更新＆＃34;中心＆＃34;每个圈子的x和y基于相互冲突的圈子。对于每个碰撞的圈，x和y成为这些圈子的两个中心值之间的中间点。这些值未设置为this.x或this.y，或者它们会奇怪地跳跃。相反，这个新的＆＃34;亲戚＆＃34;只有在确定每次抽奖的行程距离时，才会计算并使用x和y。底部代码段无法正常工作，因为它最终不会在右侧x,y结束，但会让您了解它应该做什么。其他任何人都可以随意在我自己的答案或编辑内容的基础上继续发展。
// Setting all up
const canvas = document.getElementById("cv");
const ctx = canvas.getContext("2d");
canvas.width = innerWidth;
canvas.height = innerHeight;
// Math Variables and utilities
const PI = Math.PI;
const TWO_PI = PI * 2;
const HALF_PI = PI / 2;
const random = (n1, n2 = 0) => {
return Math.random() * (n2 - n1) + n1;
};
const distance = (n1, n2, n3, n4) => {
let dX = n1 - n3;
let dY = n2 - n4;
return Math.sqrt(dX * dX + dY * dY);
};
let circles = []; // Array that stores the two circles
let mouse = {
x: 0,
y: 0
}; // mouse object
// Creating the circle class
function Circle(px, py, r, ctx) {
this.x = px; // X Position
this.y = py; // Y Position
this.r = r; // Radius
this.ctx = ctx; // Canvas context
this.acc = 0.005; // HardCoded acceleration value
// Draw circle function
this.show = function() {
this.ctx.beginPath();
this.ctx.fillStyle = "#fff";
this.ctx.arc(this.x, this.y, this.r, 0, TWO_PI, false);
this.ctx.fill();
};
this.update = function(x, y) {
// Distance between the mouse's X and Y coords and circle's // X and Y coords
var reletave = {x: this.x, y: this.y};
circles.forEach((cir) => {
if(cir === this) return;
if(this.collides(cir)) {
var floor = {x: Math.floor(cir.x, reletave.x), y: Math.floor(cir.y, reletave.y)};
var dist = {x: Math.abs(cir.x - reletave.x), y: Math.abs(cir.y - reletave.y)};
reletave.x = floor.x + dist.x;
reletave.y = floor.y + dist.y;
}
})
let dist = {
x: x - reletave.x,
y: y - reletave.y
};
// Distance formula stated above
let d = distance(x, y, reletave.x, reletave.y);
if (d > 0) {
this.x += dist.x * this.acc;
this.y += dist.y * this.acc;
}
};
// Circle collision
this.collides = function(other) {
let d1 = distance(this.x, this.y, other.x, other.y);
return d1 <= other.r + this.r;
}
}
// Generating the circles
const genCircles = () => {
// Just generating two circles
for (let i = 0; i < 2; i++) {
var collides = true;
while(collides){
var circleAdd = new Circle(random(canvas.width / 2), random(canvas.height / 2), 50, ctx);
collides = false;
circles.forEach((cir) => {
collides = circleAdd.collides(cir) ? true : collides;
});
if(collides) delete circleAdd;
}
circles.push(circleAdd);
}
};
genCircles();
// Displaying and updating the circles
const showCircles = () => {
for (let i = 0; i < circles.length; i++) {
// Mouse Event to update mouse's coords
canvas.addEventListener("mousemove", (e) => {
mouse.x = e.x;
mouse.y = e.y;
}, true);
// Iterating over the circles to check for collision
for (let j = 0; j < circles.length; j++) {
if (i !== j) {
if(circles[i].collides(circles[j])) {
//circles[i].acc = circles[j].acc = 0;
}
}
}
// Doing the movement and the display functions
circles[i].update(mouse.x, mouse.y);
circles[i].show();
}
};
// Loop to make it run
const update = () => {
requestAnimationFrame(update);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, canvas.width, canvas.height);
showCircles();
};
update();html body {
margin: 0;
padding: 0;
overflow: hidden;
display: block;
}<canvas id="cv"></canvas>