HTML矩形与矩形、圆形与圆形、矩形与圆形元素的碰撞判断与动画

1. 矩形与矩形
判断两个矩形是否碰撞，判断条件：d1Right > d2Left && d1Bottom > d2Top && d1Left < d2Right && d1Top < d2Bottom，理解了代码就简单了，如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><script type="text/javascript" src="js/jquery-3.4.1.min.js"></script><style>@keyframes myFrame {0% {box-shadow: 0px 0px 10px darkred;}10% {box-shadow: 0px 0px 10px red;}20% {box-shadow: 0px 0px 10px orange;}30% {box-shadow: 0px 0px 10px yellow;}40% {box-shadow: 0px 0px 10px greenyellow;}50% {box-shadow: 0px 0px 10px cadetblue;}60% {box-shadow: 0px 0px 10px cornflowerblue;}70% {box-shadow: 0px 0px 10px mediumpurple;}80% {box-shadow: 0px 0px 10px palevioletred;}90% {box-shadow: 0px 0px 10px darkred;}100% {box-shadow: 0px 0px 10px darkred;}}div {width: 100px;height: 100px;position: absolute;left: 0px;top: 0px;}.pp {animation: myFrame 4s infinite;}</style><title></title></head><body><div id="d1" style="background: darkseagreen;z-index: 1;"></div><div id="d2" style="left: 200px;top: 200px;background: antiquewhite;z-index: 0;"></div><script>var d1 = document.getElementById("d1");var d2 = document.getElementById("d2");d1.onmousedown = function(e) {e = e || event;var posX = e.clientX - this.offsetLeft;var posY = e.clientY - this.offsetTop;var d2Left = d2.offsetLeft;var d2Top = d2.offsetTop;var d2Right = d2Left + d2.offsetWidth;var d2Bottom = d2Top + d2.offsetHeight;d1.onmousemove = function(e) {var left = e.clientX - posX;var top = e.clientY - posY;d1.style.left = left + "px";d1.style.top = top + "px";var d1Left = d1.offsetLeft;var d1Top = d1.offsetTop;var d1Right = d1Left + d1.offsetWidth;var d1Bottom = d1Top + d1.offsetHeight;if(d1Right > d2Left && d1Bottom > d2Top && d1Left < d2Right && d1Top < d2Bottom) {$("#d2").addClass("pp");} else {$("#d2").removeClass("pp");}}d1.onmouseup = function(e) {d1.onmousemove = null;}}</script></body></html>

动态效果：

2. 圆形与圆形
判断两个圆形之间是否碰撞，只需要知道两个圆心的直线距离是否等于两个圆形的半径和就好了，代码如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/jquery-3.4.1.min.js"></script><style>@keyframes myFrame {0% {box-shadow: 0px 0px 10px darkred;}10% {box-shadow: 0px 0px 10px red;}20% {box-shadow: 0px 0px 10px orange;}30% {box-shadow: 0px 0px 10px yellow;}40% {box-shadow: 0px 0px 10px greenyellow;}50% {box-shadow: 0px 0px 10px cadetblue;}60% {box-shadow: 0px 0px 10px cornflowerblue;}70% {box-shadow: 0px 0px 10px mediumpurple;}80% {box-shadow: 0px 0px 10px palevioletred;}90% {box-shadow: 0px 0px 10px darkred;}100% {box-shadow: 0px 0px 10px darkred;}}div {width: 100px;height: 100px;position: absolute;border-radius: 50%;}.d1 {left: 20px;top: 20px;background: darkseagreen;z-index: 1;}.d2 {left: 200px;top: 400px;background: antiquewhite;z-index: 0;}.pp {animation: myFrame 4s infinite;}</style></head><body><div id="d1" class="d1"></div><div id="d2" class="d2"></div><script>var d1 = document.getElementById("d1");var d2 = document.getElementById("d2");var centerDot2 = new Object();centerDot2.x = d2.offsetLeft + d2.offsetWidth / 2;centerDot2.y = d2.offsetTop + d2.offsetHeight / 2;d1.onmousedown = function(e) {e = e || event;var posX, posY;posX = e.clientX - this.offsetLeft;posY = e.clientY - this.offsetTop;d1.onmousemove = function(e) {var centerDot1 = new Object();var left = e.clientX - posX,top = e.clientY - posY;var r;d1.style.left = left + "px";d1.style.top = top + "px";centerDot1.x = d1.offsetLeft + d1.offsetWidth / 2;centerDot1.y = d1.offsetTop + d1.offsetHeight / 2;r = Math.sqrt(Math.pow(centerDot2.x - centerDot1.x, 2) + Math.pow(centerDot2.y - centerDot1.y, 2));if(r < 100)$("#d2").addClass("pp");else$("#d2").removeClass("pp");}d1.onmouseup = function(e) {d1.onmousemove = null;}}</script></body></html>

动态效果：

3. 矩形与圆形
矩形与圆形之间的碰撞判断与上面两种相同形状的判断复杂一点，流程如图所示：

由图可知（请忽略非专业PPT版的UML图），圆形与圆形的判断：先假设为两个矩形，进行矩形碰撞判断，若无碰撞，则保持，若碰撞了则进行象限判断，若矩形四个角都在圆的四个象限内，如图：

则判断离圆心最近的一个角是否等于圆半径，若等于则碰撞，若不等于则无碰撞。
那么问题来了。矩形判断成功，象限判断失败的矩形是在圆的什么位置？
这种情况如下图，把圆当作矩形处理就行了。

源代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/jquery-3.4.1.min.js"></script><style>@keyframes myFrame {0% {box-shadow: 0px 0px 10px darkred;}10% {box-shadow: 0px 0px 10px red;}20% {box-shadow: 0px 0px 10px orange;}30% {box-shadow: 0px 0px 10px yellow;}40% {box-shadow: 0px 0px 10px greenyellow;}50% {box-shadow: 0px 0px 10px cadetblue;}60% {box-shadow: 0px 0px 10px cornflowerblue;}70% {box-shadow: 0px 0px 10px mediumpurple;}80% {box-shadow: 0px 0px 10px palevioletred;}90% {box-shadow: 0px 0px 10px darkred;}100% {box-shadow: 0px 0px 10px darkred;}}div {width: 100px;height: 100px;position: absolute;}.d1 {left: 20px;top: 20px;background: darkseagreen;z-index: 1;}.d2 {left: 200px;top: 400px;border-radius: 50%;background: antiquewhite;z-index: 0;}.pp {animation: myFrame 4s infinite;}</style></head><body><div id="d1" class="d1"></div><div id="d2" class="d2"></div><script>var d1 = document.getElementById("d1");var d2 = document.getElementById("d2");//圆心var centerDot = new Object();centerDot.x = d2.offsetLeft + d2.offsetWidth / 2;centerDot.y = d2.offsetTop + d2.offsetHeight / 2;d1.onmousedown = function(e) {e = e || event;/*鼠标在矩形内的偏移量*/var posX, posY;posX = e.clientX - this.offsetLeft;posY = e.clientY - this.offsetTop;d1.onmousemove = function(e) {/*矩形四个顶点*/var dot1 = new Object(),dot2 = new Object(),dot3 = new Object(),dot4 = new Object();var left = e.clientX - posX,top = e.clientY - posY;var d1Left = d1.offsetLeft;var d1Top = d1.offsetTop;var d1Right = d1Left + d1.offsetWidth;var d1Bottom = d1Top + d1.offsetHeight;var d2Left = d2.offsetLeft;var d2Top = d2.offsetTop;var d2Right = d2Left + d2.offsetWidth;var d2Bottom = d2Top + d2.offsetHeight;dot1.x = this.offsetLeft;dot1.y = this.offsetTop;dot2.x = this.offsetLeft + this.offsetWidth;dot2.y = this.offsetTop;dot3.x = this.offsetLeft + this.offsetWidth;dot3.y = this.offsetTop + this.offsetHeight;dot4.x = this.offsetLeft;dot4.y = this.offsetTop + this.offsetHeight;d1.style.left = left + "px";d1.style.top = top + "px";if(d1Right >= d2Left && d1Bottom >= d2Top && d1Left <= d2Right && d1Top <= d2Bottom) {/*判断矩形四个顶点是否都在圆的四个象限内*/if(dot1.x < centerDot.x && dot2.x < centerDot.x && dot3.x < centerDot.x && dot4.x < centerDot.x && dot1.y < centerDot.y && dot2.y < centerDot.y && dot3.y < centerDot.y && dot4.y < centerDot.y) {var r = Math.sqrt(Math.pow(centerDot.x - dot3.x, 2) + Math.pow(centerDot.y - dot3.y, 2));if(r <= 50)$("#d2").addClass("pp");else$("#d2").removeClass("pp");} else if(dot1.x > centerDot.x && dot2.x > centerDot.x && dot3.x > centerDot.x && dot4.x > centerDot.x && dot1.y < centerDot.y && dot2.y < centerDot.y && dot3.y < centerDot.y && dot4.y < centerDot.y) {var r = Math.sqrt(Math.pow(centerDot.x - dot4.x, 2) + Math.pow(centerDot.y - dot4.y, 2));if(r <= 50)$("#d2").addClass("pp");else$("#d2").removeClass("pp");} else if(dot1.x > centerDot.x && dot2.x > centerDot.x && dot3.x > centerDot.x && dot4.x > centerDot.x && dot1.y > centerDot.y && dot2.y > centerDot.y && dot3.y > centerDot.y && dot4.y > centerDot.y) {var r = Math.sqrt(Math.pow(centerDot.x - dot1.x, 2) + Math.pow(centerDot.y - dot1.y, 2));if(r <= 50)$("#d2").addClass("pp");else$("#d2").removeClass("pp");} else if(dot1.x < centerDot.x && dot2.x < centerDot.x && dot3.x < centerDot.x && dot4.x < centerDot.x && dot1.y > centerDot.y && dot2.y > centerDot.y && dot3.y > centerDot.y && dot4.y > centerDot.y) {var r = Math.sqrt(Math.pow(centerDot.x - dot2.x, 2) + Math.pow(centerDot.y - dot2.y, 2));if(r <= 50)$("#d2").addClass("pp");else$("#d2").removeClass("pp");} else {$("#d2").addClass("pp");}} else$("#d2").removeClass("pp");}d1.onmouseup = function(e) {d1.onmousemove = null;}}</script></body></html>

