JS碰撞运动实现方法详解
2016-12-15 14:25
1071 查看
本文实例分析了JS碰撞运动实现方法。分享给大家供大家参考,具体如下:
描述:撞到目标点弹回来(速度反转)
一、无重力的漂浮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程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- JS小球抛物线轨迹运动的两种实现方法详解
- JS实现多物体运动的方法详解
- js继承实现方法详解
- JSPatch实现原理详解:让JS调用/替换任意OC方法
- JS实现焦点图轮播效果的方法详解
- (一)原生JS实现判断碰撞的方法!
- JS实现判断碰撞的方法
- JS延时提示框实现方法详解
- D3.js实现直方图的方法详解
- D3.js实现折线图的方法详解
- JS实现滑动门效果的方法详解
- js实现同一页面多个运动效果的方法
- js实现跨域的方法实例详解
- js 实现一些跨浏览器的事件方法详解及实例
- js实现运动logo图片效果及运动元素对象sportBox使用方法
- js实现跨域的方法实例详解
- JS实现数字转换为货币汉字大写数字的方法详解
- javascript实现10个球随机运动、碰撞实例详解
- JS弹性运动实现方法分析
- 在js里怎么实现Xcode里的callFuncN方法(详解)