Javascript 在不使用画布的情况下碰撞两个圆
我已经创建了三个圆圈，并使其在不使用HTML画布的情况下从墙上反弹。现在我想让两个圆相互碰撞，并朝相反的方向移动这些圆。我试着通过检查它的位置来检测碰撞，但它不起作用。我不知道我哪里出错了。 这是我的密码：Javascript 在不使用画布的情况下碰撞两个圆,javascript,javascript-objects,Javascript,Javascript Objects,我已经创建了三个圆圈，并使其在不使用HTML画布的情况下从墙上反弹。现在我想让两个圆相互碰撞，并朝相反的方向移动这些圆。我试着通过检查它的位置来检测碰撞，但它不起作用。我不知道我哪里出错了。 这是我的密码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <tit
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bounce Ball</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.circle{
height: 50px;
width: 50px;
position: absolute;
border-radius: 50%;
}
.container {
height: 300px;
width: 300px;
background-color: skyblue;
position: relative;
}
</style>
</head>
<body>
<div class ="container" id ="container">
<div class="circle" id = "circle1" style="background-color:black;
height: 50px; width: 50px;top:0; left:0"></div>
<div class="circle" id ="circle2" style="background-color:rgb(197, 100,
100);height: 50px; width: 50px;top:200px;left: 150px"></div>
<div class="circle" id ="circle3" style="background-color:brown;height:
50px;width: 50px;top:50px;left: 640px"></div>
</div>
<script>
var container = document.getElementById("container");
container.style.width="700px";
container.style.height = "300px";
var balls = document.getElementsByClassName("circle");
for(var i=0; i <balls.length; i++){
var speed={x:3,y:-3}
setInterval(draw, 50 , balls[i], speed);
}
function draw(ball, speed) {
if(parseInt(ball.style.left) > (parseInt(container.style.width)-
parseInt(ball.style.width)) || (parseInt(ball.style.left) <0) ){
speed.x = -speed.x;
}
ball.style.left = parseInt(ball.style.left) + speed.x + 'px';
if(parseInt(ball.style.top) > (parseInt(container.style.height)-
parseInt(ball.style.height)) || (parseInt(ball.style.top) <0)){
speed.y = -speed.y;
}
ball.style.top = parseInt(ball.style.top) + speed.y + 'px';
//for colliding two circles
for(var i =0 ; i <= balls.length-1; i++){
for(var j = i + 1; j < balls.length; j++){
if(parseInt(balls[i].style.left) +
parseInt(balls[i].style.width) ==
parseInt(balls[j].style.left) ||
parseInt(balls[j].style.left) +
parseInt(balls[j].style.width) ==
parseInt(balls[i].style.left) &&
parseInt(balls[i].style.top) +
parseInt(balls[i].style.height) ==
parseInt(balls[j].style.top) || parseInt(balls[j].style.top)
+ parseInt(balls[j].style.height) ==
parseInt(balls[i].style.top)) {
speed.x = - speed.x;
speed.y = -speed.y;
}
ball[i].style.left = parseInt(ball[i].style.left) +
speed.x + 'px';
ball[j].style.left = parseInt(ball[j].style.left) +
speed.x + 'px';
ball[i].style.top = parseInt(ball[i].style.top) +
speed.y + 'px';
ball[j].style.top = parseInt(ball[j].style.top) +
speed.y + 'px';
}
}
}
</script>
</body>
</html>
弹球
.圆圈{
高度：50px；
宽度：50px；
位置：绝对位置；
边界半径：50%；
}
.集装箱{
高度：300px；
宽度：300px；
背景色：天蓝色；
位置：相对位置；
}
var container=document.getElementById（“容器”）；
container.style.width=“700px”；
container.style.height=“300px”；
var balls=document.getElementsByClassName（“圆”）；
对于（var i=0；i（parseInt（container.style.width）——
parseInt（ball.style.width）| |（parseInt（ball.style.left）（parseInt（container.style.height）-
parseInt（ball.style.height）| |（parseInt（ball.style.top）我建议尽可能多地移动到javascript变量中，这样您就不需要为每个参数查阅HTML
你有相当多的打字错误，其中包括speed.x=-speed.x；
你的意思是speed.x=-speed.x；
，如果没有任何注释或帮助函数来解释发生了什么，你的代码很难阅读
我已在下面的代码段中修复了您的打字错误并重新构造了代码。请尝试检查开发人员控制台，因为这将显示代码错误以及行号和严重性等级
在下面的代码片段中，我尝试将参数移动到JavaScript中，以显示其工作原理，同时仍在HTML节点上保留一些参数：
//基本属性
var宽度=700；
var高度=300；
//获取容器
var container=document.getElementById（“容器”）；
//设置尺寸
container.style.width=宽度+px；
container.style.height=高度+px；
//装球
var balls=Array.prototype.slice.call（document.getElementsByClassName（“圆”））
.map（函数（球）{
返回{
HTMLNode:ball，
xPos:parseInt（ball.style.left），
yPos:parseInt（ball.style.top），
xAcc:3，
yAcc:-3，
尺码：50
};
});
//效用函数
（x1，y1，x2，y2）之间的功能角{
返回数学atan2（y2-y1，x2-x1）；
}
函数之间的距离（x1，y1，x2，y2）{
返回Math.abs（y2-y1）+Math.abs（x2-x1）；
}
//绘图函数
函数绘图（）{
//绕球
对于（var ballIndex1=0；ballIndex1width-ball1.size | | ball1.xPos<0）{
ball1.xAcc=-ball1.xAcc；
}
//与垂直墙相撞
如果（ball1.yPos>高度-ball1.size | | ball1.yPos<0）{
ball1.yAcc=-ball1.yAcc；
}
//与其他球碰撞
对于（变量ballIndex2=ballIndex1+1；ballIndex2ball1.size）{
持续
}
//获取碰撞角
var angle=角度（ball1.xPos、ball1.yPos、ball2.xPos、ball2.yPos）；
//用力加速
ball1.xAcc=-Math.cos（角度）*3；
ball2.xAcc=-ball1.xAcc；
ball1.yAcc=-Math.sin（角度）*3；
ball2.yAcc=-ball1.yAcc；
}
//对位置施加加速度
ball1.yPos+=ball1.yAcc；
ball1.xPos+=ball1.xAcc；
//应用于节点
ball1.HTMLNode.style.left=ball1.xPos+“px”；
ball1.HTMLNode.style.top=ball1.yPos+“px”；
}
}
//开始模拟
设置间隔（绘图，1000/60）；
.circle{
位置：绝对位置；
边界半径：50%；
高度：50px；
宽度：50px；
}
.集装箱{
高度：300px；
宽度：300px；
背景色：天蓝色；
位置：相对位置；
}
Hi Aditi Acharya，你能为我们提供一把小提琴吗？第二个循环：请把这个：for（var j=i+1；j
改成这个`for（var j=i+1；j