如何使移动文本在JS中相互反弹而不是重叠?

我正在尝试制作两个单词，它们是div，它们在我的网站上随机移动。

然而，每当这两个词接触时，我希望它们相互反弹而不是相互重叠。

我需要在我的 Javascript 中更改和添加什么？我已经发布了移动单词的代码。

$(document).ready(function(){
animateDiv();
animateDivTwo();

});


// MOTION 
function makeNewPosition(){

// Get viewport dimensions (remove the dimension of the div)
var h = $(window).height() - 100;
var w = $(window).width() - 100;

var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);

return [nh,nw];    

}
function animateDiv(){
var newq = makeNewPosition();
var oldq = $('.motion').offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);


$('.motion').animate({ top: newq[0], left: newq[1] }, speed, function(){
animateDiv();        
});

};
function animateDivTwo(){
var newq = makeNewPosition();
var oldq = $('.designer').offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);
$('.designer').animate({ top: newq[0], left: newq[1] }, speed, function(){
animateDivTwo(this);        
});
};
function calcSpeed(prev, next) {

var x = Math.abs(prev[1] - next[1]);
var y = Math.abs(prev[0] - next[0]);

var greatest = x > y ? x : y;

var speedModifier = 0.1;
var speed = Math.ceil(greatest/speedModifier);
return speed; }

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');

/*MOTION*/

h2{
font-size: 40px;
font-family: 'Roboto Mono', monospace;
user-select: none;
}
.motion {
width: 100%;
position: absolute;
left: 50px;

}
/*DESIGNER*/

h3{
font-size: 40px;
font-family: 'Roboto Mono', monospace;
user-select: none;
}

.designer {
width: 100%;
position: absolute;
left: 1200px;
}

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>


</head>



<body>

<div class="motion">
<h2>
motion
</h2>
</div>

<div class="designer">
<h3>
designer
</h3>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>


</body>
</html>

为了避免重叠，你可以开始使用Javascript中称为overlaps连续运行的简单collision detection函数，它检测运动div和设计器div之间的重叠，如下所示：

$(document).ready(function(){
animateDiv();
animateDivTwo();
setInterval(function(){
var $motion = $('.motion');
var $designer = $('.designer');
var isOverlap = overlaps($motion[0], $designer[0]);
if(isOverlap){
$motion.stop(true);
$designer.stop(true);

$motion.animate({ top: $motion.offset().top - 20, left: $motion.offset().left - 20 }, 100, function(){
animateDiv();        
});
$designer.animate({ top: $designer.offset().top + 20, left: $designer.offset().left + 20 }, 100, function(){
animateDivTwo();        
});
}
}, 100);
});
function overlaps(a, b) {
const rect1 = a.getBoundingClientRect();
const rect2 = b.getBoundingClientRect();
const isInHoriztonalBounds =
rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x;
const isInVerticalBounds =
rect1.y < rect2.y + rect2.height && rect1.y + rect1.height > rect2.y;
const isOverlapping = isInHoriztonalBounds && isInVerticalBounds;
return isOverlapping;
}
// MOTION 
function makeNewPosition(){
// Get viewport dimensions (remove the dimension of the div)
var h = $(window).height() - 100;
var w = $(window).width() - 100;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh,nw];    
}
function animateDiv(){
var newq = makeNewPosition();
var oldq = $('.motion').offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);
$('.motion').animate({ top: newq[0], left: newq[1] }, speed, function(){
animateDiv();        
});
};
function animateDivTwo(){
var newq = makeNewPosition();
var oldq = $('.designer').offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);
$('.designer').animate({ top: newq[0], left: newq[1] }, speed, function(){
animateDivTwo(this);        
});
};
function calcSpeed(prev, next) {
var x = Math.abs(prev[1] - next[1]);
var y = Math.abs(prev[0] - next[0]);
var greatest = x > y ? x : y;
var speedModifier = 0.1;
var speed = Math.ceil(greatest/speedModifier);
return speed; }

h2{
font-size: 40px;
font-family: 'Roboto Mono', monospace;
user-select: none;
}
.motion {
position: absolute;
left: 50px;
}
h3{
font-size: 40px;
font-family: 'Roboto Mono', monospace;
user-select: none;
}
.designer {
position: absolute;
left: 1200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="motion">
<h2>
motion
</h2>
</div>
<div class="designer">
<h3>
designer
</h3>
</div>

相关内容

最新更新

热门标签：