版权声明:本人原创文章,转载请注明出处 https://blog.csdn.net/qq_28766729/article/details/84337533
本次用原生js,在小球的碰撞运动上添加了重力效应。并且可以拖拽小球,拖拽的方向和力度大小,决定了小球的初始速度和运动方向
蛮有趣的,大家可以拷贝代码试一试。代码也附带了一些小注释。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript运动</title>
<style>
div{
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background: #b25f27;
border-radius: 50%;
}
span{
width: 16px;
height: 16px;
background: black;
position: absolute;
}
</style>
</head>
<body>
<div></div>
<script>
var oDiv = document.getElementsByTagName("div")[0];
//小球左上方的坐标值
var lastX = oDiv.offsetLeft,
lastY = oDiv.offsetTop;
//拖拽小球的函数
oDiv.onmousedown = function (e) {
clearInterval(this.timer);
var event = e || window.event;
//disX/Y获取的是鼠标点击小球的位置
var disX = event.clientX - this.offsetLeft;
var disY = event.clientY - this.offsetTop;
//获取oDiv对象
var that = this;
var iSpeedX = 0;
var iSpeedY = 0;
document.onmousemove = function(e){
var newLeft = e.clientX - disX;
var newTop = e.clientY - disY;
//由拖动的距离、方向,决定小球的初始速度和方向
iSpeedX = newLeft - lastX;
iSpeedY = newTop - lastY;
lastX = newLeft;
lastY = newTop;
that.style.left = newLeft + "px";
that.style.top = newTop + "px";
};
//松开鼠标时,将前两个事件置空
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
//运行小球运动函数
startMove(that,iSpeedX,iSpeedY);
}
};
//小球碰撞运动函数
function startMove(obj,iSpeedX,iSpeedY) {
clearInterval(obj.timer);
//在Y方向上,给一个重力
var g= 5;
obj.timer = setInterval(function () {
//在Y方向上通过g不断加速
iSpeedY += g;
var newLeft = obj.offsetLeft + iSpeedX;
var newTop = obj.offsetTop + iSpeedY;
if (newTop >= document.documentElement.clientHeight - obj.offsetHeight){
iSpeedY *= -1;
iSpeedY *= 0.8;
iSpeedX *= 0.96;
newTop = document.documentElement.clientHeight - obj.offsetHeight;
}
if (newTop <= 0){
iSpeedY *= -1;
newTop = 0;
iSpeedY *= 0.8;
iSpeedX *= 0.97;
}
if (newLeft >= document.documentElement.clientWidth - obj.offsetWidth){
iSpeedX *= -1;
iSpeedY *= 0.8;
iSpeedX *= 0.97;
newLeft = document.documentElement.clientWidth - obj.offsetWidth;
}
if (newLeft <= 0){
iSpeedX *= -1;
newLeft = 0;
iSpeedY *= 0.8;
iSpeedX *= 0.96;
}
if (Math.abs(iSpeedX) < 1){
iSpeedX = 0;
}
if (Math.abs(iSpeedY) < 1){
iSpeedY = 0;
}
if(iSpeedX == 0 && iSpeedY == 0 && newTop == document.documentElement.clientHeight - obj.clientHeight){
clearInterval(obj.timer);
}
obj.style.left = newLeft + "px";
obj.style.top = newTop + "px";
},30)
}
</script>
</body>
</html>