教你如何做小程序直播_JS碰撞运动完成方法详解

JS碰撞运动实现方法详解       这篇文章主要介绍了JS碰撞运动实现方法,详细分析了碰撞运动的原理及相应的javascript实现技巧,需要的朋友可以参考下

本文实例分析了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程序设计有所帮助。