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 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
jquery $(document).ready() 与window.onload的区别
Dec 28 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
js中使用replace方法完成某个字符的转换
Aug 20 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
jQuery中的deferred对象和extend方法详解
May 08 jQuery
Vue header组件开发详解
Jan 26 Javascript
vue多次循环操作示例
Feb 08 Javascript
vue搜索和vue模糊搜索代码实例
May 07 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 Javascript
canvas多重阴影发光效果实现
Apr 20 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 和 COM
2006/10/09 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
写给想学习Javascript的朋友一点学习经验小结
2010/11/23 Javascript
js写一个字符串转成驼峰的实例
2013/06/21 Javascript
jQuery使用each方法与for语句遍历数组示例
2016/06/16 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
2017/05/20 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
浅谈sass在vue注意的地方
2017/08/10 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
python实现识别相似图片小结
2016/02/22 Python
python3.5实现socket通讯示例(TCP)
2017/02/07 Python
python生成n个元素的全组合方法
2018/11/13 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
Django调用百度AI接口实现人脸注册登录代码实例
2020/04/23 Python
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
Staples美国官方网站:办公用品一站式采购
2016/07/28 全球购物
代办委托书怎样写
2014/04/08 职场文书
论文评语大全
2014/04/29 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
遗嘱格式范本
2015/08/07 职场文书
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS