编程 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中sort()方法的用法

Nov 04 Javascript

JavaScript 自动完成脚本整理(33个)

Oct 20 Javascript

ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能

Feb 03 Javascript

Chosen 基于jquery的选择框插件使用方法

May 30 Javascript

javascript实现div浮动在网页最顶上并带关闭按钮效果实例

Aug 13 Javascript

javascript history对象(历史记录)使用方法(实现浏览器前进后退)

Jan 07 Javascript

php和js对数据库图片进行等比缩放示例

Apr 28 Javascript

JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】

Oct 17 Javascript

解决使用vue.js路由后失效的问题

Mar 17 Javascript

小程序云开发实战小结

Oct 25 Javascript

layer 刷新某个页面的实现方法

Sep 05 Javascript

js实现简单五子棋游戏

May 28 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 $_SERVER相关参数判断是否支持Rewrite模块

2013/09/26 PHP

跟我学Laravel之安装Laravel

2014/10/15 PHP

php采集自中央气象台范围覆盖全国的天气预报代码实例

2015/01/04 PHP

php正则匹配文章中的远程图片地址并下载图片至本地

2015/09/29 PHP

PHP Swoole异步MySQL客户端实现方法示例

2019/10/24 PHP

基于JQuery的类似新浪微博展示信息效果的代码

2012/07/23 Javascript

js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS

2013/11/18 Javascript

JavaScript获取Url里的参数

2014/12/18 Javascript

js实现一个链接打开两个链接地址的方法

2015/05/12 Javascript

js实现对ajax请求面向对象的封装

2016/01/08 Javascript

纯js实现瀑布流布局及ajax动态新增数据

2016/04/07 Javascript

老生常谈关于JavaScript的类的继承

2016/06/24 Javascript

JavaScript之生成器_动力节点Java学院整理

2017/06/30 Javascript

老生常谈js中的MVC

2017/07/25 Javascript

Node层模拟实现multipart表单的文件上传示例

2018/01/02 Javascript

基于vue循环列表时点击跳转页面的方法

2018/08/31 Javascript

详解webpack+ES6+Sass搭建多页面应用

2018/11/05 Javascript

vue实现吸顶、锚点和滚动高亮按钮效果

2019/10/21 Javascript

原生js实现滑块区间组件

2021/01/20 Javascript

[42:06]2019国际邀请赛全明星赛 8.23

2019/09/05 DOTA

[01:54]TI珍贵瞬间系列（五）：压力

2020/08/29 DOTA

Python爬虫模拟登录带验证码网站

2016/01/22 Python

Python使用PIL模块生成随机验证码

2017/11/21 Python

Python3.5装饰器原理及应用实例详解

2019/04/30 Python

详解python实现小波变换的一个简单例子

2019/07/18 Python

pytorch实现线性拟合方式

2020/01/15 Python

Pytorch中的自动求梯度机制和Variable类实例

2020/02/29 Python

Python request中文乱码问题解决方案

2020/09/17 Python

Street One瑞士：德国现代时装公司

2019/10/09 全球购物

Monki官网：斯堪的纳维亚的独立时尚品牌

2020/11/09 全球购物

Envie de Fraise意大利：法国网上推出的孕妇装品牌

2020/10/18 全球购物

医药销售自荐书

2014/05/29 职场文书

企业宣传策划方案

2014/05/29 职场文书

小学师德师风演讲稿

2014/09/02 职场文书

法人代表证明书格式

2014/10/01 职场文书

pdf论文中python画的图Type 3 fonts字体不兼容的解决方案

2021/04/24 Python