首先我们应用上次的内容——方块拖拽，利用方块拖拽来让两个方块进行碰撞。

我们可以先定义两个正方形方块，红色的div1,绿色的div2,我们来实现当div1碰撞div2时div2的颜色变为黄色

HTML代码如下：定义方块

 1 <!DOCTYPE html>

 2 <html lang="en">

 3

 4 <head>

 5     <meta charset="UTF-8">

 6     <meta http-equiv="X-UA-Compatible" content="IE=edge">

 7     <meta name="viewport" content="width=device-width, initial-scale=1.0">

 8     <title>Document</title>

 9     <style>

10         body {

11             margin: 0;

12         }

13         #div1 {

14             width: 100px;

15             height: 100px;

16             background: red;

17             position: absolute;

18             left: 0;

19             top: 0;

20         }

21

22         #div2 {

23             width: 100px;

24             height: 100px;

25             background: green;

26             position: absolute;

27             left: 500px;

28             top: 200px;

29         }

30     </style>

31 </head>

32

33 <body>

34 <div id="div1"></div>

35 <div id="div2"></div>

36 </body>

37

38 </html>

利用上个文章的的拖拽内容：令div1可以拖拽

 1 <script>

 2     var div1 = document.getElementById('div1')

 3     var div2 = document.getElementById('div2')

 4

 5     div1.onmousedown = function (event) {

 6         var chaX = event.clientX - div1.offsetLeft

 7         var chaY = event.clientY - div1.offsetTop

 8

 9         document.onmousemove = function (event) {

10             div1.style.left = event.clientX - chaX + 'px'

11             div1.style.top = event.clientY - chaY + 'px'

12         }

13

14         document.onmouseup = function () {

15             document.onmousemove = null

16         }

17

18

19     }

20

21

22 </script>

因为我们每次拖拽都要判断是否碰撞，我们的碰撞代码应该放在移动的里面

添加后：

 1 <script>

 2     var div1 = document.getElementById('div1')

 3     var div2 = document.getElementById('div2')

 4

 5     div1.onmousedown = function (event) {

 6         var chaX = event.clientX - div1.offsetLeft

 7         var chaY = event.clientY - div1.offsetTop

 8

 9         document.onmousemove = function (event) {

10             div1.style.left = event.clientX - chaX + 'px'

11             div1.style.top = event.clientY - chaY + 'px'

12

13             if (div1.offsetLeft + div1.offsetWidth < div2.offsetLeft ||

14                 div2.offsetLeft + div2.offsetWidth < div1.offsetLeft ||

15                 div1.offsetTop + div1.offsetHeight < div2.offsetTop ||

16                 div2.offsetTop + div2.offsetHeight < div1.offsetTop

17             ) {

18                 div2.style.backgroundColor = ''

19             } else {

20                 div2.style.backgroundColor = 'yellow'

21             }

22

23         }

24         document.onmouseup = function () {

25             document.onmousemove = null

26         }

27     }

28

29 </script>

可以看到我们在移动的代码里添加了判断条件

让div1的左边距加上div1的宽度小于div2的左边距，让div2的左边距加上div2的宽度小于div1的左边距，让div1的上边距加上div1的高度小于div2的上边距，让div2的上边距加上div2的高度小于div1的上边距，满足这些条件就是未碰上。

