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 相关文章推荐
JS 操作符整理[推荐收藏]
Nov 15 Javascript
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
Sep 21 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
vue登录路由验证的实现
Dec 13 Javascript
vue项目关闭eslint校验
Mar 21 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
React Router v4 入坑指南(小结)
Apr 08 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
vuejs选中当前样式active的实例
Aug 22 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连接数据库代码应用分析
2011/05/29 PHP
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
ThinkPHP中I(),U(),$this-&gt;post()等函数用法
2014/11/22 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
javascript 限制输入脚本大全
2009/11/03 Javascript
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
jQuery实现炫酷的鼠标轨迹特效
2015/02/01 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
2017/02/23 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
JS为什么说async/await是generator的语法糖详解
2019/07/11 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
python实现学生信息管理系统
2020/04/05 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
Pycharm小白级简单使用教程
2020/01/08 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
python中urllib.request和requests的使用及区别详解
2020/05/05 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
统计岗位职责
2014/02/21 职场文书
中国梦读书活动总结
2014/07/10 职场文书
家庭教育的心得体会
2014/09/01 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
2015年读书月活动总结
2015/03/26 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
如何拟写通知正文?
2019/04/02 职场文书
Python 循环读取数据内存不足的解决方案
2021/05/25 Python