拖拽+碰撞+重力下的运动damp.html

最新推荐文章于 2022-07-11 06:55:56 发布

大海和云朵

最新推荐文章于 2022-07-11 06:55:56 发布

阅读量962

点赞数

分类专栏： JS小作品

本文链接：https://blog.csdn.net/qq_29592901/article/details/52420117

版权

JS小作品专栏收录该内容

7 篇文章 0 订阅

订阅专栏

源代码：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1{width:100px;height:100px;background: red;position:absolute;}
div{width:2px;height:2px;background: black;position:absolute;}
</style>
<script>
window.οnlοad=function(){
var oDiv=document.getElementById('div1');
var lastX=0;
var lastY=0;
oDiv.οnmοusedοwn=function(ev){
var oEvent=ev||event;
var disX=oEvent.clientX-oDiv.offsetLeft;
var disY=oEvent.clientY-oDiv.offsetTop;
document.οnmοusemοve=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.title='x='+iSpeedX+',y='+iSpeedY;
/*var oBox=document.createElement('div');
oBox.style.left=l+'px';
oBox.style.top=t+'px';
document.body.appendChild(oBox);*/

};
document.οnmοuseup=function(){
document.οnmοusemοve=null;
document.οnmοuseup=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){

}
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
},30);
}
</script>
</head>
<body>
<input id="ipt1" type="button" value="开始运动" οnclick="startMove()">
<div id="div1"></div>
</body>
</html>

1、弹性运动：

1.1、加减速运动：速度不断增加或减少；速度减小到负值，会向反方向运动。

1.2、弹性运动：在目标点左边加速，在目标点右边减速；根据距离计算加速度。（情景想象成弹性橡皮筋小球）

1.3、摩擦力：速度不断减小（策略是乘上小数）

1.4、带摩擦力的弹性运动：弹性运动+摩擦力

1.5、弹性公式：速度+=（目标值-oDiv.offsetLeft）/5 速度*=0.7

1.6、无法到达指定位置（小数误差问题）如何解决？速度无法取整，使用变态方法----变量

1.7、弹性运动的问题：运动过界

2、碰撞运动

2.1、撞到目标点，速度反转；无重力的漂浮Div:速度反转、滚动条闪烁的问题（过界后直接拉回来）

2.2、加入重力：反转速度（*-1）的同时，减小速度（*小数）；纵向碰撞，横向速度也减小（因为受力不是垂直的）

横向速度小数问题（负数）

2.3、鼠标拖拽：两点间距离求出速度。

3、运动终止条件：距离够近，速度够小。

大海和云朵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
拖拽+碰撞+重力下的运动damp.html

#div1{width:100px;height:100px;background: red;position:absolute;} div{width:2px;height:2px;background: black;position:absolute;} wi
复制链接

扫一扫