用JS实现方块碰撞的更多相关文章

  1. js实现方块弹珠游戏

    下载地址:https://files.cnblogs.com/files/liumaowu/%E5%BC%B9%E4%B8%80%E5%BC%B9%E6%89%93%E6%96%B9%E5%9D%97 ...

  2. js实现方块的碰撞检测

    文章地址:https://www.cnblogs.com/sandraryan/ 个人感觉.方块的碰撞检测比圆形麻烦~~ <!DOCTYPE html> <html lang=&qu ...

  3. js实现小球碰撞游戏

    效果图:  效果图消失只是截的gif图的问题 源码: <!DOCTYPE html> <html lang="en"> <head> <m ...

  4. (原)用pixi.js 实现 方块阵点击后原地自转效果

    源码 各位,请教一个问题,我这个还有BUG,我是想实现,点击一下可以 停止转动,然后再点一下重新转动.而不是一直加速,有没有什么好办法?  PS:问题已经解决,谢谢评论的大神@Antineutrino ...

  5. js 拖拽 碰撞 + 重力 运动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. three.js raycaster射线碰撞的坑 （当canvas大小 不是屏幕大小是解决拾取物体的办法）

    这里只是记录一下坑,方便查阅,内容主要援引自:three.js Raycaster 射线拾取 canvas不占满整屏时射线拾取存在偏差 1. 世界坐标系: 世界坐标系位于屏幕的中心(0,0,0),往右 ...

  7. Canvas+Js制作动量守恒的小球碰撞

    目的:通过js实现小球碰撞并实现动量守恒 canvas我们就不多说了,有用着呢. 我们可以通过canvas画2D图形(圆.方块.三角形等等)3D图形(球体.正方体等待). 当然这只是基础的皮毛而已,c ...

  8. 前端学习：JS面向对象知识学习（图解）

    前端学习:JS面向对象知识学习(图解) 前端学习:JS(面向对象)代码笔记 JS面向对象图解知识全览 创建类和对象 方式1:使用Object()函数 方式2:使用自变量 方式3:使用工厂函数 创建多个 ...

  9. VGA详解及色块碰撞示例

    引言 VGA:video Graphics array,视频图形阵列,阴极射线显像管(CRT)显示器时代产物,很多老显卡.笔记本电脑.投影仪所用接口,已经比较过时. CRT是模拟设备,所以VGA也采用 ...

随机推荐

  1. Envoy实现.NET架构的网关（二）基于控制平面的动态配置

    什么是控制平面 上一篇我们讲了文件系统的动态配置,这次我们来看看通过Control Panel来配置Envoy.控制平面就是一个提供Envoy配置信息的单独服务,我们可以通过这个服务来修改Envoy的 ...

  2. 6.深入TiDB：乐观事务

    本文基于 TiDB release-5.1进行分析,需要用到 Go 1.16以后的版本 我的博客地址:: https://www.luozhiyun.com/archives/620 事务模型概述 由 ...

  3. Spring Cloud Alibaba 使用Feign进行服务消费

    为什么使用Feign? Feign可以把Rest的请求进行隐藏,伪装成类似SpringMVC的Controller一样.你不用再自己拼接url,拼接参数等等操作,一切都交给Feign去做. 使用Fei ...

  4. 使用Netty和动态代理实现一个简单的RPC

    RPC(remote procedure call)远程过程调用 RPC是为了在分布式应用中,两台主机的Java进程进行通信,当A主机调用B主机的方法时,过程简洁,就像是调用自己进程里的方法一样.RP ...

  5. go 集合

    p.p1 { margin: 0; font: 12px ".PingFang SC"; color: rgba(69, 69, 69, 1) } span.s1 { font: ...

  6. 大数据学习——搭建第一台Hadoop主机

    类型:学习笔记 参考:尚硅谷大数据系列教程 工具准备 1.VMware 2.CentOS 7 最小安装版 3.远程工具推荐使用 FinalShell 安装系统 1.打开VMware,根据自己的情况配置 ...

  7. ExtJS 去除水印

    在路径(根目录/ext/classic(或者modern)/theme-base/sass/etc/all.scss)文件中修改\(ext-trial: true !default; 为\)ext-t ...

  8. SCTL 涅槃重生：投入 RAL 的怀抱

    在<DistSQL:像数据库一样使用 Apache ShardingSphere>一文中,PMC 孟浩然为大家介绍了 DistSQL 的设计初衷和语法体系,并通过实战操作展示了一条 SQL ...

  9. Spark面试题（七）——Spark程序开发调优

    Spark系列面试题 Spark面试题(一) Spark面试题(二) Spark面试题(三) Spark面试题(四) Spark面试题(五)--数据倾斜调优 Spark面试题(六)--Spark资源调 ...

  10. [hdu7035]Game

    称区间$[i,j]$为普通区间,当且仅当$j-i\ge 3$​​​且其操作两次内不会变为给定区间 结论:若$[i,j]$为普通区间,则$[i,j]$和$[i+1,j-1]$​​​​​​​​​​的状态( ...