JS碰撞运动实现方法详解


Posted in Javascript onDecember 15, 2016

本文实例分析了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 相关文章推荐
基于jQuery的history历史记录插件
Dec 11 Javascript
简单的两种Extjs formpanel加载数据的方式
Nov 09 Javascript
JavaScript的作用域和块级作用域概念理解
Sep 21 Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 Javascript
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 Javascript
AngularJS中scope的绑定策略实例分析
Oct 30 Javascript
vue2.0 axios跨域并渲染的问题解决方法
Mar 08 Javascript
javascript导出csv文件(excel)的方法示例
Aug 25 Javascript
浅述节点的创建及常见功能的实现
Dec 15 #Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 #Javascript
如何解决hover在ie6中的兼容性问题
Dec 15 #Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 #Javascript
Bootstrap CSS布局之列表
Dec 15 #Javascript
BootStrap整体框架之基础布局组件
Dec 15 #Javascript
JS弹性运动实现方法分析
Dec 15 #Javascript
You might like
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
jquery radio 操作代码
2011/03/16 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
2017/02/19 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
python3学习笔记之多进程分布式小例子
2018/02/13 Python
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
Linux下多个Python版本安装教程
2018/08/15 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
Python socket模块实现的udp通信功能示例
2019/04/10 Python
Python占用的内存优化教程
2019/07/28 Python
Python编程中类与类的关系详解
2019/08/08 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
Python实现随机爬山算法
2021/01/29 Python
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
国际经济贸易专业推荐信
2013/11/06 职场文书
优秀毕业生事迹材料
2014/02/12 职场文书
捐助倡议书范文
2014/04/15 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
学习十八大宣传标语
2014/10/09 职场文书
小学运动会加油稿
2015/07/22 职场文书
护理培训心得体会
2016/01/22 职场文书