动态效果图：

在线运行源代码：https://gitnlf9527.github.io/Demo/HTML矩形与矩形元素的碰撞判断与动画.html
在线运行源代码：https://gitnlf9527.github.io/Demo/HTML圆形与圆形元素的碰撞判断与动画.html
在线运行源代码：https://gitnlf9527.github.io/Demo/HTML矩形与圆形元素的碰撞判断与动画.html

HTML矩形与矩形、圆形与圆形、矩形与圆形元素的碰撞判断与动画相关推荐

用JAVA awt实现Image Asset Studio生成圆形或圆角矩形图片功能
背景随着Android 7.1推出Round Icon Resources功能(不了解的,可以看Android开发者官网这篇文章Android 7.1 for Developers),圆形Icon应 ...
Unity新手引导（圆形指引、矩形指引）
Unity新手引导(圆形指引.矩形指引) 声明:中心镂空为圆形或矩形,增加指引动画,基于UGUI 一.Shader 建立两个shader,命名为RectGuide.CircleGuide. RectG ...
Android圆形以及圆角矩形头像
原理,通过设置画笔的Mode.SRC_IN将画布上重叠区域以外清除,圆形头像不就是我们的bitmap上在中心位置画一个圆然后两部分重叠的么. 如果不明白请往下看. 下面整张图是需要处理的bitmap, ...
[Android开发]不操作Bitmap实现圆角ImageView、圆形ImageView，支持添加背景圆形或圆角矩形边框、边框支持渐变色
一.主要解决的使用场景 1.使用Glide加载图片时,我们往往需要设置加载中和加载失败的图片,app中不同的页面的显示的图片可能是圆形,也可能是圆角矩形图,Glide设置placeholder和err ...
【数字信号处理】基本序列 ( 单位阶跃序列 | 单位阶跃序列与单位脉冲序列关系 | 矩形序列 | 矩形序列与单位阶跃序列关系 | 矩形序列作用 )
文章目录一.单位阶跃序列 1.单位阶跃序列与单位脉冲序列关系二.矩形序列 1.矩形序列与单位阶跃序列关系 2.矩形序列作用一.单位阶跃序列单位阶跃序列 : u(n)={1n≥00n<0u ...
html 绘制矩形,HTML5中使用canvas绘制矩形
canvas是HTML5中新增的一个元素,使用Canvas可以绘制任何你喜欢的图形.先来认识什么是Canvas? 1.在页面上放置一个canvas元素,就相当于在页面上放置了一块"画布&qu ...
P1719 最大加权矩形（最大连续子段和+矩形二维降一维+前缀和）
题目描述为了更好的备战NOIP2013,电脑组的几个女孩子LYQ,ZSC,ZHQ认为,我们不光需要机房,我们还需要运动,于是就决定找校长申请一块电脑组的课余运动场地,听说她们都是电脑组的高手,校长没 ...
C++设计并测试一个名为Rectangle的矩形类，其属性为矩形的左下角与右上角两个点的坐标，根据坐标能计算矩形的面积。
C++设计并测试一个名为Rectangle的矩形类,其属性为矩形的左下角与右上角两个点的坐标,根据坐标能计算矩形的面积. 注:该题是今日做题时所遇. 要求: [输入形式] 程序参考的输入(提示&quo ...
定义—个类MyRectangle代表矩形，为矩形定义getLength方法（获得矩形的长度）、getWidth方法（获得矩形的宽度）、setLength方法（设置矩形的长度）....
定义-个类MyRectangle代表矩形,为矩形定义getLength方法(获得矩形的长度).getWidth方法(获得矩形的宽度).setLength方法(设置矩形的长度).setWidth方法(设 ...

HTML矩形与矩形、圆形与圆形、矩形与圆形元素的碰撞判断与动画

HTML矩形与矩形、圆形与圆形、矩形与圆形元素的碰撞判断与动画相关推荐

最新文章

热门文章