编程 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 相关文章推荐

js 对象是否存在判断

Jul 15 Javascript

通过JS自动隐藏手机浏览器的地址栏实现原理与代码

Jan 02 Javascript

深入理解JavaScript系列（29）：设计模式之装饰者模式详解

Mar 03 Javascript

JavaScript实现将数组中所有元素连接成一个字符串的方法

Apr 06 Javascript

JavaScript中的splice()方法使用详解

Jun 09 Javascript

jquery带翻页动画的电子杂志代码分享

Aug 21 Javascript

IE和Firefox之间在JavaScript语法上的差异

Apr 22 Javascript

jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】

Mar 07 Javascript

详解ES6中的三种异步解决方案

Jun 28 Javascript

微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)

Jan 24 Javascript

如何基于vue-cli3.0构建功能完善的移动端架子

Apr 24 Javascript

详解vue-video-player使用心得（兼容m3u8）

Aug 23 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

第十节--抽象方法和抽象类

2006/11/16 PHP

php 前一天或后一天的日期

2008/06/28 PHP

深入php函数file_get_contents超时处理的方法详解

2013/06/03 PHP

优化WordPress中文章与评论的时间显示

2016/01/12 PHP

PHP错误处理函数

2016/04/03 PHP

php中foreach结合curl实现多线程的方法分析

2016/09/22 PHP

document.compatMode介绍

2009/05/21 Javascript

Google排名中的10个最著名的 JavaScript库

2010/04/27 Javascript

JS 两个字符串时间的天数差计算

2013/08/25 Javascript

将两个div左右并列显示并实现点击标题切换内容

2013/10/22 Javascript

jQuery获取上传文件的名称的正则表达式

2015/05/21 Javascript

js实现页面跳转的几种方法小结

2016/05/16 Javascript

vue+element实现批量删除功能的示例

2018/02/28 Javascript

js实现点击按钮复制文本功能

2020/07/20 Javascript

layer弹出层显示在top顶层的方法

2019/09/11 Javascript

jquery 回调操作实例分析【回调成功与回调失败的情况】

2019/09/27 jQuery

vue中template的三种写法示例

2020/10/21 Javascript

原生JavaScript实现幻灯片效果

2021/02/19 Javascript

实例解析Python的Twisted框架中Deferred对象的用法

2016/05/25 Python

windows10系统中安装python3.x+scrapy教程

2016/11/08 Python

python 生成器生成杨辉三角的方法(必看)

2017/04/10 Python

Python语言描述最大连续子序列和

2017/12/05 Python

python基于ID3思想的决策树

2018/01/03 Python

使用 python pyautogui实现鼠标键盘控制功能

2019/08/04 Python

python DataFrame转dict字典过程详解

2019/12/26 Python

python实现双色球随机选号

2020/01/01 Python

Pytorch提取模型特征向量保存至csv的例子

2020/01/03 Python

Europcar意大利：汽车租赁

2019/07/07 全球购物

若干个Java基础面试题

2015/05/19 面试题

水电维修专业推荐信

2014/09/06 职场文书

幼儿园感谢信

2015/01/21 职场文书

小学班主任培训心得体会

2016/01/07 职场文书

《春酒》教学反思

2016/02/22 职场文书

Win11电源已接通但未充电怎么办？Win11电源已接通未充电的解决方法

2022/04/05 数码科技

Python按顺序遍历并读取文件夹中文件

2022/04/29 Python

MySQL的prepare使用以及遇到的bug

2022/05/11 MySQL