1.  

JS九宫格碰撞检测这个东西 以前学过  这次主要是做面试项目web版的win10 桌面图片需要用碰撞检测 再写的时候竟然完全忘记了碰撞检测原理 和怎么写 综合来说还是写的太少  今天再学了一下 理解了 再写个博客

JS九宫格碰撞检测九宫格碰撞检测教程。

链接:http://pan.baidu.com/s/1nuKFEBn 密码:mtc3

JS九宫格碰撞检测函数完整版

  1. 1 1 function pengzhuang(obj1,obj2){
  2. 2 2 var L1=obj1.offsetLeft;
  3. 3 3 var R1=obj1.offsetLeft+obj1.offsetWidth;
  4. 4 4 var T1=obj1.offsetTop;
  5. 5 5 var B1=obj1.offsetTop+obj1.offsetHeight;
  6. 6 6
  7. 7 7 var L2=obj2.offsetLeft;
  8. 8 8 var R2=obj2.offsetLeft+obj2.offsetWidth;
  9. 9 9 var T2=obj2.offsetTop;
  10. 10 10 var B2=obj2.offsetTop+obj2.offsetHeight;
  11. 11 11
  12. 12 // 左排除||右排除||上排除||下排除
  13. 13 12 if(R1<L2||L1>R2||B1<T2||T1>B2){
  14. 14 13 return false;
  15. 15 14 }else{
  16. 16 15 return true;
  17. 17 16 }
  18. 18 17 }

javascript九宫格碰撞检测的更多相关文章

  1. CSS3_元素拖曳原理_设置全局点击捕获_九宫格碰撞检测_自定义滚动条

    拖曳原理: 元素的初始位置 + 鼠标距离差 = 元素最终位置 使元素可以拖动 function dragElement(obj){ obj.onmousedown = function(e){ e = ...

  2. javascript判断碰撞检测

    javascript判断碰撞检测 点与矩形的碰撞检测 <pre> /** * * @param x1 点 * @param y1 点 * @param x2 矩形view x * @par ...

  3. JavaScript动画-碰撞检测

    ▓▓▓▓▓▓ 大致介绍 碰撞检测是指在页面中有多个元素时,拖拽一个元素会出现碰撞问题,碰撞检测是以模拟拖拽和磁性吸附中的范围限定为基础的 效果:碰撞检测 ▓▓▓▓▓▓ 碰撞检测 先来看看碰撞检测的原理 ...

  4. JavaScript实现碰撞检测(分离轴定理)

    概述 分离轴定理是一项用于检测碰撞的算法.其适用范围较广,涵盖检测圆与多边形,多边形与多边形的碰撞:缺点在于无法检测凹多边形的碰撞.本demo使用Js进行算法实现,HTML5 canvas进行渲染. ...

  5. javascript动画系列第三篇——碰撞检测

    前面的话 前面分别介绍了拖拽模拟和磁性吸附,当可视区域内存在多个可拖拽元素,就出现碰撞检测的问题,这也是javascript动画的一个经典问题.本篇将详细介绍碰撞检测 原理介绍 碰撞检测的方法有很多, ...

  6. 使用 JavaScript 和 canvas 做精确的像素碰撞检测

    原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...

  7. javascript中矩形的碰撞检测---- 计算碰撞部分的面积

    今天在做一个拖拽改变元素排序的东西的时候,在做被拖动元素同时碰撞到两个元素时,究竟应该与哪个元素交换位置的问题上,纠结到崩溃,实在是想不到别的办法去做了,只能去想办法计算碰撞的面积. 这应该不是最合适 ...

  8. js九宫格的碰撞检测

    说来惭愧,我一直以为四四方方的拖拽碰撞检测是一个比较容易的事情,后来试过一次,真是让我耗费了无数的脑细胞,原理其实不难,但是具体做起来可就让我很恶心,这可能跟我驾驭的代码数量有关系,我一般也就写半屏幕 ...

  9. (Demo分享)利用JavaScript(JS)实现一个九宫格拖拽功能

    利用JavaScript(JS)实现一个九宫格拖拽功能   Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...

随机推荐

  1. JAVA 基于Jusup爬虫

    java爬虫核心:httpclient slf4j jsoup slf4j 配置文件log4j.properties log4j.rootlogger=DEBUG,A1log4j.logger.cn. ...

  2. Ⅱ Finite Markov Decision Processes

    Dictum:  Is the true wisdom fortitude ambition. -- Napoleon 马尔可夫决策过程(Markov Decision Processes, MDPs ...

  3. vue学习笔记(六) ----- vue组件

    一.模块化与组件化 模块化的定义 模块化在Node中是一个规范,定义一些模块的相关的规则,从代码角度上来说,方便做区别,如果不使用模块化,写在js文件中不利于后期维护和扩展,从代码的层面上就把相关的功 ...

  4. 【总结】java集合

    一.collection 1.List接口和Set接口都继承自Collection接口,Collection接口继承Iterable接口(Iterable有一个Iterator方法),即可迭代的:Co ...

  5. C语言基础-C简介

    C语言简介  C 语言是一种通用的高级语言,最初是由丹尼斯·里奇在贝尔实验室为开发 UNIX 操作系统而设计的.C 语言最开始是于 1972 年在 DEC PDP-11 计算机上被首次实现. 在 19 ...

  6. Flask常用API

    Flask常用API 1.os ​ 拼接路径:pathname = os.path.join(basepath, filename) 获得文件名后缀:suffix = os.path.splitext ...

  7. c++11-17 模板核心知识(三)—— 非类型模板参数 Nontype Template Parameters

    类模板的非类型模板参数 函数模板的非类型模板参数 限制 使用auto推断非类型模板参数 模板参数不一定非得是类型,它们还可以是普通的数值.我们仍然使用前面文章的Stack的例子. 类模板的非类型模板参 ...

  8. C/C++模运算(正负整数)

    模运算 模运算:又称为取余运算 正整数的模运算 对于正整数a,b 如果\(a=q\times b+r\)其中\(0\le r < b\) 则有\(a \bmod b=r\)即 \(a\%b=r\ ...

  9. php之策略模式

    策略模式:封装算法,选择所用具体实现的置业由客户对象承担. 将算法具体类,然后互相替换,不影响客户. <?php /** * 设计模式之策略模式 * User: 小狗蛋儿 * Date: 201 ...

  10. 1 Prism概述

    架构目标 以模块化方式开发应用,这些模块被独立团队用WPF技术开发,集成,部署,这是使用Prism的最大好处. 最小化交叉团队依赖.允许团队在不同领域专业化,比如UI设计,商业逻辑实现,基础代码开发 ...