Javascript HTML5画布-碰撞球物理故障
我用牛顿方程让我正在做的程序中的球在相互碰撞时被“分开”,但有时它们会相互卡住,这会造成很多麻烦 这是我的代码:Javascript HTML5画布-碰撞球物理故障,javascript,html,canvas,physics,collision,Javascript,Html,Canvas,Physics,Collision,我用牛顿方程让我正在做的程序中的球在相互碰撞时被“分开”,但有时它们会相互卡住,这会造成很多麻烦 这是我的代码: <center> <canvas id="canvas" style="border: 2px solid black; cursor: crosshair;" width="1000" height="500"></canvas> </center> <script> var canva
<center>
<canvas id="canvas" style="border: 2px solid black; cursor: crosshair;" width="1000" height="500"></canvas>
</center>
<script>
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
var w = canvas.width
var h = canvas.height
var ball = []
var gravity = 0.3
var force = 0.2
var mouse = {
d: false,
x1: 0,
y1: 0,
x2: 0,
y2: 0,
}
window.onmousedown = function(e) {
mouse.d = true
mouse.x1 = mouse.x2 = e.pageX - canvas.getBoundingClientRect().left
mouse.y1 = mouse.y2 = e.pageY - canvas.getBoundingClientRect().top
}
window.onmousemove = function(e) {
if (mouse.d) {
mouse.x2 = e.pageX - canvas.getBoundingClientRect().left
mouse.y2 = e.pageY - canvas.getBoundingClientRect().top
} else {
mouse.x1 = mouse.x2 = e.pageX - canvas.getBoundingClientRect().left
mouse.y1 = mouse.y2 = e.pageY - canvas.getBoundingClientRect().top
}
}
window.onmouseup = function() {
if (mouse.d) {
mouse.d = false
var dx = (mouse.x1 - mouse.x2);
var dy = (mouse.y1 - mouse.y2);
var mag = Math.sqrt(dx * dx + dy * dy);
ball.push({
x: mouse.x1,
y: mouse.y1,
r: Math.floor(Math.random() * 20) + 10,
vx: dx / mag * -(mag * force),
vy: dy / mag * -(mag * force),
b: 0.7,
})
}
}
document.onselectstart = function() {return false}
document.oncontextmenu = function() {return false}
setInterval(update, 1000 / 60)
function update() {
ctx.clearRect(0, 0, w, h)
ctx.beginPath()
ctx.moveTo(mouse.x1, mouse.y1)
ctx.lineTo(mouse.x2, mouse.y2)
ctx.stroke()
ctx.closePath()
for (i = 0; i < ball.length; i++) {
ball[i].vy += gravity
ball[i].x += ball[i].vx
ball[i].y += ball[i].vy
if (ball[i].x > w - ball[i].r) {
ball[i].x = w - ball[i].r
ball[i].vx *= -ball[i].b
}
if (ball[i].x < ball[i].r) {
ball[i].x = ball[i].r
ball[i].vx *= -ball[i].b
}
if (ball[i].y > h - ball[i].r) {
ball[i].y = h - ball[i].r
ball[i].vy *= -ball[i].b
}
if (ball[i].y < ball[i].r) {
ball[i].y = ball[i].r
ball[i].vy *= -ball[i].b
}
for (j = i + 1; j < ball.length; j++) {
var dx = ball[i].x - ball[j].x
var dy = ball[i].y - ball[j].y
var dist = Math.sqrt(dx * dx + dy * dy)
if (Math.abs(dx) + Math.abs(dy) != 0 && dist <= ball[i].r + ball[j].r) {
var angle = Math.atan2(dy, dx)
var sp1 = Math.sqrt(ball[i].vx*ball[i].vx + ball[i].vy*ball[i].vy);
var sp2 = Math.sqrt(ball[j].vx*ball[j].vx + ball[j].vy*ball[j].vy);
var dir1 = Math.atan2(ball[i].vy, ball[i].vx);
var dir2 = Math.atan2(ball[j].vy, ball[j].vx);
var vx1 = sp1 * Math.cos(dir1 - angle);
var vy1 = sp1 * Math.sin(dir1 - angle);
var vx2 = sp2 * Math.cos(dir2 - angle);
var vy2 = sp2 * Math.sin(dir2 - angle);
var fvx1 = ((ball[i].r - ball[j].r) * vx1 + (2 * ball[j].r) * vx2) / (ball[i].r + ball[j].r);
var fvx2 = ((2 * ball[i].r) * vx1 + (ball[j].r - ball[i].r) * vx2) / (ball[i].r + ball[j].r);
var fvy1 = vy1;
var fvy2 = vy2;
ball[i].vx = Math.cos(angle) * fvx1 + Math.cos(angle + Math.PI/2) * fvy1;
ball[i].vy = Math.sin(angle) * fvx1 + Math.sin(angle + Math.PI/2) * fvy1;
ball[j].vx = Math.cos(angle) * fvx2 + Math.cos(angle + Math.PI/2) * fvy2;
ball[j].vy = Math.sin(angle) * fvx2 + Math.sin(angle + Math.PI/2) * fvy2;
}
}
ctx.beginPath()
ctx.arc(ball[i].x, ball[i].y, ball[i].r, 0, Math.PI * 2, false)
ctx.fillStyle = "black"
ctx.fill()
ctx.closePath()
}
}
</script>
var canvas=document.getElementById(“画布”)
var ctx=canvas.getContext(“2d”)
var w=画布宽度
var h=画布高度
var ball=[]
var重力=0.3
var力=0.2
变量鼠标={
d:错,
x1:0,
y1:0,
x2:0,
y2:0,
}
window.onmousedown=函数(e){
mouse.d=true
mouse.x1=mouse.x2=e.pageX-canvas.getBoundingClientRect().左
mouse.y1=mouse.y2=e.pageY-canvas.getBoundingClientRect().top
}
window.onmousemove=函数(e){
如果(鼠标d){
mouse.x2=e.pageX-canvas.getBoundingClientRect().left
mouse.y2=e.pageY-canvas.getBoundingClientRect().top
}否则{
mouse.x1=mouse.x2=e.pageX-canvas.getBoundingClientRect().左
mouse.y1=mouse.y2=e.pageY-canvas.getBoundingClientRect().top
}
}
window.onmouseup=函数(){
如果(鼠标d){
mouse.d=false
var dx=(mouse.x1-mouse.x2);
var dy=(mouse.y1-mouse.y2);
var mag=Math.sqrt(dx*dx+dy*dy);
球推({
x:mouse.x1,
y:老鼠。y1,
r:Math.floor(Math.random()*20)+10,
vx:dx/mag*-(mag*力),
vy:dy/mag*-(mag*力),
b:0.7,
})
}
}
document.onselectstart=函数(){return false}
document.oncontextmenu=函数(){return false}
设置间隔(更新,1000/60)
函数更新(){
ctx.clearRect(0,0,w,h)
ctx.beginPath()
ctx.moveTo(mouse.x1,mouse.y1)
ctx.lineTo(mouse.x2,mouse.y2)
ctx.stroke()
ctx.closePath()
对于(i=0;iw-ball[i].r){
球[i].x=w-球[i].r
ball[i].vx*=-ball[i].b
}
if(ball[i].xh-ball[i].r){
球[i].y=h-球[i].r
ball[i].vy*=-ball[i].b
}
if(ball[i].y 如果(Math.abs(dx)+Math.abs(dy)!=0&&dist您的解决方案似乎只有基于速度的惩罚力。这允许球体穿透,并且当任何球体中没有速度时,它们都不会尝试修复穿透。要解决此问题,您需要添加基于位置的惩罚。
一个非常简单的解决方案是使用弹簧。计算穿透长度,并使用弹簧将相交球体相互推离
最好的解决方案是使用隐式接触求解算法。这允许使用更多的刚性接触,但其算法要复杂得多。我建议您使用2D物理引擎以获得快速而良好的结果:似乎最常用的是。我非常同意@schteppe的上述答案。我只是想告诉您有关这个问题的信息这里是链接:
查看“我为什么要使用它?”部分。它可能会暗示您的问题的答案,即您的代码到底出了什么问题
顺便说一句,我也一直在努力使您的代码正常工作,但没有取得实质性的结果。您可以在这里查看我的小提琴(我从您的小提琴复制而来):
var canvas=document.getElementById(“canvas”)
var ctx=canvas.getContext(“2d”)
var w=画布宽度
var h=画布高度
var d=5;//碰撞时移动的距离
var ball=[]
var重力=0.3
var力=0.2
变量鼠标={
d:错,
x1:0,
y1:0,
x2:0,
y2:0,
}
window.onmousedown=函数(e){
mouse.d=true
mouse.x1=mouse.x2=e.pageX-canvas.getBoundingClientRect().左
mouse.y1=mouse.y2=e.pageY-canvas.getBoundingClientRect().top
}
window.onmousemove=函数(e){
如果(鼠标d){
mouse.x2=e.pageX-canvas.getBoundingClientRect().left
mouse.y2=e.pageY-canvas.getBoundingClientRect().top
}否则{
mouse.x1=mouse.x2=e.pageX-canvas.getBoundingClientRect().左
mouse.y1=mouse.y2=e.pageY-canvas.getBoundingClientRect().top
}
}
window.onmouseup=函数(){
如果(鼠标d){
mouse.d=false
var dx=(mouse.x1-mouse.x2);
var dy=(mouse.y1-mouse.y2);
var mag=Math.sqrt(dx*dx+dy*dy);
球推({
x:mouse.x1,
y:老鼠。y1,
r:Math.floor(Math.random()*20)+10,
vx:dx/mag*-(mag*力),
vy:dy/mag*-(mag*力),
b:0.7,
})
}
}
函数getRandomColor(){
变量字母='0123456789ABCDEF'。拆分('');
var color='#';
对于(变量i=0;i<6;i++){
颜色+=字母[Math.floor(Math.random()*16)];
}
返回颜色;
}
document.onselectstart=函数(){
返回错误
}
document.oncontextmenu=函数(){
返回错误
}
设置间隔(更新,1000/60)
函数更新(){
ctx.clearRect(0,0,w,h)
ctx.beginPath()
ctx.moveTo(mouse.x1,mouse.y1)
ctx.lineTo(mouse.x2,mouse.y2)
ctx.stroke()
ctx.closePath()
对于(i=0;iw-ball[i].r){
球[i].x=w-球[i].r
ball[i].vx*=-ball[i].b
}
if(ball[i].xh-ball[i].r){
球[i].y=h-球[i].r
ball[i].vy*=-ball[i].b
}
if(ball[i].yvar canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
var w = canvas.width
var h = canvas.height
var d = 5; //distance to move on collision
var ball = []
var gravity = 0.3
var force = 0.2
var mouse = {
d: false,
x1: 0,
y1: 0,
x2: 0,
y2: 0,
}
window.onmousedown = function (e) {
mouse.d = true
mouse.x1 = mouse.x2 = e.pageX - canvas.getBoundingClientRect().left
mouse.y1 = mouse.y2 = e.pageY - canvas.getBoundingClientRect().top
}
window.onmousemove = function (e) {
if (mouse.d) {
mouse.x2 = e.pageX - canvas.getBoundingClientRect().left
mouse.y2 = e.pageY - canvas.getBoundingClientRect().top
} else {
mouse.x1 = mouse.x2 = e.pageX - canvas.getBoundingClientRect().left
mouse.y1 = mouse.y2 = e.pageY - canvas.getBoundingClientRect().top
}
}
window.onmouseup = function () {
if (mouse.d) {
mouse.d = false
var dx = (mouse.x1 - mouse.x2);
var dy = (mouse.y1 - mouse.y2);
var mag = Math.sqrt(dx * dx + dy * dy);
ball.push({
x: mouse.x1,
y: mouse.y1,
r: Math.floor(Math.random() * 20) + 10,
vx: dx / mag * -(mag * force),
vy: dy / mag * -(mag * force),
b: 0.7,
})
}
}
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
document.onselectstart = function () {
return false
}
document.oncontextmenu = function () {
return false
}
setInterval(update, 1000/60)
function update() {
ctx.clearRect(0, 0, w, h)
ctx.beginPath()
ctx.moveTo(mouse.x1, mouse.y1)
ctx.lineTo(mouse.x2, mouse.y2)
ctx.stroke()
ctx.closePath()
for (i = 0; i < ball.length; i++) {
ball[i].vy += gravity
ball[i].x += ball[i].vx
ball[i].y += ball[i].vy
if (ball[i].x > w - ball[i].r) {
ball[i].x = w - ball[i].r
ball[i].vx *= -ball[i].b
}
if (ball[i].x < ball[i].r) {
ball[i].x = ball[i].r
ball[i].vx *= -ball[i].b
}
if (ball[i].y > h - ball[i].r) {
ball[i].y = h - ball[i].r
ball[i].vy *= -ball[i].b
}
if (ball[i].y < ball[i].r) {
ball[i].y = ball[i].r
ball[i].vy *= -ball[i].b
}
for (j = i + 1; j < ball.length; j++) {
var dx = ball[i].x - ball[j].x
var dy = ball[i].y - ball[j].y
var dist = Math.sqrt(dx * dx + dy * dy)
if (Math.abs(dx) + Math.abs(dy) != 0 && dist <= ball[i].r + ball[j].r) {
var angle = Math.atan2(dy, dx)
var sp1 = Math.sqrt(ball[i].vx * ball[i].vx + ball[i].vy * ball[i].vy);
var sp2 = Math.sqrt(ball[j].vx * ball[j].vx + ball[j].vy * ball[j].vy);
var dir1 = Math.atan2(ball[i].vy, ball[i].vx);
var dir2 = Math.atan2(ball[j].vy, ball[j].vx);
d = Math.ceil(ball[i].r+ball[j].r-dist)/2;
//moving them back
ball[i].x = ball[i].x - Math.cos(dir1)*d-1;
ball[i].y = ball[i].y - Math.sin(dir1)*d-1;
ball[j].x = ball[j].x + Math.cos(dir2)*d+1;
ball[j].y = ball[j].y + Math.sin(dir2)*d+1;
//Checking for distance again
/*dx = ball[i].x - ball[j].x;
dy = ball[i].y - ball[j].y;
dist = Math.sqrt(dx * dx + dy * dy);
if (Math.abs(dx) + Math.abs(dy) != 0 && dist <= ball[i].r + ball[j].r){
ball[i].x = ball[i].x + Math.cos(dir1)*2*d;
ball[i].y = ball[i].y + Math.sin(dir1)*d*2;
ball[j].x = ball[j].x - Math.cos(dir2)*d*2;
ball[j].y = ball[j].y - Math.sin(dir2)*d*2;
}*/
var vx1 = sp1 * Math.cos(dir1 - angle);
var vy1 = sp1 * Math.sin(dir1 - angle);
var vx2 = sp2 * Math.cos(dir2 - angle);
var vy2 = sp2 * Math.sin(dir2 - angle);
var fvx1 = ((ball[i].r - ball[j].r) * vx1 + (2 * ball[j].r) * vx2) / (ball[i].r + ball[j].r);
var fvx2 = ((2 * ball[i].r) * vx1 + (ball[j].r - ball[i].r) * vx2) / (ball[i].r + ball[j].r);
var fvy1 = vy1;
var fvy2 = vy2;
ball[i].vx = Math.cos(angle) * fvx1 + Math.cos(angle + Math.PI / 2) * fvy1;
ball[i].vy = Math.sin(angle) * fvx1 + Math.sin(angle + Math.PI / 2) * fvy1;
ball[j].vx = Math.cos(angle) * fvx2 + Math.cos(angle + Math.PI / 2) * fvy2;
ball[j].vy = Math.sin(angle) * fvx2 + Math.sin(angle + Math.PI / 2) * fvy2;
}
}
ctx.beginPath()
ctx.arc(ball[i].x, ball[i].y, ball[i].r, 0, Math.PI * 2, false)
ctx.fillStyle = getRandomColor();
ctx.fill();
ctx.closePath();
}
}