编程 Javascript

js实现碰撞检测特效代码分享

Posted in Javascript onOctober 16, 2016

自己做了碰撞检测的封装,先看下实例demo,在看封装

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>碰撞检测</title>
 <style type="text/css">
  *{
  margin: 0;
  padding: 0;
  }
  #divA,#divB{
  width: 200px;
  height: 200px;
  background-color: purple;
  font-size: 50px;
  line-height: 200px;
  text-align: center;
  position: absolute;
  color: #fff;
  }
  #divA{
  left: 30px;
  top: 30px;
  z-index: 5;
  }
  #divB{
  left: 300px;
  top: 300px;
  }
 </style>
 </head>
 <body>
 <div id="divA">A</div>
 <div id="divB">B</div>
 </body>
 <script type="text/javascript">
 var divA = document.getElementById("divA");
 var divB = document.getElementById("divB");
 
 
 divA.onmousedown = function (e) {
  
  var event1 = window.event || e;
  
  
  var startX = event1.clientX;
  
  var startY = event1.clientY;
  
  document.onmousemove = function (j) {
  
  var event2 = window.event || j;
  
  var endX = event2.clientX;
  var endY = event2.clientY;
  
  divA.style.left = divA.offsetLeft + (endX - startX) + "px";
  divA.style.top = divA.offsetTop + (endY - startY) + "px";
  
  startX = endX;
  startY = endY;
  
  if (isCrash(divA,divB) == true) {
   
   divA.style.backgroundColor = "red";
  } else{
   
   divA.style.backgroundColor = "purple";
  };
  }
 }
 
 
 divA.onmouseup = function () {
  
  document.onmousemove = null;
 }
 
 
 function isCrash (obj1,obj2) {
  
  var boolCrash = true;
  
  var left1 = obj1.offsetLeft;
  
  var right1 = obj1.offsetLeft + obj1.offsetWidth;
  
  var top1 = obj1.offsetTop;
  
  var bottom1 = obj1.offsetTop + obj1.offsetHeight;
  
  var left2 = obj2.offsetLeft;
  
  var right2 = obj2.offsetLeft + obj2.offsetWidth;
  
  var top2 = obj2.offsetTop;
  
  var bottom2 = obj2.offsetTop + obj2.offsetHeight;
  
  
  if (right1 > left2 && left1 < right2 && bottom1 > top2 && top1 < bottom2) {
  boolCrash = true;
  } else{
  boolCrash = false;
  }
  return boolCrash;
 }
 
 </script>
</html>

函数封装

function isCrash (obj1,obj2) {
  
  var boolCrash = true;//假设true为碰撞
  
  var left1 = obj1.offsetLeft;
  
  var right1 = obj1.offsetLeft + obj1.offsetWidth;
  
  var top1 = obj1.offsetTop;
  
  var bottom1 = obj1.offsetTop + obj1.offsetHeight;
 
  var left2 = obj2.offsetLeft;
  
  var right2 = obj2.offsetLeft + obj2.offsetWidth;
  
  var top2 = obj2.offsetTop;
  
  var bottom2 = obj2.offsetTop + obj2.offsetHeight;
  
  
  if (right1 > left2 && left1 < right2 && bottom1 > top2 && top1 < bottom2) {
  boolCrash = true;
  } else{
  boolCrash = false;
  }
  return boolCrash;
 }

js实现碰撞检测特效代码分享

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

表单的一些基本用法与技巧

Jul 15 Javascript

Javascript this关键字使用分析

Oct 21 Javascript

js function定义函数使用心得

Apr 15 Javascript

7款风格新颖的jQuery/CSS3菜单导航分享

Apr 23 Javascript

jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全

May 27 Javascript

js css 实现遮罩层覆盖其他页面元素附图

Sep 22 Javascript

js的touch事件的实际引用

Oct 13 Javascript

js进行表单验证实例分析

Feb 10 Javascript

vue采用EventBus实现跨组件通信及注意事项小结

Jun 14 Javascript

小程序实现页面顶部选项卡效果

Nov 06 Javascript

Vuepress 搭建带评论功能的静态博客的实现

Feb 17 Javascript

微信小程序的注册页面包含倒计时验证码、获取用户信息

May 22 Javascript

js+css3制作时钟特效

Oct 16 #Javascript

js实现可旋转的立方体模型

Oct 16 #Javascript

移动端滑动插件Swipe教程

Oct 16 #Javascript

类似于QQ的右滑删除效果的实现方法

Oct 16 #Javascript

js实现点击图片自动提交action的简单方法

Oct 16 #Javascript

jQuery监听文件上传实现进度条效果的方法

Oct 16 #Javascript

浅谈js对象的创建和对6种继承模式的理解和遐想

Oct 16 #Javascript

You might like

PHP 5.0对象模型深度探索之绑定

2006/09/05 PHP

用PHP实现将GB编码转换为UTF8

2006/11/25 PHP

php计算几分钟前、几小时前、几天前的几个函数、类分享

2014/04/09 PHP

php目录遍历函数opendir用法实例

2014/11/20 PHP

thinkPHP5实现的查询数据库并返回json数据实例

2017/10/23 PHP

TP5框架实现上传多张图片的方法分析

2020/03/29 PHP

PHP const定义常量及global定义全局常量实例解析

2020/05/28 PHP

聊聊 PHP 8 新特性 Attributes

2020/08/19 PHP

javascript 对象的定义方法

2007/01/10 Javascript

基于jquery的让textarea自适应高度的插件

2010/08/03 Javascript

JavaScript高级程序设计错误处理与调试学习笔记

2011/09/10 Javascript

jQuery ajax dataType值为text json探索分享

2013/09/23 Javascript

javascript自定义startWith()和endWith()的两种方法

2013/11/11 Javascript

如何防止回车(enter)键提交表单

2014/05/11 Javascript

用C/C++来实现 Node.js 的模块（一）

2014/09/24 Javascript

javascript模拟命名空间

2015/04/17 Javascript

浅析JavaScript中的对象类型Object

2016/05/26 Javascript

JavaScript实现输入框与清空按钮联动效果

2016/09/09 Javascript

JS实现队列的先进先出功能示例

2017/05/10 Javascript

nodejs async异步常用函数总结（推荐）

2017/11/17 NodeJs

JS基于for语句编写的九九乘法表示例

2018/01/04 Javascript

js如何验证密码强度

2020/03/18 Javascript

[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场

2018/04/10 DOTA

django认证系统实现自定义权限管理的方法

2018/07/16 Python

Python3实现二叉树的最大深度

2019/09/30 Python

详解python百行有效代码实现汉诺塔小游戏(简约版)

2020/10/30 Python

html5实现微信打飞机游戏

2014/03/27 HTML / CSS

潘多拉珠宝英国官方网上商店：PANDORA英国

2018/06/12 全球购物

英国家用电器折扣网站：Electrical Discount UK

2018/09/17 全球购物

小学生班会演讲稿

2014/01/09 职场文书

采购类个人求职的自我评价

2014/02/18 职场文书

群众路线教育实践活动个人对照检查材料思想汇报（社区班子）

2014/10/06 职场文书

一个都不能少观后感

2015/06/04 职场文书

TV动画「神渣☆爱豆」公开第一弹主视觉图

2022/03/21 日漫

在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题

2022/04/29 Servers

Tomcat安装使用及部署Web项目的3种方法汇总

2022/08/14 Servers