分享一个用原生JS实现的拖拽碰撞加上重心运动的小Demo，效果如下：
以下是代码实现，欢迎大家复制粘贴及吐槽。
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现各种运动之拖拽碰撞加重心运动</title>
<style>
#div1 {
width: 100px;
height: 100px;
background: red;
position: absolute;
}
div {
width: 3px;
height: 3px;
position: absolute;
background: black;
}
</style>
<script>
var timer = null;
var iSpeedX = 0;
var iSpeedY = 0;
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';
//用当前位置减去上次的位置以计算当前拖动中X和Y轴的速度
iSpeedX = l - lastX;
iSpeedY = t - lastY;
//更新当前点，方便下次计算
lastX = l;
lastY = t;
};
//当鼠标抬起时
document.onmouseup = function () {
//清空移动事件与抬起事件
document.onmousemove = null;
document.onmouseup = null;
//执行碰撞运动
startMove();
};
//当鼠标按下的时候，关闭定时器，以免拖拽与碰撞事件冲突
clearInterval(timer);
};
};
function startMove() {
clearInterval(timer);
timer = setInterval(function () {
var oDiv = document.getElementById('div1');
//将Y轴增加速度，实现重力运动
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;
}
//当X轴的速度绝对值小于0时
if (Math.abs(iSpeedX) < 1) {
//强行终止
iSpeedX = 0;
}
//当Y轴的速度绝对值小于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';
}
}, 30);
}
</script>
</head>
<body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1"></div>
</body>
</html>
