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 UI 应用不同Theme的办法
Sep 12 Javascript
用JQuery调用Session的实现代码
Oct 29 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
Jun 29 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
JS库之wow.js使用方法
Sep 14 Javascript
在vue组件中使用axios的方法
Mar 16 Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 Javascript
JS字典Dictionary类定义与用法示例
Feb 01 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
浅述节点的创建及常见功能的实现
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 时间计算问题小结
2009/01/04 PHP
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
JS 实现图片直接下载示例代码
2013/07/22 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
Bootstrap的基本应用要点浅析
2016/12/19 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
Python实现简单字典树的方法
2016/04/29 Python
5款非常棒的Python工具
2018/01/05 Python
python 实现让字典的value 成为列表
2019/12/16 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
建筑安全生产责任书
2014/07/22 职场文书
小学家长学校培训材料
2014/08/24 职场文书
高一军训感想
2015/08/07 职场文书
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang
Python 如何安装Selenium
2021/05/06 Python
Vue鼠标滚轮滚动切换路由效果的实现方法
2021/08/04 Vue.js