本文详细解析 JavaScript 中实现元素碰撞运动的三种模式：无重力漂浮、带重力反弹以及支持鼠标拖拽的交互。通过速度反转、摩擦系数衰减及位置更新逻辑，展示如何利用 setInterval 控制 DOM 元素运动，并处理边界检测与小数精度问题，提供完整可运行的代码示例。
JavaScript 碰撞运动概述
本文通过具体实例分析 JavaScript 中碰撞运动的实现原理，旨在为开发者提供参考与学习素材。
核心逻辑描述：当元素撞击到目标边界时，通过反转速度方向实现反弹效果。
无重力漂浮效果实现
第一种场景：无重力环境下的漂浮 div 运动效果。
var div1=document.getElementById("div1");
var iSpeedX=6;
var iSpeedY=8;
setInterval(function(){
var l=div1.offsetLeft+iSpeedX;
var t=div1.offsetTop+iSpeedY;
if(t>=document.documentElement.clientHeight-div1.offsetHeight){
iSpeedY*=-1; //速度反向
t=document.documentElement.clientHeight-div1.offsetHeight; //超出下边界时，把它拉回到下边界，不然右边滚动条会闪动出现一下
}
else if(t<=0){
iSpeedY*=-1;
t=0;
}
if(l>=document.documentElement.clientWidth-div1.offsetWidth){
iSpeedX*=-1;
l=document.documentElement.clientWidth-div1.offsetWidthl;
}
else if(l<=0){
iSpeedX*=-1;
l=0;
}
div1.style.left=l+'px';
div1.style.top=t+'px';
},30);
加入重力与碰撞反弹
第二种场景：在碰撞基础上增加重力效果的实现方式。
重力的模拟机制：通过不断累加 Y 轴的速度值，使元素在垂直方向上加速下落。
setInterval(function(){
iSpeedY+=3;
var l=div1.offsetLeft+iSpeedX;
var t=div1.offsetTop+iSpeedY;
if(t>=document.documentElement.clientHeight-div1.offsetHeight){
iSpeedY*=-0.8;
iSpeedX*=0.8; //横向速度也要变慢，否则碰到地面时会停不下来
t=document.documentElement.clientHeight-div1.offsetHeight;
}
else if(t<=0){
iSpeedY*=-1;
iSpeedX*=0.8;
t=0;
}
if(l>=document.documentElement.clientWidth-div1.offsetWidth){
iSpeedX*=-0.8;
l=document.documentElement.clientWidth-div1.offsetWidthl;
}
else if(l<=0){
iSpeedX*=-0.8;
l=0;
}
if(Math.abs(iSpeedX)<1){ //解决小数的问题，因为假如速度是小数，正的没问题，100(iSpeed=0.5)-->100.5-->100，负的100(iSpeed=-0.5)--->99.5-->99，可能会出现x轴反向时滑行
iSpeedX=0;
}
if(Math.abs(iSpeedY)<1){
iSpeedY=0;
}
div1.style.left=l+'px';
div1.style.top=t+'px';
},30);
支持鼠标拖拽的交互控制
第三种场景：结合碰撞、重力以及鼠标拖拽交互的综合效果。
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var lastX=0;
var lastY=0;
oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;
var disX=oEvent.clientX-oDiv.offsetLeft;
var disY=oEvent.clientY-oDiv.offsetTop;
document.onmousemove=function (ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
iSpeedX=l-lastX; //拖拽结束时的速度
iSpeedY=t-lastY;
lastX=l; //更新上一个点的位置
lastY=t;
};
document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
startMove(); //拖拽结束时执行
};
clearInterval(timer);
};
};
var timer=null;
var iSpeedX=0;
var iSpeedY=0;
function startMove()
{
clearInterval(timer);
timer=setInterval(function (){
var oDiv=document.getElementById('div1');
iSpeedY+=3;
var l=oDiv.offsetLeft+iSpeedX;
var t=oDiv.offsetTop+iSpeedY;
if(t>=document.documentElement.clientHeight-oDiv.offsetHeight)
{
iSpeedY*=-0.8;
iSpeedX*=0.8;
t=document.documentElement.clientHeight-oDiv.offsetHeight;
}
else if(t<=0)
{
iSpeedY*=-1;
iSpeedX*=0.8;
t=0;
}
if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)
{
iSpeedX*=-0.8;
l=document.documentElement.clientWidth-oDiv.offsetWidth;
}
else if(l<=0)
{
iSpeedX*=-0.8;
l=0;
}
if(Math.abs(iSpeedX)<1)
{
iSpeedX=0;
}
if(Math.abs(iSpeedY)<1)
{
iSpeedY=0;
}
if(iSpeedX==0 && iSpeedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight)
{
clearInterval(timer);
}
else
{
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
}
document.title=iSpeedX;
}, 30);
}
如需了解更多 JavaScript 相关技术，建议查阅本站专题：《JavaScript 运动效果与技巧汇总》、《JavaScript 切换特效与技巧总结》、《JavaScript 查找算法技巧总结》、《JavaScript 动画特效与技巧汇总》、《JavaScript 错误与调试技巧总结》、《JavaScript 数据结构与算法技巧总结》、《JavaScript 遍历算法与技巧总结》及《JavaScript 数学运算用法总结》。
希望上述关于 JavaScript 程序设计的讲解能对读者有所帮助。